[ Javascript ] 얕은 복사 vs 깊은 복사

기본형 데이터와 참조형 데이터

자바스크립트에서 값은 원시값과 참조값으로 나뉩니다.

원시값 ( Primitive Value )

객체가 아닌 데이터들 ( 기본 자료형 )을 의미하며, 변수에 메모리 공간에 실제 데이터 값이 저장됩니다. 할당된 변수를 조작하려하면 실제 값이 조작됩니다.

Number
String
Boolean
Null
Undefinded
Symbol

기본적으로 불변성이 유지됩니다.

참조값 ( Reference Value )

객체를 의미하며 변수에 할당될 때, 값이 직접 해당 변수에 저장되지 않고 변수에 대한 데이터 참조만 저장됩니다.

얕은 복사 vs 깊은 복사

얕은 복사 vs 깊은 복사

얕은 복사 ( Shallow Copy ) : 객체의 참조값 ( 주소 ) 을 복사
깊은 복사 ( Deep Copy ) : 객체의 실제 값을 복사

 

얕은 복사 ( Shallow Copy )

얕은 복사는 객체의 참조를 복사합니다. 얕은 복사로 객체를 복사하면 원본 객체와 복사된 객체가 같은 객체를 참조하게 됩니다. 따라서 얕은 복사로 객체를 복사한 후 객체의 프로퍼티를 변경하면 원본 객체의 프로퍼티도 변경됩니다.

const obj = { a: 1 };
const copy = obj; // 얕은 복사
console.log(copy === obj); // true
copy.a = 2;
console.log(obj); // { a: 2 }

obj 를 복사한 copy 의 a 값이 변경되니까, 실제 obj 값도 변경 되는것을 볼 수 있습니다.

 

깊은 복사 ( Deep Copy )

깊은 복사 ( Deep Copy ) 는 객체의 참조가 아닌 객체의 값을 복사합니다. 깊은 복사로 객체를 복사하면 원본 객체와 복사된 객체가 다른 객체를 참조하게 됩니다. 따라서 깊은 복사로 객체를 복사한 후 객체의 프로퍼티를 변경하면 원본 객체의 프로퍼티는 변경되지 않습니다.

const obj = { a: 1 };
const copy = { ...obj }; // 깊은 복사
console.log(copy === obj); // false
copy.a = 2;
console.log(obj); // { a: 1 }

obj 를 copy 로 복사 한 후 copy.a 를 변경하면 obj 는 다른 프로퍼티를 참조하기 때문에 값이 변경되지 않습니다.

깊은 복사 방법

JSON.parse(JSON.stringify)

    const obj = { a: 1 };
    const copy = JSON.parse(JSON.stringify(obj)); // 깊은 복사
    console.log(copy === obj); // false
    copy.a = 2;
    console.log(obj); // { a: 1 }

 

JSON.stringify() 메서드를 사용하면 객체를 JSON 문자열로 변환할 수 있습니다. 이 때 객체의 프로퍼티가 문자열로 변환되면서 객체의 참조가 사라집니다. 따라서 JSON 문자열로 변환된 객체는 깊은 복사가 이루어진 것입니다.

Lodash 라이브러리 사용

    const obj = { a: 1 };
    const copy = _.cloneDeep(obj); // 깊은 복사
    console.log(copy === obj); // false
    copy.a = 2;
    console.log(obj); // { a: 1 }

 

loadash 라이브러리의 cloneDeep() 메서드를 사용하면 깊은 복사를 할 수 있습니다.