[Javascript] 얕은복사 vs 깊은복사

function test1() {
  const obj1 = { a: true, b: true };
  const obj2 = obj1;

  obj2.c = true;

  console.log(obj1); // same with obj2
}

위 코드는 복사가 되었을까?

아니다. 저렇게 하면 obj1와 obj2가 같은 메모리 주소를 가지고 있어서,

obj2를 수정했는데 obj1를 출력해도 obj2에서 변화한 값이 반영되게 된다.

 

 

- 얕은복사

function test2() {
  const obj1 = { a: true, b: true };
  const obj2 = { ...obj1 }; // shallow copy
  const obj3 = Object.assign({}, obj1); // shallow copy

  /*
    spread is faster than Object.assign
  */

  obj2.c = true;
  obj3.d = true;

  console.log(obj1); // { a: true, b: true }
}

 

자바스크립트에서 얕은복사방법으로는 spread, 객체면 Object.assign, 배열이면 .slice()를 사용하여 가능하다.

(근데, 일반적으로 spread가 좀더 빠르다고 한다.)

(리액트에서도 spread방식을 쓴다고 한다.)

 

얕은 복사로 obj2, obj3가 obj1와 다른 메모리주소를 가지게 되나,

obj1 내부에 또다른 객체까지는 복사하지 못한다.

 

- 깊은 복사

function test3() {
  const objA = { a: { value: true }, b: { value: true } };
  const objA2 = { ...objA };
  const objB = { a: { value: true }, b: { value: true } };
  const objB2 = JSON.parse(JSON.stringify(objB)); // deep copy

  objA2.a.value = false;
  objB2.a.value = false;

  console.log(objA.a.value); // false
  console.log(objB.a.value); // true
}

위 코드에서는 objA2는 얕은복사, objB2는 깊은 복사를 한 것이다.

각자 내부의 객체를 수정하고 objA, objB를 출력해보면

 

얕은복사를 한 객체는 수정된것이 반영되어있고, 깊은복사를 한 개체는 반영이 되지 않은것을 알 수 있다.

(JSON파싱은 Array에서도 가능)

 

그럼 복사할때 무조건 깊은 복사를 쓰면좋은것이 아닌가?

깊은 복사는 해당 객체가 string, number, boolean, objects(일반적인 객체), array 만을 가지고 있을 때 사용하는 것이 좋다.

 

아래코드를 보자

function test4() {
  const obj = { date: new Date("2019-06-01") };
  const copy = JSON.parse(JSON.stringify(obj));

  console.log(obj.date instanceof Date); // true
  console.log(copy.date instanceof Date); // false, `date` is a string
}

 

JSON파싱 방법을 이용하여 Data 객체의 값을 깊은 복사했는데, string값으로 타입이 바뀐것을 알 수 있다.

 

타입이 바뀐다는 것을 주의해서 깊은 복사를 사용하도록 하자.