[javascript] 객체의 깊은 복사와 얕은 복사

15 Dec 2023

javascript

JavaScript에서 객체를 복사할 때 주의해야 하는 것이 있습니다. 객체를 복사할 때 다양한 방법이 있고, 그 중에서 깊은 복사와 얕은 복사에 대해 알아보겠습니다.

얕은 복사 (Shallow Copy)

얕은 복사는 원본 객체의 값만을 복사하는 방식입니다. 즉, 객체 안에 객체가 있다면 내부 객체의 참조만을 복사하게 됩니다. 얕은 복사를 하는 가장 간단한 방법은 spread 연산자(...)를 활용하는 것입니다.

const originalObject = {
  name: 'John',
  age: 30,
  address: {
    city: 'Seoul',
    country: 'South Korea'
  }
};

const shallowCopy = { ...originalObject };

위의 예시에서 shallowCopy는 originalObject의 얕은 복사본이 됩니다. 하지만 내부 객체 address는 동일한 참조를 유지하기 때문에 originalObject의 address가 변경되면 shallowCopy의 address 역시 영향을 받을 수 있습니다.

깊은 복사 (Deep Copy)

깊은 복사는 객체의 모든 내용을 완전히 복사하는 방식입니다. 내부 객체도 새로운 메모리 주소에 재귀적으로 복사됩니다. JavaScript에서 깊은 복사를 하는 가장 간단한 방법은 JSON.parse()와 JSON.stringify()를 사용하는 것입니다.

const deepCopy = JSON.parse(JSON.stringify(originalObject));

위의 예시에서 deepCopy는 originalObject의 깊은 복사본이 됩니다. 내부 객체까지 완전히 새로운 메모리 주소에 복사되므로 원본 객체의 변화에 영향을 받지 않습니다.

결론

객체를 복사할 때에는 복사하는 방식에 주의해야 합니다. 얕은 복사는 내부 객체에 대한 참조를 공유할 수 있기 때문에 의도치 않은 문제를 발생시킬 수 있습니다. 깊은 복사를 사용하여 내부 객체까지 완전히 새로운 복사본을 생성하는 것을 권장합니다.

참조: