얕은 복사, 깊은 복사, shallow copy, deep copy

얕은 복사

얕은 복사는 객체의 최상위 속성만 복사하며, 중첩된 객체나 배열은 참조를 공유합니다. 따라서, 복사된 객체의 중첩된 속성을 변경하면 원본 객체도 영향을 받습니다.

const original = {
  name: "John",
  address: {
    city: "New York",
    street: "123 Main St"
  }
};

// 얕은 복사
const copy = { ...original };

// 또 다른 얕은 복사
const copy1 = Object.assign( {}, original }

// 복사된 객체에서 중첩된 객체 수정, copy1의 경우도 같음
copy.address.city = "Los Angeles";

console.log(original.address.city); // "Los Angeles"

 

깊은 복사

깊은 복사는 객체의 모든 레벨을 복사하며, 중첩된 객체나 배열도 새로운 인스턴스로 복사합니다. 이로 인해 복사된 객체는 원본 객체와 완전히 독립적이게 됩니다. 다음의 2가지 경우 추천합니다.

 

1. JSON.parse() 와 JSON.stringify() 사용

const original = { a: 1, b: { c: 3 } };
const copy = JSON.parse(JSON.stringify(original));

copy.b.c = 4;
console.log(original.b.c); // 3 (원본 객체는 변경되지 않음)

const original = {
  name: "John",
  address: {
    city: "New York",
    street: "123 Main St"
  }
};

// JSON을 사용한 깊은 복사
const deepCopy = JSON.parse(JSON.stringify(original));

// 복사된 객체 수정
deepCopy.address.city = "Los Angeles";

// 결과 출력
console.log(original.address.city); // "New York" (원본 객체는 변경되지 않음)
console.log(deepCopy.address.city); // "Los Angeles" (깊은 복사된 객체는 변경됨)

** 이 방법은 객체내에 함수, undefined, Symbol 과 같은 값이  포함되어 있으면, 이러한 값들은 복사되지 않습니다. 또한 순환참조(Circluar reference)가 있으면 처리를 못합니다.

 

2. lodash.cloneDeep 라이브러리 이용

const _ = require('lodash');

const original = { a: 1, b: { c: 3 } };
const copy = _.cloneDeep(original);

copy.b.c = 4;
console.log(original.b.c); // 3 (원본 객체는 변경되지 않음)

 

얕은복사와 깊은복사의 차이는, 중첩된 부분이 완전 별개 독립적으로 복사가 되었는지, 아니면 참조로 값을 공유해서 어느 한 쪽의 값이 변 할 때 함께 변하는가에 따라서 구분하는 용어입니다. 

 

용어정리 

얕은복사 : Shallow copy

깊은복사 : Deep copy

중첩객체 : Nested object

중첩배열 : Nested array

순환참조(Circluar reference) : 다른 객체를 다시 참조하는 코드