Deep, Shallow comparison (깊은, 얕은 비교 / mutable, immutable)

데이터의 종류는 크게 두가지이다.

원시타입(Primitive type) vs 객체타입(Object type)

 

const pA = "chanki"

const pB = "chanki"

pA === pB // true

 

하지만...

 

const oA = { name: "chanki" }

const oB = { name: "chanki" }

 

oA === oB // false

 

원시타입은 변수에 값이 그대로 할당되고 메모리에 저장되지만 객체타입은 너무 크기때문에 조금 더 복잡한 형태로 메모리에 저장된다.

객체타입은 메모리에 바로 할당되는 것이 아니라 메모리안의 어떤 공간에 저장되어 주소가 할당된다.

 

그렇기 때문에 oA와 oB를 비교했을때 값을 비교한 것이 아니라 메모리의 주소를 비교하게된 것이기 때문에 false라는 결과가 나온것이다.

 

 

보통 원본 데이터에 변형을 주지 않고 코드를 구현해야하는 경우, JSON.stringify() 로 원본 데이터를 문자열로 변형시킨뒤 JSON.parse() 로 다시 객체형태로 만들어 복사하는 경우가 일반적이다.

 

하지만 자바스크립트가 아닌 Web API 에서 제공하는 structuredClone() 메서드로 깊은 복사를 할 수 있다. 자바스크립트 메서드가 아닌 Web API 로써 2022년에 나왔다고 한다. (참고)

 

또는 lodash 에서 제공하는 cloneDeep() 메서드가 있다.