1차원 객체를 spread operator(스프레드 연산자)로 복사하면 얕은 복사 일까 깊은 복사 일까?

 

 

 

✍깊은복사와 얕은 복사 관련 게시글

https://joyhong-91.tistory.com/41

[javascript] 변수 참조타입 메모리 접근 방식, 참조타입 복사가 필요한 이유 (shallow copy, deep copy)

 

 

 

 

 

 

✔1차원 배열, 1차원 객체는 복사를 하면 깊은 복사(deep copy)가 됩니다

---

 

복사한 객체를 수정하면 기존 객체에 영향 없습니다.

const arr1Dth = [1,2,3,4];
const obj1Dth = {key: 'key1', value: 'value1'};

 const copyArr1Dth = [...arr1Dth];
 copyArr1Dth[1] = 7;
 
 console.log('origin', arr1Dth); //origin [ 1, 2, 3, 4 ]
 console.log('copy', copyArr1Dth); //copy [ 1, 7, 3, 4 ]
 
 
 const copyObj1Dth = {...obj1Dth};
 copyObj1Dth.key = 'key7';
 
 console.log('origin', obj1Dth); //origin { key: 'key1', value: 'value1' }
 console.log('copy', copyObj1Dth); //copy { key: 'key7', value: 'value1' }

 

 

✔2차원 배열, 2차원 객체는 복사를 하면 얕은 복사(shallow copy) 가 됩니다

---

복사한 객체를 수정하면 기존 객체에도 영향을 끼칩니다.

const arr2Dth = [[1,2], [3,4]];
const obj2Dth = {key: {mainKey: 'mainKey1', subKey: 'subKey1'}};

const copyArr2Dth = [...arr2Dth];
copyArr2Dth[1][0] = 7;
 
console.log('origin', arr2Dth); // origin [ [ 1, 2 ], [ 7, 4 ] ]
console.log('copy', copyArr2Dth); //  copy [ [ 1, 2 ], [ 7, 4 ] ]

const copyObj2Dth = {...obj2Dth};
copyObj2Dth.key.mainKey = 'mainKey7';
 
console.log('origin', obj2Dth); // origin { key: { mainKey: 'mainKey7', subKey: 'subKey1' } }
console.log('copy', copyObj2Dth); // copy { key: { mainKey: 'mainKey7', subKey: 'subKey1' } }

 

 

✔2차원 배열, 2차원 객체 깊은 복사(deep copy ) 하는 방법

---

1.  JSON.parse(JSON.stringify(복사할 object))
   1. JSON.stringify()로 객체를 json 문자열로 변환하는데 이 과정에서 원본 객체의 참조가 모두 끊어집니다.
   2. 장점: 구현하기 간단하고 쉽습니다.
   3. 단점
      1. 다른 방법에 비해 느립니다..
      2. 객체가 함수일 경우 undefined로 처리합니다.
      3. 모든 데이터가 복사되지 않거나 타입이 변경될 수도 있는 문제가 있습니다. 
2. Lodash 라이브러리 _.clonedeep 사용하기
3. 반복문 & 재귀함수로 구현