[JS] 깊은복사(deep copy), 얕은복사(shallow copy)

깊은복사는 원시값을 복사하고, 얕은복사는 객체의 참조값을 복사한다.

원시값

기본자료형(단순한 데이터)를 의미한다. Number, String, Boolean, Null, Undefined 등이 해당한다. 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장된다. 할당된 변수를 조작하려고 하면 저장된 실제 값이 조작된다.

 

참조값

여러 자료형으로 구성되는 메모리에 저장된 객체 이다. Object, Symbol 등이 해당한다. 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고, 변수에 저장된 메모리 공간의 참조(위치 값)을 저장하게 된다. 그래서 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체의 참조를 조작하는 것이다.

 

---

깊은복사

let num1 = 1;
let num2 = num1;

console.log(num1);
console.log(num2);

위 코드의 출력으로는 1, 1이나온다. 그 이유는 깊은복사(deep copy)가 일어났기 때문이다. 위와같이 원시값(실제 값)은 deep copy를 하게 된다. num2에는 1이라는 값을 넣고, num2는 num1과는 상관이 없는걸로 해석이 된다.

 

얕은복사 관점

let num1 = 1;
let num2 = num1;

num2 = 2;

console.log(num1);
console.log(num2);

관점을 바꿔서 생각해보면 이렇게 생각 할수도 있다. num2에 num1 자체를 넣는다.
즉, 이말은 num1과 num2를 동일한 걸로 보겠다는 해석이다. 이러한 관점으로 해석을 해보겠다.
그러면 num1과 num2는 같은 것이기 때문에 num2 = 2를 넣으면
num1도 2가 되는게 합리적일 것이다. => 이렇게 생각하는 관점이 얕은복사(shallow copy)이다.

 

 

---

 

귀찮게 하나로 통일하지 왜 원시값은 deep copy고, 참조값(객체)은  shallow copy??

가장 중요한 이유 중 하나는 객체에서 깊은복사를 하면 굉장히 비효율적이다.

const person = {
  name: 'chiho',
  addr: 'abcd@gmail.com'
};

let personCopy = person;

마지막 줄인 personCopy에 person 값을 대입하는데 걸리는 시간은 2초가 걸린다고 가정 합시다. name, addr 값이 두개니까 (하나에 1초라고 가정)  하지만  객체에 프로퍼티가 수백, 수천개가 있다고 가정합시다. 그렇게되면 성능에 영향이 많이 미칩니다. 왜? 대입이 일어날때 수백 수천초가 걸리게 된다.

=> deep copy가 일어나면 객체 프로퍼티 수에 비례해서 동작속도가 느려지게된다.(추가로 메모리도 2배로먹음)

그런데 얕은복사를 하게 되면  person이라는 것 하나만 알려주면 되기 때문에 1초만 있어도 될것이다.

그래서 객체는 얕은복사로 구현한다.

const person = {
  name: 'chiho',
  addr: 'abcd@gmail.com'
};

let personCopy = person;

personCopy.name = 'seungho';

console.log(person, personCopy);

 

console.log의 결과값은 name값이 둘다 seungho로바뀌어서 나온다. 왜? 객체는 얕은복사이기 때문이다.

 

 

하지만 코딩을 하다보면 원래값을 그대로 두고 복사한값을 수정해서 사용해야 하는 경우가 종종 있다. 

const person = {
  name: 'chiho',
  addr: 'abcd@gmail.com'
};

let personCopy = {...person};

personCopy.name = 'seungho';

console.log(person, personCopy);

그럴땐, 위와 같이 Spread 연산자 {...person}을 사용하게 된다면 깊은복사 효과가 일어나게 된다.