[JS] 참조에 의한 전달 - 깊은 복사와 얕은 복사

여러개의 식별자가 하나의 객체를 공유할 수 있다는 것이 무엇을 의미할까?

 

let obj = {
	name: 'Park'
};

let obj2 = obj; // 얕은 복사

obj2.name = 'Lee';

console.log(obj);  // name = 'Lee'
console.log(obj2); // name = 'Lee'

 

obj2 같은 경우에는 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다.

이 말은 새롭게 {name = 'Park'} 를 저장하기 위한 메모리를 만들지 않고 두 개의 식별자가 하나의 객체를 공유한다는 것을 의미한다. 

즉 obj와 obj2는 모두 동일한 객체를 가르키고, 원본 또는 사본 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받는다.

 

let obj = {
	name: 'Park'
};

let obj2 = {...obj}; // 깊은 복사

obj2.name = 'Lee';

console.log(obj);  // name = 'Park'
console.log(obj2); // name = 'Lee'

 

반면 깊게 복사한 obj3의 경우엔 원본의 참조 값이 복사되어 전달되지 않는다. 어느 한 쪽에서 객체를 변경(프로퍼티 값 변경, 추가, 삭제)등)을 해도 서로 영향을 받지 않는다. 객체 리터럴은 평가될 때마다 객체를 생성하기 때문에 내용이 같은 객체여도 다른 메모리에 저장된 별개의 객체이다. 그러나 프로퍼티 값은 동일하면 같은 원시값으로 평가된다.

 

 

새로운 객체에 변수를 할당할 때 영향을 같이 받아야한다면 얕은 복사를, 서로 영향을 받으면 안되는 상황이면 깊은 복사를 사용해 

예상하지 못한 오류를 피하자.