자바스크립트, 얕은 복사와 깊은 복사 이해하기

출퇴근길에 공부하는 자바스크립트1

자바스크립트에서 객체를 다룰 때 얕은 복사(shallow copy)와 깊은 복사(deep codpy)는 빼놓을 수 없는 핵심적인 개념이다. 복사 방법에 따라서 원본 객체와 복사본 객체 사이의 연결성이 완전히 달라질 수 있기 때문이다.

얕은 복사

얕은 복사는 객체의 최상위 프로퍼티만 복사하는 방법이다. 중첩된 객체는 참조값으로 유지된다.

const o = { x: { y: 1 } };
const c1 = { ...o };
console.log(c1.x === o.x); // true

위의 코드처럼 c1.x와 o.x는 동일한 객체를 참조하고 있다.

깊은 복사

깊은 복사는 중첩된 객체까지 모두 복사하여 완전히 독립적인 복사본을 만드는 것이다. 여기에서 lodash의 cloneDeep 함수를 사용할 예정이다.

const _ = require('lodash');
 const c2 = _.cloneDeep(o);
console.log(c2 === 0); // false
 console.log(c2.x === o.x); // false

c2와 o는 서로 독립적인 객체이다. c2.x와 o.x 역시 서로 다른 객체를 참조한다.

얕은 복사 vs 깊은 복사

얕은 복사는 중첩된 객체에 대해서는 참조값을 복사하므로 원본과 복사본이 중첩된 객체를 공유하게 된다. 이에 반해 깊은 복사는 중첩된 객체까지 모두 복사하므로 원본과 복사본은 완전히 독립적이다. 그렇다면 우리는 얕은 복사와 깊은 복사 중 어떤 것을 사용해야 하는가? 깊은 복사는 중첩된 모든 객체를 복사해야 하므로 성능에 부담이 될 수 있다. 반면에 얕은 복사는 빠르지만, 원본 객체를 수정하면 복사본에도 영향을 줄 수 있다. 따라서 상황에 맞게 개발자의 판단하에 적절히 활용해야 할 것이다.