깊은 복사 lodash.cloneDeep, JSON.stringify, structuredClone 비교

[coddingyun]

실험 코드

const lodash = require("lodash");

// 성능을 측정할 큰 데이터 객체
const dataObject = {};

// 데이터를 추가할 키의 개수
const numKeys = 100000;

console.log("객체 key-value 개수가", numKeys, "개 일때");
console.log('------------------------------------')

// 데이터 추가
for (let i = 0; i < numKeys; i++) {
  const key = `key_${i}`;
  dataObject[key] = generateRandomData();
}

// 무작위 데이터 생성 함수
function generateRandomData() {
  const randomLength = Math.floor(Math.random() * 100);
  const characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let result = "";
  for (let i = 0; i < randomLength; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
}

// JSON.stringify를 사용한 깊은 복사 성능 측정
console.time("JSON.stringify");
const copiedDataJSON = JSON.parse(JSON.stringify(dataObject));
console.timeEnd("JSON.stringify");

// structuredClone을 사용한 깊은 복사 성능 측정
console.time("structuredClone");
const copiedDataStructuredClone = structuredClone(dataObject);
console.timeEnd("structuredClone");

// lodash를 사용한 깊은 복사 성능 측정
console.time("lodash.cloneDeep");
const copiedDataLodash = lodash.cloneDeep(dataObject);
console.timeEnd("lodash.cloneDeep");

// 각 복사된 데이터가 원본과 동일한지 확인
console.log('------------------------------------')
console.log('JSON.stringify 동일성:', lodash.isEqual(copiedDataJSON, dataObject));
console.log('structuredClone 동일성:', lodash.isEqual(copiedDataStructuredClone, dataObject));
console.log('lodash 동일성:', lodash.isEqual(copiedDataLodash, dataObject));

chatGPT의 힘을 빌려.. 코드를 짜보았습니다.

결과

객체 key-value 개수가 10 개 일때

JSON.stringify: 0.05ms
structuredClone: 0.562ms
lodash.cloneDeep: 0.218ms

객체 key-value 개수가 100 개 일때

JSON.stringify: 0.103ms
structuredClone: 0.089ms
lodash.cloneDeep: 0.221ms

객체 key-value 개수가 1000 개 일때

JSON.stringify: 0.801ms
structuredClone: 2.539ms
lodash.cloneDeep: 1.192ms

객체 key-value 개수가 10000 개 일때

JSON.stringify: 11.21ms
structuredClone: 3.311ms
lodash.cloneDeep: 3.297ms

객체 key-value 개수가 100000 개 일때

JSON.stringify: 149.61ms
structuredClone: 56.776ms
lodash.cloneDeep: 30.914ms

객체 key-value 개수가 1000000 개 일때

JSON.stringify: 1.907s
structuredClone: 906.006ms
lodash.cloneDeep: 420.001ms

결론

• 객체의 크기가 작을때: JSON.stringify > lodash.cloneDeep > structuredClone
• 객체의 크기가 클때: lodash.cloneDeep > structuredClone > JSON.stringify

따라서,

• 데이터가 작다면, 성능 걱정없이 JSON.stringify를 사용하는 것이 좋습니다.
• 데이터가 크다면 lodash의 cloneDeep이 가장 좋고, 만약 라이브러리를 설치하는 것이 싫다면 structuredClone을 사용하는 것이 좋아보입니다.

[coddingyun]

https://www.measurethat.net/Benchmarks/Show/17971/0/lodash-clonedeep-vs-structuredclone-vs-json-parse

https://velog.io/@seorim6417/JavaScript-%EA%B9%8A%EC%9D%80%EB%B3%B5%EC%82%AC%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%95%A8%EC%88%98-%EC%84%B1%EB%8A%A5-%EC%B8%A1%EC%A0%95%EA%B3%BC-%ED%8A%B9%EC%A7%95-%EB%B9%84%EA%B5%90#-%EA%B0%9D%EC%B2%B4%EB%A1%9C-%EC%9D%B4%EB%A3%A8%EC%96%B4%EC%A7%84-%EB%B0%B0%EC%97%B4