Pass-by-Value vs Pass-by-Reference

Javascript

Pass-by-Value

  • 기본자료형의 값은 값(Value)으로 전달한다.(원래 값은 그대로 존재하고, 그 값이 복사되어 전달된다.)
  • 기본자료형의 값은 한번 정해지면 변경할 수 없다.(Immutable, 재할당은 가능하지만 기존의 값은 메모리에 저장되어 있다.)
  • 기본자료형의 값은 런타임(변수 할당 시점)에 메모리의 스택 영역(Stack Segment)에 고정된 메모리 영역을 점유하고 저장된다.
1
2
3
4
5
6
7
8
9
var a = 1;
var b = a; // a의 값(1)이 복사되어 전달

console.log(a, b);    // 1  1
console.log(a === b); // true

a = 10; // 재할당은 가능하지만, 기존의 값은 메모리에 저장되어 있다.
console.log(a, b);    // 10  1
console.log(a === b); // false


Pass-by-Reference

  • 객체형의 값은 실제 값이 아닌 값을 참조하여 전달한다.(값의 주소(address)를 참조한다.)
  • 객체형은 변경 가능(mutable)한 값으로, 프로퍼티를 변경, 추가, 삭제가 가능하다.
  • 객체형의 값은 동적으로 변화할 수 있어서 어느 정도의 메모리 공간이 필요한지를 알 수가 없기 때문에, 런타임(변수 할당 시점)에 메모리 공간을 확보하고, 메모리의 힙 영역(Heap Segment)에 저장된다.
1
2
3
4
5
6
7
8
9
var obj1 = { val: 100 }

var obj2 = obj1; // 값을 참조하여 전달
console.log(obj1.val, obj2.val); // 100 100
console.log(obj1 === obj2);      // true

obj2.val = 200; // 객체의 값은 변경 가능
console.log(obj1.val, obj2.val); // 200 200
console.log(obj1 === obj2);      // true


두 변수사이에 같은 내용을 할당하여도, 각 별개의 객체를 생성하여, 서로 다른 참조값을 가진다.

1
2
3
4
5
6
7
8
9
10
var obj1 = { val: 100 };
var obj2 = { val: 100 };

console.log(obj1.val, obj2.val); // 100 100
console.log(obj1 === obj2);      // false -> 서로 다른 참조값을 가지기 때문에, 두 변수는 같지 않다.

var obj3 = obj2;

console.log(obj3.val, obj2.val); // 100 100
console.log(obj3 === obj2);      // true -> 서로 같은 참조값을 가지기 때문에, 두 변수는 같다.


서로 다른 빈 객체 참조 및 모두 같은 빈 객체 참조(예제)

1
2
3
4
5
6
7
8
9
10
11
12
// a, b, c는 각각 다른 빈 객체를 참조
var a = {};
var b = {};
var c = {};

console.log(a === b, a === c, b === c); // false false false


// a, b, c는 모두 같은 빈 객체를 참조
a = b = c = {};

console.log(a === b, a === c, b === c); // true true true