JavaScript의 얕은 복사와 깊은 복사

개요

자바스크립트에서는 객체나 배열을 복사하는 것을 얕은 복사(shallow copy)와 깊은 복사(deep copy)로 분류할 수 있습니다. 복잡한 데이터 구조, 특히 중첩된 객체나 배열이 포함된 데이터 구조를 다룰 때 차이점을 이해하는 것이 중요합니다.

이 가이드에서는 이러한 개념, 특성, 구현 방법 및 각각의 사용 시기를 설명합니다.

1. 얕은 복사

정의
단순 복사본은 개체 또는 배열의 최상위 속성의 복사본을 만듭니다. 그러나 중첩된 객체나 배열의 경우 실제 데이터가 아닌 참조만 복사됩니다.

특징

• 속성 또는 요소의 첫 번째 수준만 복사합니다.
• 중첩된 개체 또는 배열은 원본 개체/배열과 참조를 공유합니다.
• 간단한 구조에는 가볍고 효율적이지만 중첩된 데이터의 독립적인 복제에는 적합하지 않습니다.

1.1 Object.sign() 사용

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

shallowCopy.b.c = 42; 
console.log(original.b.c); // OUTPUT: 42 (The original object also affected due to shared reference)

1.2 스프레드 연산자 사용(...)

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

shallowCopy.b.c = 90;
console.log(original.b.c); // OUTPUT: 90

1.3 배열 방법(slice, concat)에 대한 얕은 복사의 예를 살펴보겠습니다.

const original = [1, 2, [3, 4]];
const shallowCopy = original.slice();

shallowCopy[2][0] = 10; 
console.log(original[2][0]); // OUTPUT: 10

2. 딥 카피

정의
전체 복사는 객체나 배열의 완전히 독립적인 복제본을 생성합니다. 중첩된 구조를 포함한 모든 수준은 반복적으로 복사됩니다. 복사된 구조를 변경해도 원본에는 영향이 없으며 그 반대도 마찬가지입니다.

특징

• 구조의 모든 레벨을 재귀적으로 복사합니다.
• 중첩된 개체나 배열은 원본과 독립적입니다.
• 얕은 복사본보다 계산량이 더 많습니다.

2.1 JSON.stringify() 및 JSON.parse() 사용

• 객체를 JSON 문자열로 변환한 후 다시 새 객체로 변환합니다.
• 제한 사항: 함수, 날짜, RegExp 또는 순환 참조를 처리하지 않습니다.

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

deepCopy.b.c = 42;
console.log(original.b.c); // OUTPUT: 2 (original remains unaffected)

2.2 StructuredClone() 사용
순환 참조 및 Date와 같은 특수 객체를 지원하는 현대적인 심층 복사 방법입니다.

const original = { a: 1, b: { c: 2 }, date: new Date() };
const deepCopy = structuredClone(original);

deepCopy.b.c = 42;
console.log(original.b.c); // OUTPUT: 2
console.log(original.date === deepCopy.date); // FALSE

2.3 사용자 정의 재귀 함수 사용
복잡한 케이스를 수동으로 처리하기 위한 유연한 솔루션입니다.

function deepCopy(obj) {
  if (obj === null || typeof obj !== "object") return obj; 

  if (Array.isArray(obj)) return obj.map(deepCopy); 

  const copy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

const original = { a: 1, b: { c: 2 } };
const deepCopyObj = deepCopy(original);

deepCopyObj.b.c = 42;
console.log(original.b.c); // OUTPUT: 2

3. 언제 각각을 사용합니까?

얕은 사본

• 중첩된 구조가 없는 평면 개체 또는 배열의 경우
• 성능이 중요하고 중첩된 개체에 대한 공유 참조가 허용되는 경우.

딥 카피

• 복잡하고 깊게 중첩된 개체/배열의 경우
• 복제본과 원본의 진정한 독립이 필요할 때.

4. 요약

얕은 사본

• 간단하고 효율적입니다.
• 평면 구조 또는 공유 참조가 허용되는 경우에 적합합니다.

딥 카피

• 견고하고 완전한 독립성을 보장합니다.
• 깊게 중첩되거나 복잡한 구조에 이상적입니다.

JavaScript에서 객체의 Shallow Copy와 Deep Copy에 대해 자세히 설명합니다. 사용 사례와 성능 요구 사항에 따라 적절한 방법을 선택하세요.

위 내용은 JavaScript의 얕은 복사와 깊은 복사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!