얕은 복사(Shallow Copy) & 깊은 복사(Deep Copy)

얕은 복사(Shallow Copy) vs 깊은 복사(Deep Copy
발생하는 이유 : 원시타입과 객체타입이 복사하는 방식이 다르기 때문

얕은 복사 (Shallow Copy) : 원본의 주소 값을 복사 | 복사본 값 변경 시 원본 값도 변경

얕은 복사는 복사본이 만들어진 원본 객체와 같은 참조 (메모리 내의 같은 값을 가리킴)를 공유하는 복사입니다.

따라서 원본과 복사본이 참조하는 주소가 동일하므로, 복사본의 값이 변경되면 원본 값 또한 이에 영향을 받아 바뀌게 됩니다.

const original = {
  name: 'Alice',
  age: 25,
  hobbies: ['reading', 'swimming'],
  address: {
    city: 'Seoul',
    country: 'South Korea',
  },
};

const copy = original;
copy.name = 'Bob';

console.log(copy);

위의 경우 original 객체와 copy 객체의 name이 모두 Bob으로 변경된 것을 볼 수 있습니다.

객체의 경우 프로퍼티가 늘어날 경우 메모리 용량이 증가하고 복잡한 구조를 갖게 되므로 자바스크립트가 더 효율적으로 일을 하기 위해 객체의 값 전체가 아닌 주소를 복사하게 되는 것입니다.

그렇다면 깊은 복사는 어떤 차이점이 있을까요?

깊은 복사(Deep Copy) : 원본의 실제 값을 복사 | 복사본의 값 변경 시 원본 값은 변경 X

깊은 복사는 복사본이 원본과 동일한 주소를 공유하지 않고 값을 복사하는 방법입니다. 이 경우, 복사본의 값을 변경하더라도 원본의 값은 유지됩니다.

따라서 복사하려는 원본이 원시 값이거나 1단계 객체에 Object.assign() 메소드나 spread 연산자를 사용할 경우, 배열에 Array.from 메소드나 slice 메소드를 사용할 경우 깊은 복사가 가능합니다.

위의 예제코드에서 spread 연산자를 사용해 객체를 복사해 보았습니다.

const original = {
  name: 'Alice',
  age: 25,
  hobbies: ['reading', 'swimming'],
  address: {
    city: 'Seoul',
    country: 'South Korea',
  },
};

const copy = { ...original };

copy.name = 'Bob';
copy.age = 30;
copy.hobbies.push('painting');
copy.address.city = 'Busan';

console.log(copy);
console.log(original);

원본 객체 original의 원시 값인 name과 age는 변경되지 않고 그대로 유지되었지만, 객체 내부의 객체, hobbies와 address는 값이 변경된 것을 볼 수 있습니다.

이러한 중첩 객체를 깊은 복사하기 위해서는 JSON 객체 메서드를 사용하거나 Lodash 라이브러리 사용, 재귀 함수를 통해 함수를 호출하여 객체를 분리시키는 방법 등이 있습니다.

참고
깊은 복사 (MDN)
얕은 복사 (MDN)
자바스크립트 깊은 복사, 얕은 복사 (심플코딩)
[JavaScript, ES6] 중첩된 객체의 깊은 복사 방법