Shallow copy && Deep copy

Shallow copy

얕은 복사는 참조(주소)값을 복사한다.

const obj = {}
obj.a = 10

const newObj = obj
newObj.a = 20

console.log(obj.a) // 20
console.log(obj === newObj) // true

obj 객체를 새로운 newObj 객체에 할당했다.
하지만 참조 값을 할당했으므로 newObj의 값을 변경하더라도 obj의 값이 변경된다.
또한 === 연산으로 두 객체를 비교한 결과 값이 true 로 나온 것을 확인할 수 있다.

위의 결과로 확인할 수 있는 것은 obj 의 메모리 주소를 newObj가 동일하게 가리키므로 결국 하나의 객체를 공유하고 있는 것이다.

Deep copy

깊은 복사는 값 자체를 복사하는 것을 의미한다.

const obj = {}
obj.a = 10

const newObj = Object.assign({}, obj)
newObj.a = 20

console.log(obj.a) // 10
console.log(obj === newObj) // false

Spread Operator를 활용한 깊은 복사

const obj = {}
obj.a = 10
const newObj = { ...obj }
newObj.a = 20

console.log(obj.a) // 10
console.log(obj === newObj) // false

위처럼 Spread Operator 를 활용하여 깊은 복사를 할 수 있다.

• 단 Object.assign, Spread Operator를 활용해도 2차원의 객체는 Shallow copy가 이루어진다.

Lodash

객체를 다루는 라이브러리 중에서 lodash라는 모듈이 있다.
이를 활용하여 깊은 복사를 할 수 있다.

• npm init => npm i lodash

const lodash = require("lodash")

const obj = {}
obj.a = 10
const newObj = lodash.cloneDeep(obj)
newObj.a = 20

console.log(obj.a) // 10
console.log(newObj.a) // 20
console.log(obj === newObj) // false

lodash 모듈은 객체를 다룰 때 매우 유용한 라이브러리이다.
lodash.cloneDeep()을 활용하면 2차원 객체도 Deep copy를 이뤄낼 수 있다.