얕은 복사와 깊은 복사

객체를 프로퍼티 값으로 갖는 객체의 경우 얕은 복사는 한 단계까지만 복사하는 것을 말하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말한다.

💡 여기서 복사는 참조값을 새로 생성하여 할당되는 것을 말한다.
💡 얕은 복사와 깊은 복사로 생성된 객체는 원본과는 다른 객체다! 즉, 원본과 복사본은 참조 값이 다른 별개의 객체다!!

● 얕은 복사(shallow copy)

👾#01 - 전개연산자 사용

const obj = { x: { y: 1 } };
const c1 = {...obj}; // 스프레드 문법

console.log(c1 === obj); // false
console.log(c1 == obj); // false
console.log( c1.x === obj.x ); // true
c1.x.y = 10;
console.log(obj.x.y); // 10

💡 객체에 중첩되어 있는 객체의 경우 참조값만 복사한다!! 객체에 중첩되어 있는 객체까지 복사하지 못해 중첩되어있는 객체의 주소가 같음.

👾#02 - Object.assign() 메서드 사용

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copydObj = Object.assign({}, obj);

copydObj.b.c = 3
console.log(obj.b.c); // 3
obj === copydObj // false

👾#03 - 배열에서 얕은 복사, slice()메서드

• 원본 배열 수정 안됨.

const items = ['a', 'b', 'c'];
// 모든 요소를 반환 (= 복사본(shallow copy) 생성)
res = items.slice();
console.log(res);  // [ 'a', 'b', 'c' ]

const todos = [
  { id: 1, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 3, content: 'Javascript', completed: false }
];

// shallow copy
const _todos = todos.slice();
// const _todos = [...todos];
console.log(_todos === todos); // false

// 배열의 요소는 같다. 즉, 얕은 복사되었다.
console.log(_todos[0] === todos[0]); // true

● 깊은 복사(deep copy)

💡 객체에 중첩되어 있는 객체까지 모두 복사해서 원시 값처럼 완전한 복사본을 만든다!!

👾#01 Lodash의 cloneDeep을 사용

const obj = { x: { y: 1 } };
const _ = require('lodash'); // import _ from 'lodash';
const c2 = _.cloneDeep(obj);

console.log(c2 === obj); // false
console.log( c2.x === obj.x ); // false