자바스크립트 깊은 복사 & 얕은 복사

 

 

 

자바스크립트에서 깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)는 객체를 복사할 때 중요한 개념이다

이 두 방법은 복사되는 객체의 참조 타입 속성이 어떻게 처리되는지에 따라 차이가 있다

 

얕은 복사 (Shallow Copy)

얕은 복사는 객체의 최상위 수준의 속성만 복사하는 방법이다

만약 속성 값이 기본 데이터 타입(예: String, Number)이라면, 해당 값을 직접 복사한다

하지만 속성 값이 객체나 배열과 같은 참조 데이터 타입이라면, 참조(메모리 주소)만 복사한다

이로 인해, 원본 객체와 복사된 객체가 동일한 참조 값을 공유하게 되므로, 한 객체에서 참조 타입 속성을 수정하면 다른 객체에도 영향을 미친다

예시:

const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);

console.log(copy); // { a: 1, b: { c: 2 } }

// 참조 타입 속성을 수정하면, 원본 객체에도 영향을 미칩니다.
copy.b.c = 20;
console.log(original); // { a: 1, b: { c: 20 } }

 

깊은 복사 (Deep Copy)

깊은 복사는 객체의 모든 수준의 속성을 재귀적으로 복사하는 방법이다

이는 객체 내부의 모든 참조 타입 속성도 새로운 메모리 주소에 복사된다

결과적으로, 원본 객체와 복사된 객체 사이에는 어떤 참조 값도 공유되지 않으며, 한 객체에서의 변경이 다른 객체에 영향을 미치지 않는다

예시 (JSON 메소드를 사용하는 간단한 깊은 복사):

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

console.log(copy); // { a: 1, b: { c: 2 } }

// 참조 타입 속성을 수정해도, 원본 객체에는 영향을 미치지 않습니다.
copy.b.c = 20;
console.log(original); // { a: 1, b: { c: 2 } }

 

주의 사항

• JSON 메소드를 사용한 깊은 복사의 제한사항:
  • JSON 메소드를 사용한 깊은 복사는 함수, undefined, 또는 순환 참조를 포함하는 객체를 올바르게 처리하지 못한다
  • 또한, Date 객체와 같이 JSON으로 변환할 때 정보가 손실될 수 있는 객체 타입에 대해서도 주의해야 한다
• 라이브러리를 사용한 깊은 복사:
  • 보다 복잡한 객체를 깊은 복사할 필요가 있다면, Lodash 라이브러리의 _.cloneDeep() 함수와 같은 도구를 사용하는 것이 좋다
  • 이러한 도구는 보다 다양한 데이터 타입과 복잡한 객체 구조를 정확히 복사할 수 있다

얕은 복사와 깊은 복사의 차이를 이해하는 것은 데이터를 올바르게 관리하고, 예기치 않은 부작용을 방지하는 데 중요하다