자바스크립트 - 객체 복사

let message = "Hello!";
let phrase = message;

-> 원시 값은 다음과 같이 간단하게 복사하여 저장할 수 있습니다.

 

그러나 객체의 경우 그대로 복사되어 저장되는 것이 아닌 객체가 저장되어져 있는 메모리 주소인 참조 값이 저장됩니다.

let user = { name: "John" };

let admin = user; // 참조값을 복사함

객체의 경우 메모리 어딘가에 저장되어져 있고 다음과 같이 객체를 다른 변수에 할당할 경우 동일한 객체를 참조하고 있게 됩니다. 이렇게 되면 한쪽에서 객체를 수정할 경우 다른 한 쪽 변수에서 수정된 객체의 내용을 볼 수 있습니다. 

 

let a = {};
let b = a; // 참조에 의한 복사

alert( a == b ); // true, 두 변수는 같은 객체를 참조합니다.
alert( a === b ); // true

//-------------------------------------------------------------------

let a = {};
let b = {}; // 독립된 두 객체

alert( a == b ); // false

객체를 생성 후 할당 하면 동일한 객체를 가리키게 되어 비교 연산 시 true를 반환하게 되지만 각 변수별로 새로 생성할 경우 다른 객체를 의미하기 때문에 비교 연산 시 false를 반환하게 됩니다.

 

객체와 원시값을 비교하게 될 경우 객체가 원시 값으로 변환이 되기 때문에 주의해서 사용해야 합니다.

 

객체를 동일하게 복사하여 새로운 객체를 만들어 할당하고 싶으면 자바스크립트 내장 엔진에서 제공하고 있지 않기 때문에 새로 연산을 이용해 직접 프로퍼티 값을 복사 해 주어야 합니다.

Object.assign 을 사용하여 복사하는 방법도 있습니다.

Object.assign(dest, [src1, src2, src3...])

* dest : 목표로 하는 객체 입니다.

* src : 복사하고자 하는 객체이고 여러개를 복사할 수 있습니다.

=> 모든 프로퍼티가 복사 된 후 dest를 반환합니다.

=> dest에 동일한 프로퍼티가 있을 경우 덮어 쓰게 됩니다.

 

 

객체 내부에서 다른 객체를 참조하고 있을 때 복사할 경우 기존 방식대로 하면 동일한 객체를 참조하게 됩니다. 그러므로 깊은 복사를 위해 객체 여부를 확인 후 복사할 수 있게 처리를 해주어야 합니다.  깊은복사의 경우 직접 만들어서 사용하거나 lodash의 메서드인 _.cloneDeep(obj)를 사용해 구현할 수 있습니다.