[JavaScript] call by value(값에 의한 호출) vs call by reference(참조에 의한 호출) 차이는?

call by value(값에 의한 호출) vs call by reference(참조에 의한 호출) 차이

자바스크립트에서는 원시 타입(primitive type)의 값은 call by value(값에 의한 호출)로 전달되고, 객체 타입(object type)은 call by reference(참조에 의한 호출)로 전달됩니다.

call by value(값에 의한 호출)은 변수에 저장된 값을 복사해서 전달하는 방식입니다. 예를 들어, 다음과 같이 숫자를 전달하는 경우를 생각해봅시다.

 

※ 원시타입 : 숫자(number), 문자열(string), 불리언(boolean), null, undefined, 심볼(symbol) - 각각의 원시 타입은 값(value)을 갖고 있으며, 이 값은 변경될 수 없습니다(immutable)

 

let x = 10;

function changeValue(val) {
  val = 20;
}

changeValue(x);
console.log(x); // 10

위의 예제에서는 함수 changeValue 에 x 값을 전달했는데, 이때 x 값의 복사본이 val 매개변수에 전달됩니다. changeValue 함수 안에서 val 값이 변경되어도, x 변수의 값은 그대로 10으로 유지됩니다.

반면에 call by reference(참조에 의한 호출)는 객체의 메모리 주소를 전달하는 방식입니다. 예를 들어, 다음과 같이 객체를 전달하는 경우를 생각해봅시다.

 

let obj = { value: 10 };

function changeValue(obj) {
  obj.value = 20;
}

changeValue(obj);
console.log(obj.value); // 20

위의 예제에서는 함수 changeValue 에 obj 객체를 전달했는데, 이때 obj 객체의 메모리 주소가 obj 매개변수에 전달됩니다. changeValue 함수 안에서 obj 객체의 value 프로퍼티를 변경하면, 원본 obj 객체의 value 프로퍼티도 함께 변경됩니다.

따라서 자바스크립트에서는 객체 타입을 다룰 때 주의해야 합니다. 객체를 전달하는 경우, 객체의 복사본이 아닌 객체의 참조가 전달되기 때문에 함수 안에서 객체를 수정하면 전역에서도 객체가 변경될 수 있습니다.