Javascript | Shallow and Deep Copy (얕은 복사와 깊은 복사)

얕은 복사(shallow copy)란?

const obj1 = { a: 1, b: 2};
const obj2 = obj1;
console.log( obj1 === obj2 ); // true

위의 예시처럼 객체를 직접 대입하는 경우 참조에 의한 할당이 이루어지므로 둘은 같은 데이터(주소)를 가지고 있다.
이것이 얕은 복사이다.

const obj1 = { a:1, b:2 };
const obj2 = obj1;
obj2.a = 100;
console.log( obj1.a ); // 100

위 두 객체는 같은 데이터(주소)를 가지고 있고, 그래서 같은 주소를 참조하고 있다.
때문에 obj2의 property를 수정하고, obj1를 출력해도 obj2 값과 동일하다.

깊은 복사(Deep copy)란?

1. 데이터 자체를 통째로 복사한다.
2. 복사된 두 객체는 완전히 독립적인 메모리를 차지한다.
3. value type의 객체들은 깊은 복사를 하게 된다.

방법 1. …(spread) 연산자를 통한 복사

const obj1 = { a:1, b:2 };
const obj2 = { ...obj };
obj2.a = 100;
console.log( obj1 === obj2 ) // false
console.log( obj1.a ) // 1

...(spread) 연산자를 통해 { }안에 obj1의 속성을 복사하여 obj2에 할당하였다.
이제 obj1과 obj2는 다른 주소를 갖게 되었다.

Object.assign() 메소드를 통한 복사

const obj1 = { a:1, b:2 };
const obj2 = Object.assign({}, obj1);
obj2.a = 100;
console.log( obj1 === obj2 ) // false
console.log( obj1.a ) // 1

Object.assign() 메소드를 통해 첫 번째 인자로 빈 { } 객체를, 두 번째 인자로 obj1 넣고 obj2 에 할당하였다.
이제 obj1과 obj2는 다른 주소를 갖게되었다. (그러나 딱, 1 depth 까지만)

---

❗️주의, 깊은 복사의 함정

Object.assign() 메소드도 spread 연산자 둘 다 완벽한 Deep copy 되지 않는다.
객체가 서로 다르다고 깊은 복사가 이루어진건 아니다.

1. depth 까지는 확실하게 Deep copy.
2. depth 이상이면 Shallow copy.
   
   

❗️완벽한 Deep copy를 위한 다른 방법

재귀적으로 깊은 복사를 수행
Lodash의 cloneDeep 함수 사용
JSON.parse()와 JSON.stringify()함수 사용

참고 | https://hanamon.kr/javascript-shallow-copy-deep-copy/