얕은 복사와 깊은 복사

얕은 복사와 깊은 복사가 이해가 안되네요.

라는 질문이 들어왔음.
간단하게 두가지 비교를 하고 손쉽게 적용할 수 있는 깊은 복사 방법을 알아보기로 하자.

얕은 복사

• 사본에 속성을 추가하거나 변경하면 복사본에만 영향을 줌.

const original = { 
	name: "girl", 
	age: 18, 
	class: [ 
		"korean",
		"math"
	]
};

// 얕은 복사 방법
const clone = { ... original };

// 사본에 속성 추가
clone.height = 163;

// 속성 확인 (얕은 복사 후 자식 속성에 변경 확인)
console.log(original); // { name: "girl", age: 18, class: [ "korean", "math" ] }
console.log(clone); // { name: "girl", age: 18, class: [ "korean", "math" ], height: 163 }

• 그러나 2단계 이상 중첩된 속성에 속성을 추가하거나 변경하면 사본과 원본 모두에 영향을 줌.

// 깊은 중첩 속성 변경 (2단계 이상)
clone.class.push("english");

// 속성 확인 (깊은 중첩 속성 변경 확인)
console.log(original); // { name: "girl", age: 18, class: [ "korean", "math", "english" ] }
console.log(clone); // { name: "girl", age: 18, class: [ "korean", "math", "english" ], height: 163 }

• 위 현상의 원인은 사본 내부 속성 식별자가 원본 내부 속성 식별자와 같은 메모리 주소 값을 참조하기 때문.
• 같은 메모리 주소 값을 참조하는 것을 이용하여 경로가 긴 속성을 축약하여 사용할 수 있음

const girlClass = original.class;

girlClass.push("science");

console.log(original); // { name: "girl", age: 18, class: [ "korean", "math", "english", "science" ] }
// 원본의 속성을 축약하여 별칭처럼 사용하고 사본 변경 시 원본이 변경되는 것을 이용할 수 있다.

깊은 복사

• 원본과 사본을 수정해도 상호 영향을 주지 않고 독립적으로 별개로 동작함.
• 원본과 사본 식별자의 메모리 주소값이 다름
• lodash를 이용한 방법, JSON.parse() + JSON.stringify()을 이용한 방법들이 있었으나, 현재는 WEB API에서 structuredClone을 이용하는 방법이 제일 간단하다.

// 원본
const original = { 
	name: "girl", 
	age: 18, 
	class: [ 
		"korean",
		"math"
	]
};

JSON.parse() + JSON.stringify()를 이용한 방법

• 주의 : 재귀 데이터 구조 사용시 오류 발생
• Map, Set, Date, RegExp, ArrayBuffer를 포함한 값 사용시 오류 발생

const clone = JSON.parse(JSON.stringify(original)); 

structuredClone을 이용한 방법 (추천)

• 주의 : 객체에 함수가 포함되어 있으면 폐기됨
• Error와 DOM노드는 구조화된 복제가 불가능. 이럴 경우 lodash 사용

const clone = structuredClone(original);

lodash를 이용한 방법

• npm으로 lodash 설치

npm i lodash

import _ from 'lodash';

const clone = _.cloneDeep(original);

결론 : 대부분의 상황에선 별도 설치도 필요없고 호환성이 좋은 structuredClone을 씁시다. (대부분의 브라우저 / node는 17이상)
상세설명 👉 https://developer.mozilla.org/en-US/docs/Web/API/structuredClone