자바스크립트 - 깊은복사, 얕은복사

소개하기 전 처음에 객체 안에 객체를 띤 형태의 obj변수를 만든다.
앞으로 소개할 복사는 이 객체를 통해 예시를 들어보겠습니다.

const obj = {
  apple: 1,
  banana: {
    yellow: "ok"
  },
}

얕은복사

객체를 복사할 때 원래값과 복사된 값이 같은 참조를 가리키고 있는것을 말한다.
객체 안에 객체가 있는경우(depth가 1보다 큰 상황)에는 한개의 객체라도 원본 객체를 참조하고 있다면 이를 얕은복사라고 말한다.

1. 스프레드(전개 연산자) 문법

const newObj = { ...obj }

obj.banana.yellow = "no";

obj === newObj // false
obj.banana.yellow === newObj.banana.yellow // true

객체안에 객체는 같은 참조를 가리킨다는것을 알 수 있다.

2. Object.assign()

const newObj = Object.assing({}, obj};

obj.banana.yellow = "no";

obj === newObj // false
obj.banana.yellow === newObj.banana.yellow // true

위와 마찬가지로 같은 참조를 가리킨다는것을 알 수 있다.

깊은복사

객체나 배열을 복사할 때 원래값과 복사된 값이 다른 참조를 가리키고 있는것을 말한다.
한마디로 원본과의 참조가 완전히 절단된 복사 객체를 의미한다.

1. JSON.stringify() + JSON.parse()

JSON.stringify()는 객체를 json문자열로 변환하는것으로 이 과정에서 원본 객체와의 참조가 모두 끊어진다. 이렇게 문자열로 변환 후 JSON parse()를 이용해 다시 객체를 만들어주게 되면 깊은 복사가 이루어 진다.

const newObj = JSON.parse(JSON.stringifay(obj));

obj.banana.yellow = "no";

obj === newObj // false
obj.banana.yellow === newObj.banana.yellow // false

2. lodash 라이브러리 사용

const deepcopy = require("lodash.clonedeep");


const newObj = deepcopy(obj);

obj.banana.yellow = "no";

obj === newObj // false
obj.banana.yellow === newObj.banana.yellow // false

3. 재귀를 통한 직접 복사

function copyDeep(obj) {
  const result = {};
  
  for(let key in obj) {
    if(typeof obj[key] === 'object') {
      result[key] = copyDeep(obj[key]);
    } else {
      result[key] = obj[key];
    }
  }
  
  return result;
}

const newObj = copyDeep(obj);

obj.banana.yellow = "no";

obj === newObj // false
obj.banana.yellow === newObj.banana.yellow // false