Portfolio

얕은 복사와 깊은 복사

기존에 알고 있던 복사의 개념

→ 얕은 복사를 하면 같은 참조를 가리킨다.


const a = {
	one: 1,
	two: 2,
};
let b = a;

b.one = 3;

console.log(a); // { one: 3, two: 2}
console.log(b); // { one: 3, two: 2}

console.log(a === b); // true a와 b는 같은 참조를 가리킨다.

→ 깊은 복사를 하면 값 자체의 복사를 실행하고 다른 참조를 가리킨다.


let a = 1;
let b = a;

b = 2;

console.log(a); // 1
console.log(b); // 2
console.log(a === b); false

책 내용 원본 (모던 자바스크립트 Deep Dive [p.150])

객체를 프로퍼티 값으로 갖는 객체의 경우 얕은 복사는 한 단계까지만 복사하는 것을 말하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말한다.


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

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

const _ = require("lodash");
// 깊은 복사
const c2 = _.cloneDeep(o);
console.log(c2 === o);     // false
console.log(c2.x === o.x); // false

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

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


const v = 1;

// "깊은 복사"라고 부르기도 한다.
const c1 = v;
console.log(c1 === v); // true

const o = { x: 1 };

// "얕은 복사"라고 부르기도 한다.
const c2 = o;
console.log(c2 === o); // true

궁금한 점...


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

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

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

let o = { x: { y: 1 }, z: 1 };
o.z = 100; // X
console.log(o);

let o = { x: { y: 1 }, z: 1 };
o = { ...o, z: 100 }; // O
console.log(o);

객체를 복사하는 과정에서 구조분해 할당을 해서 복사하는 방법과 직접 대입하는 방법에 차이가 있다?

const c1 = { ...o }; 와 const c1 = o; 의 차이?

김민기

얕은 복사와 깊은 복사

책 내용 원본 (모던 자바스크립트 Deep Dive [p.150])