[JS] 자네, 두 Array를 비교하고 싶지 않은가? feat.객체 비교하는 법

 

 

 

문제

Type 검증과 관련해서 A라는 객체와 B라는 객체가 같은가를 비교하고 싶었다.

정말 평소처럼 아래와 같은 코드를 작성했다.

 

        if (i.name === { test: 'test', tset: 'tset' }) {
          console.log('yes!');
        }

i.name도 { test: 'test', tset: 'tset'} 여서 콘솔에 yes!라는 메시지가 찍혀야 한다!

하지만.. 콘솔에 그 어느것도 나오지 않았다.

도대체 왜 그럴까?

 

원인

그 이유는 두 변수를 비교할 때 연산자 === (or ==)를 사용하기만 해도 괜찮다.

하지만 그 두 변수가 객체라면 말이 달라진다.

객체 비교는 여러 값을 포함하고 그 안에 객체를 포함할 수 있기 때문에 쉽지 않다.

 

 

방법

그렇다면 어떻게 두 객체를 비교할 수 있을까?

방법은 2가지다.

 

 

1. JSON.stringify()

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };

// Using JavaScript
JSON.stringify(k1) === JSON.stringify(k2); // true


const k1 = { fruit: '🥝', energy: '255kJ' };
const k2 = { energy: '255kJ', fruit: '🥝' };

// Using JavaScript
JSON.stringify(k1) === JSON.stringify(k2); // false

JSON.stringify()는 순서가 매우 중요합니다.

두번째 예제처럼 사람 눈으로 보기엔 순서만 다를 뿐이지 내용은 같다고 생각하지만 JSON.stringify()는 false을 반환합니다!

 

 

2. isEqual()

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };

// Using Lodash
_.isEqual(k1, k2); // true

const k1 = { fruit: '🥝', energy: '255kJ' };
const k2 = { energy: '255kJ', fruit: '🥝' };

// Using Lodash
_.isEqual(k1, k2); // true

이에 반해 isEqual()는 순서가 전혀 상관없습니다.

JSON.stringify()와는 다르게 true를 반환하니 둘의 차이가 명확합니다.

 

결론

JSON.stringify는 순서가 중요함으로 객체의 요소가 그리 많지 않을 때 쓰면 좋습니다.

isEqual()은 순서가 중요하지 않기 때문에 요소가 많을 때 쓰면 좋습니다.