JavaScript 얕은 복사, 깊은 복사

얕은 복사 (Shallow Copy)

Pass By Value

let a = 1;
let b = 2;

b = a;
b = 3;

// result
// a: 1
// b: 3

위의 원시 타입과 반대로 참조 타입(객체) 의 경우, 값이 복사가 되는 것이 아니라 참조하는 주소가 복사되어 다른 참조 변수라도 서로 같은 곳을 가리키고 결국 둘중 하나의 참조 변수를 통해 값을 변경하게되면 서로 같은 주소를 공유하므로 변경되는 값은 같아지게 된다.

Pass By Value(값에 의한 전달)
복사된 데이터를 전달하여 구성함으로써, 값을 수정하여도 원본의 데이터에는 영향을 주지 않도록 하는 방식이다.

Pass By Reference(참조에 의한 전달)
주소 값을 전달하여 실제 값에 대한 Alias 를 구성함으로써, 값을 수정하면 원본의 데이터가 수정되도록 하는 방식이다.

Object.assgin()

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

const copiedObj = Object.assign({}, obj);

ES6 Spread Operator

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

const copiedObj = { ...obj };

Object.assign 과 ES6 Spread Operator 모두 객체의 프로퍼티 객체까지 완전한 복사는 이루어지지 않으므로 깊은 복사를 이용해야 한다. (객체에 프로퍼티 객체가 존재하는 경우 해당 프로퍼티 객체는 참조 형태가 됨)

깊은 복사 (Deep Copy)

JSON 객체의 메소드 활용

const copyObj = (obj) => JSON.parse(JSON.stringify(obj));

const originalObj = {
   a: 1,
   b: 2,
   c: {
     d: 3,
     e: 5
   }
};

const copied = copyObj(originalObj);

다른 방법에 비해 성능적으로 느리며 JSON.stringify 메소드가 function 을 undefined 로 처리한다.

Lodash

import clonedeep from 'lodash/clonedeep'; // or require

const originalObj = {
   a: 1,
   b: 2,
   c: {
     d: 3,
     e: 5
   }
};

const copied = clonedeep(originalObj);

Reference 및 이외에 자세한 설명
https://velog.io/@th0566/Javascript-얕은-복사-깊은-복사
https://junwoo45.github.io/2019-09-23-deep_clone/
https://wonit.tistory.com/253