우아하게 객체 복제하기

[airman5573]

structuredClone 두둥등장

크롬 98버전 이상에서 structuredClone()함수를 지원한다!

현재 크롬버전이 101임을 감안하면 아직 production에서 쓰기에는 불안전 하지만, 일단 나왔다는것 자체만으로도 감사하다 :D

앞으로 JSON.stringify후 다시 parse를 하거나 직접 clone함수를 구현하는 일은 점점 줄어들것으로 보인다.

아래는 해당 함수를 테스트해본 결과이다.

const data = {
  _arr: [],
  _obj: {
    __num: 12,
    __str: '12',
    __arr: [1, 2, 3, 4],
    __obj: {
      ___num: 12,
      ___str: '12',
      ___arr: [
        1,
        2,
        3,
        4
      ],
    },
  },
  _set: new Set([1, 2]),
  _map: new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three'],
  ]),
};

const copy = structuredClone(data);

// depth - 1 [array]
data._arr.push(10);
console.log('depth - 1 [array]', data._arr.length === copy._arr.length); // false

// depth - 1 [obj]
data._obj['name'] = 'myName';
console.log('depth - 1 [obj]', copy._obj['name'] === 'myName'); // false

// depth - 1 [set]
data._set.add(3);
console.log('depth - 1 [set]', data._set.size === copy._set.size); // false

// depth - 1 [map]
data._map.set(4, 'four');
console.log('depth - 1 [map]', data._map.size === copy._map.size); // false

// depth - 2 [num]
data._obj.__num = 100;
console.log('depth - 2 [num]', data._obj.__num === copy._obj.__num); // false

// depth - 2 [string]
data._obj.__str = '100';
console.log('depth - 2 [string]', data._obj.__str === copy._obj.__str); // false

// depth - 2 [array]
data._obj.__arr.push(5);
console.log('depth - 2 [array]', data._obj.__arr.length === copy._obj.__arr.length); // false

// depth - 3 [num]
data._obj.__obj.___num = 100;
console.log('depth - 3 [num]', data._obj.__obj.___num === copy._obj.__obj.___num); // false

// depth - 3 [string]
data._obj.__obj.___str = '100';
console.log('depth - 3 [string]', data._obj.__obj.___str === copy._obj.__obj.___str); // false

// depth - 3 [array]
data._obj.__obj.___arr.push(100);
console.log('depth - 3 [array]', data._obj.__obj.___arr.length === copy._obj.__obj.___arr.length); // false

• 공식문서 : https://developer.mozilla.org/en-US/docs/Web/API/structuredClone
• 브라우저 지원 : https://developer.mozilla.org/en-US/docs/Web/API/structuredClone#browser_compatibility

함수는 안된다

const person = {
  name: 'woo',
  say: () => { console.log('you can do!') },
};

const copyPerson = structuredClone(person);

copyPerson.say();
// Uncaught DOMException: Failed to execute 'structuredClone' on 'Window': () => { console.log('you can do!') } could not be cloned

함수는 에러가 뜬다. 왜 DOMException인지는 모르겠지만,, (공식문서 링크)
아무튼 주의해서 사용해야 한다!