[structuredClone] Js 깊은 복사 쉽게 하기(Deep Copy)

얕은 복사 (Shallow Copy)

 

• 기본 데이터 타입의 경우 그 값이 그대로 복사한다.
• 객체와 같은 참조 타입의 경우 메모리 주소만 복사한다. (원본데이터와 복사 데이터가 서로에게 영향을 미친다)

 

ex) 얕은 복사 예시

const obj = { a: 1, b: { c: 2 } };
const shallowCopy1 = { ...obj };
const shallowCopy2 = Object.assign({}, obj);

console.log(shallowCopy1.b.c);  // 2
shallowCopy1.b.c = 3;
console.log(obj.b.c);  // 3 (원본 객체도 영향을 받음)
shallowCopy2.b.c = 4;
console.log(obj.b.c);  // 4 (원본 객체도 영향을 받음)

 

 

 깊은 복사 (Deep Copy)

• 기본 데이터 타입뿐만 아니라, 객체와 같은 참조 타입의 경우에도 독립된 복사본을 만든다.

 

1. JSON.parse(JSON.stringify(obj))

단점

• JSON으로 변환 가능한 데이터 타입만 처리할 수 있다. (undefined, Symbol 타입은 복사되지 않음)
• 객체의 구조가 크고 복잡할 경우 코드가 길어지고 가독성이 떨어질 수 있다.

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

deepCopy1.b.c = 3;

console.log(obj1.b.c);  // 2 - 원본 객체는 영향받지 않음
console.log(deepCopy1.b.c);  // 3

const obj2 = {
  number: 1,
  undefinedValue: undefined,
  symbolValue: Symbol("unique")
};

const deepCopy2 = JSON.parse(JSON.stringify(obj2));

console.log(deepCopy2);   // {number: 1} - JSON으로 변환 가능한 데이터만 복사

 

2. lodash - cloneDeep(obj)

단점

• 라이브러리 설치 및 라이브러리에 대한 의존성 생김

import _ from 'lodash';
const obj = { a: 1, b: { c: 2 } };
const deepCopy = _.cloneDeep(obj);

deepCopyWithLodash.b.c = 3;
console.log(obj.b.c);  // 2
console.log(deepCopy.b.c);  // 3

 

3. structuredClone(obj)

• 다른 깊은 복사에 비해 빠르고 효율적이다.
• https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

structuredClone() global function - Web APIs | MDN

 

const obj = {
  number: 1,
  undefinedValue: undefined,
};

const deepCopy = structuredClone(obj);
deepCopy.number = 2;

console.log(obj);       // { number: 1, undefinedValue: undefined }
console.log(deepCopy);          // { number: 2 ,undefinedValue: undefined}

 

 

깊은 복사 성능 비교

결과 )

JSON.parse(JSON.stringify)	0.040 ms	0.051 ms	0.156 ms	1.099 ms	110.561 ms
cloneDeep	0.452 ms	0.808 ms	3.387 ms	8.761 ms	174.174 ms
structuredClone	0.563 ms	0.571 ms	0.751 ms	3.051 ms	169.150 ms

 

결론 (개인적인 생각)

• JSON.parse
  • 성능이 가장 좋다.
  • Json으로 파싱 가능한것만 복사가 가능하다.
  • 코드가 길어져서 가독성이 떨어질수 있다.
• cloneDeep
  
  • 외부 라이브러리에 의존하여 추가적인 설치가 필요하다.
  • 성능이 안좋다.
  • 코드가 간결하여 가독성이 좋다.
• structuredClone
  • 추가적인 설치 없이 바로 사용 가능하다.
  • 다른 서드파티 라이브러리에 비해 성능이 비교적 좋다.
  • 코드가 간결하여 가독성이 좋다.