얕은복사 vs 깊은복사

지금까지 내가 알던 복사는 그저 ctrl c + v

하지만 프로그래밍 세계에는 역시 복사에도 종류가 있었다.

🍫 얕은복사 (shallow copy)

• 얕은 복사는 참조(주소)값의 복사를 뜻한다.

const obj = {
  name : taero
}

const copiedObj = obj;

copiedObj.name = rotae;

console.log(obj.name); // rotae
console.log(obj === copiedObj); // true

copiedObj에 원본 obj를 할당한 다음, copiedObj의 name값을 변경했더니
원본 obj의 name도 똑같이 변했다.
이는 copiedObj가 원본 obj와 같은 참조(주소)값을 바라보고 있기 때문이다.
이 경우가 얕은 복사 라고 할 수 있다.

🍫 깊은복사(deep copy)

• 깊은 복사는 값 자체의 복사를 뜻한다.
• 복사된 값은 완전히 '독립적으로' 존재한다.

let a = 1;
let b = a;

b = 2;

console.log(a);  // 1
console.log(b);  // 2
console.log(a === b);  // false

🍫 객체의 깊은복사

얕은 복사 (shallow copy)의 경우처럼 원본 객체의 데이터가 의도치 않게 변경될 수 있으므로 깊은 복사는 중요하다.
객체를 깊은 복사하는 방법에는 여러가지가 있는데 그 중 두 개를 정리해놓으려 한다.

1. Object.assign()

• Object.assign(출처객체,대상객체) method는 하나 이상의 출처 객체에 대상객체를
  복사(덮어쓰기)할 때 사용된다. ( 이 전에 정리해놓았던 object 관련 method )
• 이 method를 활용해 Object(빈객체, 할당할 객체)를 넣어주면 된다.

const obj = { name : 'taero' };
const newObj = Object.assign({},obj);

newObj.name = 'rotae';

console.log(obj) = { name : 'taero' };
console.log(newObj) = { name : 'rotae' };

이렇게 하면 깊은 복사가 된다.
하지만 주의할 점이 있다. 중첩된 객체에는 깊은복사가 이루어지지 않는다는 점이다.

const obj = { 
  name : 'taero'
  hobby : {
    game : 'LOL'
  }
};
const newObj = Object.assign({},obj);

newObj.name = 'rotae';
newObj.hobby.game = 'Battleground'

console.log(obj.name);  // 'rotae'
console.log(obj.hobby.game);  // 'LOL'
console.log(obj.hobby.game === newObj.hobby.game); // false

위에서 보는 것과 같이 obj 내에 있는 하위 객체에는 깊은 복사가 적용이 되지 않았다.
이 것이 Object.assing()의 한계이다.

2. Spread Operator

const obj = { name : 'taero' };
const newObj = {...obj};

newObj.name = 'rotae';

console.log(obj) = { name : 'taero' };
console.log(newObj) = { name : 'rotae' };

이 친구도 object.assign과 마찬가지로 이렇게 1차원의 객체에서는 깊은 복사를 보여준다.
하지만, 2차원 이상의 중첩객체에서는 완벽한 깊은 복사를 하지 못한다.