개발 도중에 JSON으로 된 Object 또는 일반 object에 특정 값이 변경 되었을 경우 비교하여 조건문을 걸고 싶은 경우
생각하지 못했던 결과를 얻게 되어서 정리를 해보겠습니다.
const k1 = {fruit: '🥝'};
const k2 = {fruit: '🥝'};
// Using JavaScript
JSON.stringify(k1) === JSON.stringify(k2); // true
// Using Lodash
_.isEqual(k1, k2); // true
- Deep Nested 비교
조금더 복잡하고 중첩되어진 Object를 비교하여도 제대로된 결과를 얻을수 있습니다.
const one = {
fruit: '🥝',
nutrients: {
energy: '255kJ',
minerals: {
name: 'calcium'
}
}
};
const two = {
fruit: '🥝',
nutrients: {
energy: '255kJ',
minerals: {
name: 'calcium'
}
}
};
// Using JavaScript
JSON.stringify(one) === JSON.stringify(two); // true
// Using Lodash
_.isEqual(one, two); // true
-결론
1. 간단하고 Object 깊이가 깊지 않은 경우는 JSON.stringify()함수를 쓰고
2. 깊고 복잡한 비교를 했을경우는 Lodash 방식인 isEqual함수를 쓰는것이 좋은것 같다.
- 결론 보충내용
JSON.stringify : string 비교를 하므로 Object 전체를 비교.
Lodash : Object 전체 비교하지 않고 비교 중 다른 부분이 있으면 함수 종료
부록 내용: ES6 방법으로 entries를 이용하여서 비교 할 수도 있음
const k1 = {fruit: '🥝'};
const k2 = {fruit: '🥝'};
Object.entries(k1).toString() === Object.entries(k2).toString();
참조 사이트: https://www.samanthaming.com/tidbits/33-how-to-compare-2-objects/
'IT > 자바스크립트' 카테고리의 다른 글
비동기식 코드 작성 (promise, async , await) 고려점 (0) | 2022.04.04 |
---|---|
Throttle(쓰로틀링)과 Debounce(디바운스)에 대해서 알아보자! 정리하자! (0) | 2020.02.27 |
Javacript - call , apply , bind 차이점 정리 (0) | 2020.02.27 |