얕은 복사 & 깊은 복사

얕은 복사

얕은 복사란 객체를 복사할 때 위의 예제처럼 원래값과 복사된 값이 같은 참조를 가리키고있는 것을 말한다. 객체안에 객체가 있을 경우 한개의 객체라도 원본 객체를 참조하고 있다면 이를 얕은 복사라고 한다.

참조로 해당 메모리 주소를 가져와서 데이터를 입력해주는 구조로 알고 있다. 그래서 조금만 코드가 복잡해지기 시작하면 얕은 복사는 코딩하면서 쓸때마다 문제가 있었다. 그래서 웬만하면 잘 안사용하게 된다.

const a = { x: 1 }
const b = a

b.x = 2

console.log(b) // { x: 2 }
console.log(a) // { x: 2 }

배열도 보면 2차원배열은 달라진다.

const a = [1, 2, 3]
const b = a

b[0] = 4

console.log(b) // [4, 2, 3]
console.log(a) // [4, 2, 3]

const a = [[1, 2], [3]]
const b = [...a]

b[0][0] = 4

console.log(b) // [[4, 2], [3]]
console.log(a) // [[4, 2], [3]]

깊은 복사

깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.

cloneDeep을 사용해서 깊은 복사를 해주는게 마음편하다.

import cloneDeep from 'lodash/cloneDeep'

const a = { x: { y: 1 } }
const b = cloneDeep(a) // 깊은 복사!

b.x.y = 2

console.log(b) // { x: { y: 2 } }
console.log(a) // { x: { y: 1 } }

import cloneDeep from 'lodash/cloneDeep'

const a = [[1, 2], [3]]
const b = cloneDeep(a)

b[0][0] = 4

console.log(b) // [[4, 2], [3]]
console.log(a) // [[1, 2], [3]]