[JavaScript] 얕은 복사와 깊은 복사

 

얕은 복사와 깊은 복사에 대해 알아보기 전에 잠시 데이터 타입을 짚고 넘어가자. 

기본형(primitive) 타입: number, string, boolean, undefined, null 등

참조형(reference) 타입: object, array, function, date, regexp 등

 

 

결론부터 말하자면

얕은 복사: 객체의 참조값(주소)를 복사

깊은 복사: 객체의 값 자체를 복사

 

예시와 함께 자세히 살펴보자. 

얕은 복사 (Shallow Copy)

1. Object.assign()

var obj1 = {
  a: 10,
  b: {
    c: 'abc',
  },
};
var obj2 = Object.assign({}, obj1);
obj2.a = 20;
obj2.b.c = 'def';

console.log(obj1); // { a: 10, b: { c: "def" } }
console.log(obj2); // { a: 20, b: { c: "def" } }

 

2. for ... in

var copyShallo = function (obj) {
  var result = {};
  for (var prop in obj) {
    result[prop] = obj[prop];
  }
  return result;
};

 

깊은 복사 (Deep Copy)

 

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

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

function copyObj(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;
}

const copiedObj = copyObj(obj);

copiedObj.b.c = 3

obj.b.c === copiedObj.b.c //false

 

2. JSON.stringify()

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

const copiedObj = JSON.parse(JSON.stringify(obj));

copiedObj.b.c = 3

obj.b.c === copiedObj.b.c //false