자바스크립트 Shallow Copy vs Deep Copy

얕은 복사(Shallow Copy)

얕은 복사는 한 depth만 복사합니다. 참조값을 복사한다고도 볼 수 있습니다. 따라서 데이터가 새로 생성되는 것이 아니라 하나의 주솟갓을 두개의 변수가 가르키는 형태가 됩니다.

 

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

console.log(obj === copyObj) // true

 

깊은 복사(Deep Copy)

깊은 복사는 객체 내부의 중첩된 객체까지 전부 복사합니다. 완벽한 Deep copy를 하고싶다면, 재귀적으로 깊은 복사를 수행하거나 JSON.parse(JSON.stringify(obj) 같은 방법을 쓰면 됩니다.

JSON.parse() + JSON.stringify()

const obj = { a: 1, b: 2};
const copyObj = JSON.parse(JSON.stringify(obj));

console.log(obj === copyObj) // false

재귀적 복사

const copyObject = (obj) => {
  let copy = {};
  
  for (let key in obj) {
    if (typeof obj[key] === "object") {
      copy[key] = copyObject(obj[key]);
    } else {
      copy[key] = obj[key];
    }
  }

  return copy;
}

const obj = { a: 1, b: { bb: 2 } };
const copyObj = copyObject(obj);

copyObj.b.bb = 3;

console.log(obj === copyObj) // false
console.log(obj.b === copyObj.b) // false
console.log(obj.b.bb === copyObj.b.bb) // false

 

그러나 객체의 경우 Object.assign(), 스프레드 연산자를 통해 객체를 복사할 수 있습니다. 이 경우는 완전한 깊은 복사라고 할 수 없습니다.

Object.assign()

const obj = { a: 1, b: { bb: 2 } };
const copyObj = Object.assign({}, obj);

console.log(obj === copyObj) // false
console.log(obj.b === copyObj.b) // true

 

스프레드 연산자

const obj = { a: 1, b: { bb: 2 } };
const copyObj = {...obj};

console.log(obj === copyObj) // false
console.log(obj.b === copyObj.b) // true

 

Object.assign, 스프레드 연산자는 새로운 객체를 만들고, 그 안에 obj의 내용을 복사해서 넣었다고 할 수 있습니다. 따라서 copyObj와 obj는 서로 다른 객체를 가리키지만 그 내부는 obj와 copyObj가 똑같습니다.

 

그림으로 정리하면 다음과 같습니다 !