[Javascript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

오늘은 자바스크립트의 얕은 복사와 깊은 복사에 대해 알아보고 구현하는 방법에 대해 알아보려합니다.

얕은 복사(Shallow Copy)

얕은 복사는 기존 객체의 주소를 복사하여 변수로 사용하는 방법입니다. 얕은 복사를 하게 되면 참조가 가능하기 때문에 조회하는 값은 같지만, 파라미터로 받아서 데이터의 변조가 일어나는 경우 기존 주소에 담긴 값도 변하는 특성을 가집니다. 아래의 소스에서 확인해보겠습니다. 

let obj = {
   "A": "a", "B": "b"
};

let copyObj = obj;
copyObj.A = "C";

console.log(obj.A); // C

 

---

깊은 복사(Deep Copy)

깊은 복사는 얕은 복사와는 다르게 새로운 객체가 생성되어 이전의 데이터만 복사하고 주소는 다르게 사용하는 방법입니다. 아래는 깊은 복사를 하는 함수입니다. 

function deepCopy(obj) {
  const result = {};

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

  return result;
}

 

이렇게 되는 경우 deepCopy(obj) 메소드를 통하여 복사를 하더라도 obj의 값이 바뀌지 않습니다.

let deepObj = deepCopy(obj);
deepObj.A = "C";

obj.A = "a";

 

lodash 라이브러리 사용해서 깊은 복사 하기

npm 을 사용하면 아래처럼 설치 후 사용이 가능합니다. 

$ npm i lodash

// JS
import _ from 'lodash';

// TS
import * as _ from 'lodash';

_.cloneDeep(obj);