복제와 참조

var a = 1;
var b = a;
b = 2;
console.log(a); // 1

위 코드에서 b = a이고 b의 값을 2로 정의했는데 a의 값이 1이 나온 이유는 a = 1로 정의를 하고 b = a 를 하였을때 b는 a의 값 본체에 연결되어 있는것이 아니라 b는 a의 값과 똑같은 값에 연결되어 있는것이다. 한마디로 b는 a의 값을 복제한 값을 대입하는 것이다. 이러한 개념을 복제라고 하는데 복제는 a = 1; 처럼 원시데이터 타입일때 일어난다. 원시데이터가 아닌 다른 데이터 타입, 즉 객체에서는 복제가 발생하지 않는다.

var a = {'id':1};
var b = a;
b.id = 2;
console.log(a.id);  // 2

여기서 a를 객체로 정의하였고 b = a를 했을경우, a의 값이 원시데이터 타입이 아니기때문에 복제가 아니라 참조가 발생한다. a가 바로보고 있는 객체와 b가 바라보고 있는 객체가 완전히 동일한 객체본체인것이다. 그래서 b의 id값을 2로 변경하였을때 같은 객체본체를 바라보고 있기때문에 id의 값자체가 2로 변경되어 a의 id도 2로 변경된 것이다.

var a = {'id':1};
var b = a;
b = {'id' : 2};
console.log(a.id);  // 1

위 예제는 b = {'id' : 2};로 b가 객체를 생성하였기 때문에 a가 가리키는 객체와 b가 가리키는 객체(b가 생성한객체)가 서로 다르기 때문에 a.id의 값은 1로 나오는 것이다. 사실 이 예제는 아래 예제와 같은 것이다.

var a = 1;
var b = a;
b = 2;
console.log(a);

b = 2라는 것은 2라는 데이터를 새로 만들어서 b에게 할당하는 것이기 때문에 위 객체와 다를것이 없지만 차이는 b = a부분에 있다. 변수의 담겨있는 값이 객체인 경우 b = a 라고 했을때 b와 a는 똑같은 객체본체를 바라보고 있는것이고, 데이터 타입이 원시데이터인경우 b = a라고 했을경우 그 순간에 a의 담겨있던 값이 복제되어 새로 만들어져 b에게 담겨지는 것이다.

var a = 1;
function func(b){
    b = 2;
}
func(a);
console.log(a); // 1

함수도 마찬가지로 a의 복제된 값을 b에게 할당한 후 b의 값을 변경한것이기 때문에 a의 값에는 영향이 없다. (b가 바라보는 값과 a가 바라보는 값이 다르다)

var a = {'id':1};
function func(b){
    b = {'id':2};
}
func(a);
console.log(a.id);  // 1

변수에 담긴값이 객체일경우에는 함수안에서 b가 새로운 객체를 생성했기때문에 b가 바라보는 객체와 a가 바라보는 객체는 서로 다른객체가 되기때문에 a의 id 값에는 영향이 없다. 하지만 아래와 같은 경우

var a = {'id':1};
function func(b){
    b.id = 2;
}
func(a);
console.log(a.id);  // 2

b가 새로운 객체를 생성하지 않고 b = a인 경우 a와 b가 바라보는 객체가 서로 같기 때문에(참조) b의 id값을 2로 변경하면 a의 id값도 변경되는 것이다.