[JavaScript] Call by Value, Call by Reference

* Call by Value : 값에 의한 호출

CBV의 특징은 값이 '그대로' 복사(deep copy)된다는 점이다. 즉, 같은 값을 가진 데이터가 메모리에 또 하나 만들어져 저장되는 것이다. 

// call by value
let x = 2;
let y = x;
y = 3

x === y // false (x = 2, y = 3)

코드 네 번째 줄을 보면, y에 x의 값이 할당되어 있다. x의 값을 복사(deep copy)해서 y에 할당한 것이다. x와 y의 값은 각각 별개이므로 y값의 변화가 x에 전혀 영향을 미치지 않는다. 따라서 x===y 의 불린값은 false가 된다 (x = 2, y = 3)

 

* Call by Reference : 참조에 의한 호출

CBR의 특징은 변수에 값이 복사되는 것이 아니라, 메모리의 주소값을 담는다는 것이다. 

// call by reference
let a = { say : "hi" };
let b = a;

a === b // true

변수 a에는 { say : "hi" }라는 객체가 담겨있는 것이 아니라, 해당 객체의 메모리 주소값을 가지고 있다. 따라서 변수 b에 할당된 값도 객체 자체가 아닌 a가 기리키는 객체의 주소값이다. 말하자면 변수 a와 b는 메모리 내 같은 주소를 가리키고 있는 것이다. 따라서, a===b 불린값은 true 가 된다. (그림 참고)

 

* Call by Sharing 

// call by sharing
let a = { say : "hi" };
let b = a;
b = 3

console.log(a.say) // "hi"
a === b / false

 

 

중요한 점이 있다. 자바스크립트에서는 모든 데이터(원시, 참조 불문)가 Call By Value 방식으로 작동한다는 점이다. 참조 타입을 인자로 넘기면 참조값(주소값)에 대한 복사본이 넘어간다. 이를 Call by Sharing 이라고 부르기도 한다. 

위 코드를 보면, 변수 a에는 { say : 'hi' } 객체의 주소값이 담겨 있다(shallow copy). 그리고 변수 b에는 a가 가진 주소값이 복사되었다. 이 시점에서 a와 b의 값은 동일한 객체의 주소값이기 때문에, a === b 의 불린값은 true 가 된다. 

 

하지만 4번째 줄에 변수 b에 3이 새로 할당되었다. 이 시점에서 변수 a와 b는 서로 다른 값을 갖는다. 변수 a에는 객체의 주소값이, b에는 숫자 3이 할당된 상태이므로, a ===b 의 불린값은 false 가 된다.

 

 

* Reference : <인사이드 자바스크립트>, 오늘도 끄적끄적 (https://perfectacle.github.io/2017/10/30/js-014-call-by-value-vs-call-by-reference/)