참조 타입과 비교 그리고 함수 호출방식 이해하기

참조 타입의 특성

자바스크립트에서는 기본 타입인 숫자, 문자열, boolean, null, undefined 5가지를 제외한 모든 값은 객체이다.

이러한 객체는 자바스크립트에서 참조 타입이라고 부른다. 이것은 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문이다.

 

const objA = {
	val : 40
}

const objB = objA

 

 

objA 객체를 객체 리터럴 방식으로 생성했다. 여기서 매우 중요한 개념, objA 변수는 객체 자체를 저장하고 있는 것이 아니라 생성된 객체를 가리키는 참조값을 저장하는 것이다. 또한, 변수 objB에 objA 값을 할당한다. objA는 생성된 객체를 가리키는 참조값을 가지고 있으므로 변수 objB에도 이같은 객체의 참조값이 저장된다.

 

객체 비교

일치 연산자(===)를 사용하면 타입의 변환 없이 두 피연산자 값을 비교하는 반면,

동등 연산자(==)를 사용하면 타입이 같지 않으면 타입을 변환한 후 두 피연산자 값을 비교하며,  두 객체를 비교할 때도 객체의 프로퍼티값이 아닌 참조값을 비교한다.

 

예제를 살펴보자

const a = 100;
const b = 100;

const objA = { value : 100 };
const objB = { value : 100 };
const objC = objB;

// 1번
console.log(a == b);

// 2번
console.log(objA == objB);

// 3번
console.log(objB == objC);

자, 1번을 보자. 답은 너무 쉽다. 그렇다 "true"이다. 다음은 2번을 보자. 2번도 풀어보자.

정답은?

 

"false" 이다. 틀렸다면 위에서 설명한 동등 연산자의 개념을 아직 숙지하지 못했다. 동등 연산자의 개념을 숙지했다면, 더 위에 설명한 참조 타입의 특성을 이해하지 못한 것이다.

objA와 objB는 각자 다르게 생성된 객체 값을 저장하고 있다. 즉, 다른 객체를 저장하고 있다. 고로, 객체의 참조 값을 비교하는 동등 연산자에서는 "false"를 반환하는 것이다.

 

자, 3번을 보자, 3번의 정답은?

 

"true" 이다. objB와 objC 는 하나의 같은 객체 값을 저장하고 있기 때문에 참조 값이 같다. 고로 true를 반환하는 것이다.

 

참조에 의한 함수 호출 방식

기본 타입과 참조 타입의 경우는 함수 호출 방식도 다르다.

 

기본 타입의 경우는 값에 의한 호출(call by value) 방식으로 동작한다.

즉, 함수를 호출할 때 인자로 기본 타입의 값을 넘길 경우, 호출된 함수의 매개변수로 복사된 값이 전달된다.

 

참조 타입의 경우는 참조에 의한 호출(call by reference) 방식으로 동작한다.

즉, 함수를 호출할 때 인자로 참조 타입인 객체를 전달한 경우, 객체의 프로퍼티 값이 함수의 매개변수로 복사되지 않고, 인자로 넘긴 객체의 참조 값이 그대로 함수 내부로 전달된다. 때문에 함수 내부에서 참조 값을 이용해서 인자로 넘긴 실제 객체의 값을 변경할 수 있다.

 

예제를 확인해보자.

const a = 100;
const objA = { value: 100 };

function changeArg(num, obj) {
	num = 200;
    obj.value = 200;
    
    console.log("arg_a", num);
    console.log("arg_objA", obj);
}

chnageArg(a, objA);

console.log("a", a);
console.log("objA", objA);

 

[출력 결과]

arg_a 200;
arg_objA { value : 200 }
a 100
objA { value : 200 }

 

위 설명과 같이 "값에 의한 호출" 방식으로 넘긴 기본 타입의 값의 경우 매개변수로 복사된 값이 전달되어, 실제 값은 변경되어지지 않은 반면 "참조에 의한 호출" 방식으로 넘긴 참조 타입의 경우 참조 값이 그대로 함수 내부로 전달되어 실제 객체 값이 변경되었다.

 

 

[참조]

인사이드 자바스크립트