Shallow Copy, Deep Copy

=대입(참조 할당)

=을 사용한 객체 복사는 변수(a)를 할당하는 형태의 복사를 말한다.

const a = {name: 'hi'};
const b = a;

변수(a)와 할당해서 만든 변수(b)는 같은 주소를 참조하고있다. (=같은 참조 값을 가지고있다.
heap에 저장된 객체를 참조하기 때문에 a와 b 둘중 무엇이든 데이터를 조작하게 되면 두개 모두(a, b) 동일하게 변경된다.

Shallow Copy(얇은복사)

Shallow copy 개체의 비트 단위 복사본이다. 1depth만 복사를 한다.
새로운 객체에 원본 객체의 프로퍼티의 값을 정확히 복사하는 것이다. 값이 객체라면 해당 객체의 주소를 복사하게되는 것이다.

구현방법

• Object.assign

  let obj = { 
    a: 1,
    b: { 
      c: 2
    }
  }

  let newObj = Object.assign({}, obj);
  obj.b.c = 20;
  console.log(obj); // { a: 1, b: { c: 20 } }
  console.log(newObj); // { a: 1, b: { c: 20 } } --> WRONG
 

객체의 경우 객체의 참조 값을 복사하게 되므로, 복사한 변수에서 값을 변경 해도 원래 변수값까지 변경되는 것을 확인할 수 있다.

---

• Spread Operator

  let obj = {
    a: 1,
    b: 2,
  };
  let objCopy = {...obj};
  console.log(objCopy);
  // Result - { a: 1, b: 2 }

다음과 같이 Object.assign, Spread Operator를 사용하여 사용해서 얕은 복사를 할 수 있다.

Deep Copy(깊은복사)

Deep Copy는 원본 객체를 완전히 복사하게 된다. Shallow Copy 에서 주소를 복사하는 것 또한 주소를 복사하지 않고, 새로운 메모리 공간을 확보해서 생성하기 때문에, 완전히 다른 것을 의미한다

구현방법

• JSON

  const mainObject = {
  a: 1,
  b: 2,
  c: function() {
    return 1;
  }
};
let copyObject = JSON.parse(JSON.stringify(mainObject));
// {a: 1, b: 2}

Stringily 메소드는 function의 경우에 undefined로 처리하므로 주의해서 사용해야한다.

---

• lodash 라이브러리 _.cloneDeep(obj)

  const mainObject = {
  a: 1,
  b: 2,
  c: function() {
    return 1;
  }
};

const _ = require("lodash");

const clone6 = _.cloneDeep(mainObject);

console.log(original.func); // function func()

REF

https://www.daleseo.com/js-objects-clone/
https://www.digitalocean.com/community/tutorials/copying-objects-in-javascript
https://webustry.com/understanding-deep-and-shallow-copy-in-javascript/
https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript