728x90
const o = { x: { y: 1 } };

// shallow copy

const c1 = { ...o };
console.log(c1 === o); // false
console.log(c1.x === o.x); // true

// lodash의 cloneDeep을 사용한 깊은 복사
// npm install lodash

const lodash = require("lodash");
// deep copy
const c2 = lodash.cloneDeep(o);
console.log(c2 === o); // false
console.log(c2.x === o.x); //false

 

얕은 복사와 깊은 복사로 생성된 객체는 원본과는 다른객체다. 즉, 원본과 복사본은 참조값이 다른 별개의 객체다.

하지만 얕은 복사는 객체에 중첨되어 있는 객체의 경우 참조 값을 복사하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사해서 원시 값처럼 완전한 복사본을 만든다는 차이가 있다.

참고로 다음과 같이 원시값을 할당한 변수는 다른 변수에 할당하는 것을 깊을 복사, 객체를 할당한 변수를 다른 변수에 할당하는 것을 얕은복사라고 부르는 경우도 있다.

 

 

728x90

'Javascript' 카테고리의 다른 글

HTML Canvas crop 기능 구현 시 Safari 에서의 문제점  (2) 2021.12.30