얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

얕은 복사(Shallow Copy)란

얕은 복사란 객체를 복사할 때 원래값과 복사된 값이 같은 참조를 가리키고있는 것을 말합니다. 객체안에 객체가 있을 경우 한개의 객체라도 원본 객체를 참조하고 있다면 이를 얕은 복사라고 합니다.

 

얕은 복사를 하는 방법

1. Object.assign()

Object.assign은 첫번째 요소로 들어온 객체에 다음인자로 들어온 객체를 복사해줍니다.

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

const shallowCopyObj = originalObj.assign({}, obj);

shallowCopyObj.b.c = 3

originalObj === shallowCopyObj // false
originalObj.b.c === shallowCopyObj.b.c // true

2. 전개연산자

ECMAScript6(2015)에서 새로 추가된 문법입니다. 

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

const shllowcopyObj2 = {...obj}

shllowcopyObj2.b.c = 3

originalObj === shllowcopyObj2 // false
originalObj.b.c === shllowcopyObj2.b.c // true

 

깊은 복사(Deep Copy)란

깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말합니다.

 

깊은 복사를 하는 방법

1. 재귀 함수를 이용한 복사

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

function deepCopyObj(originalObj) {
  const result = {};

  for (let key in originalObj) {
    if (typeof originalObj[key] === 'object') {
      result[key] = deepCopyObj(originalObj[key]);
    } else {
      result[key] = originalObj[key];
    }
  }

  return result;
}

const deepCopiedObj = deepCopyObj(originalObj);

deepCopiedObj.b.c = 3

originalObj.b.c === deepCopiedObj.b.c //false

 

2. JSON.stringify()

JSON.stringify()는 객체를 json 문자열로 변환하는데 이과정에서 원본 객체와의 참조가 모두 끊어집니다. 객체를 json 문자열로 변환후 JSON.parse()를 이용해 다시 자바스크립트 객체로 만들어주면 깊은 복사가 됩니다.

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

const deepCopiedObj = JSON.parse(JSON.stringify(originalObj));

deepCopiedObj.b.c = 3

originalObj.b.c === deepCopiedObj.b.c //false