JavaScript 얕은 복사와 깊은 복사: 예제 및 모범 사례

JavaScript에서 객체 및 배열로 작업할 때 데이터 구조의 복사본을 만드는 것은 일반적인 작업입니다. 그러나 개발자는 얕은 복사본과 깊은 복사본 중에서 선택할 때 어려움을 겪는 경우가 많습니다. 차이점을 잘못 이해하면 코드에서 의도하지 않은 부작용이 발생할 수 있습니다. 이러한 개념과 차이점, 각 개념을 언제 사용하는지 자세히 알아보겠습니다.

? eBook 다운로드 - JavaScript: ES2015에서 ES2023으로

얕은 사본이란 무엇인가요?

얕은 복사본은 원본 개체의 최상위 속성 복사본을 사용하여 새 개체를 만듭니다. 기본 요소(예: 숫자, 문자열, 부울)인 속성의 경우 값 자체가 복사됩니다. 그러나 객체인 속성(예: 배열 또는 중첩 객체)의 경우 실제 데이터가 아닌 참조만 복사됩니다.

즉, 새 개체에는 자체 최상위 속성 복사본이 있지만 중첩된 개체나 배열은 원본과 복사본 간에 공유 상태로 유지됩니다.

얕은 사본의 예

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

얕은 복사본을 만드는 방법

1. 확산 연산자 사용(...):

   const shallowCopy = { ...originalObject };

1. 객체.할당() 사용:

   const shallowCopy = Object.assign({}, originalObject);

이러한 방법은 빠르고 쉽지만 깊게 중첩된 객체에는 적합하지 않습니다.

딥카피란 무엇인가요?

전체 복사본은 원본 개체의 모든 속성과 하위 속성을 복제합니다. 이렇게 하면 복사본이 원본과 완전히 독립적이며 복사본에 대한 변경 사항이 원본 개체에 영향을 주지 않습니다.

중첩된 개체나 배열과 같은 복잡한 데이터 구조를 처리할 때, 특히 데이터 무결성이 중요한 시나리오에서는 전체 복사가 필수적입니다.

딥카피 예시

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

딥 카피를 만드는 방법

1. JSON.stringify() 및 JSON.parse() 사용:
   • 객체를 JSON 문자열로 변환한 후 다시 새로운 객체로 구문 분석합니다.
   • 제한사항:
     • 순환 참조를 처리할 수 없습니다.
     • 함수, 정의되지 않음 또는 기호와 같은 속성을 무시합니다.

   const shallowCopy = { ...originalObject };

1. 라이브러리 사용:
   • Lodash와 같은 라이브러리는 강력한 심층 복제 방법을 제공합니다.

   const shallowCopy = Object.assign({}, originalObject);

1. 사용자 정의 재귀 함수:
   • 완전한 제어를 위해 중첩된 개체를 복제하는 재귀 함수를 작성할 수 있습니다.

얕은 복사와 깊은 복사 비교

얕은 복사를 사용해야 하는 경우

• 플랫 객체: 중첩된 속성이 없는 단순한 객체를 다루는 경우.
• 성능: 속도가 중요하고 깊이 중첩된 데이터를 처리할 필요가 없는 경우.
• 임시 변경: 최상위 속성을 수정하려고 하지만 중첩된 데이터를 공유하려는 경우

사용 사례

빠른 조정을 위해 사용자 설정 개체 복사:

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

딥 카피를 사용해야 하는 경우

• 복잡한 구조: 여러 수준의 중첩이 있는 개체의 경우
• 부작용 방지: 복사본의 변경 사항이 원본에 영향을 미치지 않도록 해야 하는 경우.
• 상태 관리: 불변성이 중요한 React 또는 Redux와 같은 프레임워크에서.

사용 사례

게임 또는 애플리케이션 상태 복제:

   const shallowCopy = { ...originalObject };

일반적인 실수와 함정

1. 얕은 사본이 항상 충분하다고 가정:

   • 개발자는 중첩된 개체에 대해 실수로 얕은 복사 방법을 사용하여 원본 데이터가 의도치 않게 변경되는 경우가 많습니다.

2. JSON 메소드 남용:

   • JSON.stringify/JSON.parse는 간단하지만 모든 개체(예: 메서드 또는 순환 참조가 포함된 개체)에서 작동하지는 않습니다.

3. 성과 무시:

   • 전체 복사 방법은 특히 큰 개체의 경우 속도가 느려질 수 있으므로 신중하게 사용하세요.

결론

버그 없는 JavaScript 코드를 작성하려면 얕은 복사와 깊은 복사의 차이점을 이해하는 것이 필수적입니다. 얕은 복사본은 평면 구조에 효율적이고 깊은 복사본은 복잡하고 중첩된 개체에 필수적입니다. 데이터 구조와 애플리케이션 요구 사항에 따라 적절한 방법을 선택하고 각 접근 방식의 한계를 파악하여 잠재적인 위험을 피하세요.

? eBook 다운로드 - JavaScript: ES2015에서 ES2023으로

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