객체 복사 방법 - 얕은 복사 vs. 깊은 복사

1. 얕은 복사 (Shallow Copy)

2. 깊은 복사 (Deep Copy)

---

console.log(1 == 1); // true

console.log({} === {}); // false

console.log([] === []); // false

let a = {};

let b = {};

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


a = { name: 'javascript' };

b = { name: 'javascript' };

console.log(a.name === b.name); // true

 

a와 b를 둘다 {}로 선언하면 console.log(a === b); 의 결과가 true가 나올 것으로 예상했지만, false가 나왔다. 이는 두 객체가 각각 다른 메모리에 할당되어 있기 때문이다.

 

하지만, 두 객체의 name이라는 속성이 'javascript'로 같을 때에는 console.log(a.name == b.name); 이 true로 나온다. 

 

그러면 객체의 속성처럼 객체 자체도 서로 같게 만들어 줄 수 있지 않을까?

 

객체 복사 방법에는 '얕은 복사'와 '깊은 복사'가 있다.

 

 

1. 얕은 복사 (Shallow Copy)

b = a;

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

b.key = 180;

console.log(a); // {name: 'javascript', key: 180}

console.log(b); // {name: 'javascript', key: 180}

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

얕은 복사는 복사되는 객체에 대해 참조에 의한 할당이 이루어진다. b = a; 처럼 객체를 직접 대입하는 경우 참조에 의한 할당이 이루어져 둘을 같은 데이터(주소)를 갖게 된다.

 

a나 b 둘 중 하나에 속성을 추가하는 경우에도 두 객체는 같은 주소를 참조하고 있기 때문에 a === b는 여전히 true이다.

 

얕은 복사는 c언어의 pointer 개념과 유사하며, field-by-field copy, field-for-field copy, field copy 등으로도 불린다.

 

 

2. 깊은 복사 (Deep Copy)

let c = {};

Object.assign(c, a); // (붙여넣을 영역, 가져올 영역)

console.log(a); // {name: 'javascript', key: 180}

console.log(c); // {name: 'javascript', key: 180}

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

 

깊은 복사는 필드가 역참조된다. 즉, 복사되는 객체에 대한 참조 대신, 참조가 되는 모든 객체를 위한 새 사본의 객체가 만들어진다.

 

사본 B에 의해 참조되는 객체들이 A에 의해 참조되는 것과 구별되어 독립적이라는 점에서 깊은 복사의 결과는 얕은 복사의 결과과 구별된다.

 

깊은 복사는 추가 객체의 생성이 필요하기 때문에 비용이 더 많이 발생한다.