깊은 복사와 얕은 복사

얕은 복사 (Shallow copy)주소 값을 복사하기 때문에 참조하고 있는 실제 값이 같음
깊은 복사 (Deep copy)실제 값을 독립적인 새로운 메모리 공간에 복사, 참조를 공유하지 않음

참조할당

얕은 복사에 해당합니다.

const human1 = {
	arm: 2,
	leg: 2,
},

//참조 할당 
const human2 = human1; 

human1.arm = 3;

console.log(human1.arm); // 3
// human2의 arm 값을 변경하지 않았음에도 변했다.
console.log(human2.arm); // 3

human2에 human1을 할당할 때, 주소 값이 할당되는 것이므로, 해당 주소의 객체값을 수정하면 동일하게 변경 됩니다.

  *human2의 값을 변경할 때에도 human1의 값이 변경됩니다.

 

Object.assign(target, ...sources), …spread

1차원 객체 까지는 깊은복사가 이루어집니다.
  *2차원 이상의 객체일 때 깊은 복사가 이루어지지 않습니다.

const human1 = {
	arm: 2,
	leg: 2,
};

const targetHuman = {
	eye: 2
};

Object.assign(targetHuman, human1); 
console.log(targetHuman); // {eye: 2, arm: 2, leg: 2, head: 1}
// targetHuman에 값을 추가해도 human1은 변하지 않습니다.
targetHuman.head = 1;
// human1은 head가 추가되지 않습니다.
console.log(human1); // {arm: 2, leg: 2}

JSON.parse(JSON.stringify(object)) / Lodash - clonedeep

2차원 이상의 깊은 복사이며, 두 객체의 참조관계는 완전히 끊기게 됩니다.

const clonedeep = require("lodash.clonedeep");

const human1 = {
	name: {
    first: "J",
    last: "F"
  },
};

// 단순히 JSON을 string으로 변환후 다시 JSON으로 변환하는 방식입니다.
const human2 = JSON.parse(JSON.stringify(human1));
// clonedeep 함수를 사용할 경우
const human3 = clonedeep(human1)

  *Lodash를 사용하는 것이 성능상 빠릅니다.

  *JSON.parse(JSON.stringify(object))는 함수 복사 불가능, Lodash는 가능합니다.

 

 

 

 

 

 

 

 

 

 

[참고자료]

[JavaScript] 깊은복사(Deep Copy)와 얕은복사(Shallow Copy)