[JS] 얕은 복사와 깊은 복사

변수 할당에서

얕은 복사(Shallow Copy) 는 '주소 값' 을 복사한다는 말하며,
깊은 복사(Deep Copy) 는 '실제 값' 을 새로운 메모리 공간에 복사하는 것을 말합니다.

//객체를 할당한 변수를 다른 변수에 할당 => '얕은 복사'라고 부르기도 한다.
const o = { x: 1 };

const c2 = o;
console.log(c2 === o); // true

// 원시값을 할당한 변수(v)를 다른 변수(c1)에 할당 => '깊은 복사'라고 부르기도 한다.
const v = 1;

const c1 = v;
console.log(cl === v); // true

객체를 프로퍼티 값으로 갖는 객체에서

얕은 복사 는 한 단계까지만 복사하는 것을 말하고,
깊은 복사 는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말합니다.

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

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

// lodash의 cloneDeep을 사용한 깊은 복사
const _ = require('lodash');
// 깊은 복사
const c2 = _.cloneDeep(o);
console.log(c2 === o); // false
console.log(c2.x === o.x); // false

얕은 복사 와 깊은 복사 로 생성된 객체는 원본과는 다른 객체입니다. 즉, 원본과 복사본은 참조 값이 다른 별개의 객체입니다.
하지만 얕은 복사 는 객체에 중첩되어 있는 객체의 경우 참조 값을 복사하고 깊은 복사 는 객체에 중첩되어 있는 객체까지 모두 복사해서 원시 값처럼 완전한 복사본을 만든다는 차이가 있습니다.

참고 자료

• https://choar816.tistory.com/154
• ⌜모던 자바스크립트 Deep Dive⌟