[Javascript] 객체 인스턴스를 비교해보자

그냥 '===' 쓰면 안되나요...

시작은 결론부터

• object(객체)는 참조형이므로 일치 비교연산자(===) 으로 비교하면 저장된 주소가 비교되어 의미가 없습니다.
• Object.entries로 배열로 만들어 toString() 사용하거나, JSON.stringify() 사용하면 비교 가능합니다. 다만 key 순서가 다르면 다른 객체로 인식됩니다.
• Lodash 라이브러리의 isEqual()을 사용하면 순서까지 무관하게 깊은 비교가 가능합니다.

마무리는 증명으로

const obj1 = { a: "apple", b: "banana", c: "cat" }
const obj2 = { a: "apple", b: "banana", c: "cat" }
const obj3 = { a: "apple", c: "cat", b: "banana" }
const obj4 = { a: "air", b: "boy", c: "cow" }

위의 obj1을 기준으로

• key-value쌍과 순서가 같은 obj2
• key-value쌍은 같고 순서만 다른 obj3
• key-value쌍과 순서가 모두 다른 obj4

를 비교해봅시다~

1. 일치 비교연산자(===) 사용하기

//모두 false
console.log(obj1 === obj2)
console.log(obj1 === obj3)
console.log(obj1 === obj4)

2. Object.entries 이용하여 toString()으로 바꾸기

//true
console.log(Object.entries(obj1).toString() === Object.entries(obj2).toString())
//false
console.log(Object.entries(obj1).toString() === Object.entries(obj3).toString())
//false
console.log(Object.entries(obj1).toString() === Object.entries(obj4).toString())

3. JSON.stringify() 이용하여 바꾸기

obj1Stringify = JSON.stringify(obj1)
obj2Stringify = JSON.stringify(obj2)
obj3Stringify = JSON.stringify(obj3)
obj4Stringify = JSON.stringify(obj4)

//true
console.log(obj1Stringify === obj2Stringify)
//false
console.log(obj1Stringify === obj3Stringify)
//false
console.log(obj1Stringify === obj4Stringify)

4. Lodash 이용하여 isEqual로 깊은 비교하기

const lodash = require('lodash')

//true
console.log(lodash.isEqual(obj1, obj2))
//true
console.log(lodash.isEqual(obj1, obj3))
//false
console.log(lodash.isEqual(obj1, obj4))

lodash 공식 docs

• loadsh는 js의 인기있는 라이브러리 중 하나로 배열 값을 다룰 때 자주 쓰인다.
• native보다 성능이 좋고 간편하여 복잡한 함수식도 간단하게 정리해준다.
• find, includes, map,reduce 등의 내장 함수들을 더 쉽게 사용할 수 있다.

[이미지 출처] http://gph.is/1yw44rd