[JavaScript] Deep Copy & Hard Copy

자바스크립트에서는 변수에 두가지 값을 저장할 수 있습니다.
1. Primitive : undefined, bull, boolean, number, string, symbol
2. Reference : object

저장 영역

• primitive type 데이터는 크기가 일정하기 때문에 stack 영역에 저장합니다.
• reference type 데이터는 동적이기 때문에 heap 영역에 저장합니다.

값을 변수에 저장할 때 Javascript 엔진이 primitive인지 reference인지 판단합니다.

Deep Copy & Shallow Copy

원본 객체의 모든 프로퍼티의 값을 복사하는 것이 Deep copy이다.

Deep copy는
1. 원본객체가 갖는 모든 primitive type의 프로퍼티 값을 복사한다.
2. reference type의 프로퍼티 (객체 프로퍼티)는 해당하는 객체 안에 속한 primitive type의 값을 복사한다.
3. 객체 안에 있는 모든 reference type이 갖는 primitive type의 값을 복사한다.

따라서 recursion, JSON.parse(JSON.stringify()) 와 같은 방법을 사용하여 deep copy를 할 수 있다.

Shallow copy는
1. 해당객체가 갖는 모든 primitive type의 프로퍼티 값을 복사한다.
2. reference type의 프로퍼티가 존재할 경우 해당 프로퍼티를 가리키도록한다. (값을 직접 복사하지 않는다.)

Object.assign(target, source) 메소드를 사용한다.

const obj = { a: 1 };
const copy = Object.assign({}, obj};
console.log(copy); // { a: 1 }

target 안의 nested프로퍼티는 source의 nested 프로퍼티를 복사가 아닌 참조를 하게된다.

let source = {a : 1, nested : {b : 2} };
let target = Object.assign({}, source);

console.log(target);
target.nested.b = 3;

console.log(target);
console.log(source);

참고자료

1. https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/
2. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
3. https://junwoo45.github.io/2019-09-23-deep_clone/