JavaScript의 얕은 복사와 깊은 복사-JS 튜토리얼-php.cn

JavaScript의 얕은 복사와 깊은 복사

Mary-Kate Olsen

풀어 주다： 2024-11-25 05:32:17

원래의

418명이 탐색했습니다.

Shallow Copy vs. Deep Copy in 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

로그인 후 복사