[TIL] shallow copy vs 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 = 3;
console.log(obj1.a); // 3

때문에 이처럼 obj2의 프로퍼티를 수정했을 때, obj1의 프로퍼티의 값도 변경이 된다. 변경이 되는 것이 아니라 하나의 값이 변경되었고 그 값을 두 변수에서 참조하는 것이다.

deep copy (깊은 복사)

주소를 복사하는 것이 아니라 새로운 객체에 프로퍼티만 복사하는 방식이 깊은 복사이다.

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };

obj2.a = 3;

console.log(obj1 === obj2); // false
console.log(obj1.a) // 1

const obj1 = { a: 1, b: 2 };
const obj2 = Object.assign({}, obj1);

obj2.a = 3;

console.log(obj1 === obj2); // false
console.log(obj1.a) // 1

깊은 복사는 완전하게 깊은 복사가 되지는 않는다. 객체의 프로퍼티로 객체를 갖는다면 프로퍼티의 객체는 얕은 복사가 된다.

const obj1 = { a: { b: 1, c: 2 }, d: 3 };
const obj2 = { ...obj1 };

obj2.a.b = 4;

console.log(obj1 === obj2); // false
console.log(obj1.a.b) // 4

때문에 완벽한 deep copy를 위해서는 상황에 맞게 신경을 잘 써주어야 한다.

const obj1 = { a: { b: 1, c: 2 }, d: 3 };
const obj2 = { ...obj1, a: { ...obj1.a } };

obj1.a.b = 4;

console.log(obj1 === obj2); // false
console.log(obj1.a.b); // 1