[Js] 얕은 복사 / 깊은 복사

얕은 복사(Shallow Copy)

주소값(참조값)을 복사.
데이터를 공유하고 있기 때문에 값의 변경 등이 모두 반영된다.

const obj = { a:0 }
const objCopy = obj;

obj.b = 5

console.log(objCopy) // { a:0, b:5 }
console.log(obj === objCopy) // true

깊은 복사(Deep Copy)

속성(property)만 복사. 주소는 복사되지 않음.
따라서 복사된 객체의 값을 변경하여도 기존의 값은 변경되지 않으며 반대도 적용.

// 1. spread 연산자를 통한 복사
const obj = { a:0 }
const objCopy = { ...obj }

obj.b = 5
console.log(obj) // { a:0, b:5 }
console.log(objCopy) // { a:0 }
console.log(obj === objCopy) // false

// 2. assign() 메소드를 통한 복사
const obj = { a:0 }
const objCopy = Object.assign({}, obj)

obj.b = 10
console.log(obj) // { a:0, b:10 }
console.log(objCopy) // { a:0 }
console.log(obj === objCopy) // false

• 위 방법의 경우 1차원은 깊은 복사가 진행되지만, 2차원부터는 깊은 복사가 진행되지 않는다
  (변경사항이 영향을 받는다)

const obj = {
  a: 0,
  b: {
    first: 0,
    second: 1,
  },
};
const objCopy = {...obj}

delete obj.b[first];

console.log(objCopy.b) // { second:1 }