안녕하세요.
오늘은 자바스크립트에서 JSON 구조로 된 Object 간 값 비교하는 여러 가지 방법을 정리해 보려고 합니다. 일반적인 Object값이라면 간단하게 === 비교를 하면 되지만 JSON처럼 key, value 구조를 가진 데이터는 바로 비교가 불가능합니다. 그럼 어떤 방식으로 비교하여 처리를 하는지 알아보도록 하겠습니다.
1. 동일한 JSON 데이터 비교
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script>
/**
* window document load 실행
*/
window.addEventListener('DOMContentLoaded', () => {
const aObject = {
"name" : "test",
"data" : ["a", "b", "c", "d", "e"],
};
const bObject = {
"name" : "test",
"data" : ["a", "b", "c", "d", "e"],
};
// 일반 비교
const compare1 = aObject === bObject;
// JSON.stringify() 처리 후 비교
const compare2 = JSON.stringify(aObject) === JSON.stringify(bObject);
// Object.is() 비교
const compare3 = Object.is(aObject, bObject);
// JSON.stringify() 처리 후 Object.is() 비교
const compare4 = Object.is(JSON.stringify(aObject), JSON.stringify(bObject));
// isEqual 비고
const compare5 = _.isEqual(aObject, bObject);
console.log('비교 1 : ' + compare1);
console.log('비교 2 : ' + compare2);
console.log('비교 3 : ' + compare3);
console.log('비교 4 : ' + compare4);
console.log('비교 5 : ' + compare5);
});
</script>우선 aObject라는 json 구조의 데이터와 bObject라는 json 구조의 데이터의 값을 동일하게 준비하였습니다.
비교하는 방법은 총 5가지로 준비를 해봤습니다.
1. 일반 비교
const compare1 = aObject === bObject;첫번째는 가장 단순한 === 비교입니다. 보통 일반적인 타입의 데이터를 비교할 때 많이 쓰는 비교문이죠. 하지만 json & object 구조를 비교할 때의 일반 비교문은 비교할 수 없습니다. 다른 방법들과 비교를 위해 준비를 했습니다.
2. JSON.stringify() 처리 후 비교
const compare2 = JSON.stringify(aObject) === JSON.stringify(bObject);두 번째는 JSON.stringify() 기능을 사용하여 문자열로 변경한 후 비교하는 방법입니다.
3. Object.is() 비교
const compare3 = Object.is(aObject, bObject);세 번째는 Object.is() 비교 함수를 이용한 비교 방법입니다.
4. JSON.stringify() 처리 후 Object.is() 비교
const compare4 = Object.is(JSON.stringify(aObject), JSON.stringify(bObject));네 번째는 2번과 3번을 합쳐서 비교를 하는 방법입니다.
5. _.isEqual() 비교
const compare5 = _.isEqual(aObject, bObject);마지막 다섯번째는 underscore.js를 참조하여 사용한 _.isEqual() 함수의 비교 방법입니다.
그럼 다섯가지의 방법의 실행 결과를 확인해 보겠습니다.
결과는 1번과 3번을 제외한 2번, 4번, 5번은 비교가 정상적으로 됐습니다. 하나씩 정리해 볼까요?
- 1번 : 일반적인 비교(===)는 json이나 object구조를 비교할 수 없음
- 2번 : json이나 object 구조의 데이터를 JSON.stringify()를 이용하여 문자열로 변경한 뒤 비교할 경우 비교 가능
- 3번 : Object.is()도 1번과 동일하게 내부적으로는 일반적인 비교(===)를 하고 있기 때문에 비교 불가능
- 4번 : JSON.stringify()를 이용하여 문자열로 변경한 뒤 Object.is()를 사용하면 비교 가능
- 5번 : underscore.js에서 제공하는 비교 방법으로 json이나 object의 상세 내용까지 모두 검사를 해서 비교하는 방법으로 비교 가능
위와 같이 정리할 수 있겠네요!
하지만 테스트를 한 aObject와 bObject의 데이터 값은 정확하게 일치하는 값이라 비교가 가능한 2번, 4번, 5번의 방법을 사용하면 어떤 방법이 더 정확한지 알 수가 없습니다. 그래서 aObject와 bObject의 값을 조금만 변경해서 다시 결과를 확인해 보겠습니다.
2. 동일하지 않은 JSON 데이터 비교
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script>
/**
* window document load 실행
*/
window.addEventListener('DOMContentLoaded', () => {
const aObject = {
"name" : "test",
"data" : ["a", "b", "c", "d", "e"],
};
const bObject = {
"data" : ["a", "b", "c", "d", "e"],
"name" : "test",
};
// 일반 비교
const compare1 = aObject === bObject;
// JSON.stringify() 처리 후 비교
const compare2 = JSON.stringify(aObject) === JSON.stringify(bObject);
// Object.is() 비교
const compare3 = Object.is(aObject, bObject);
// JSON.stringify() 처리 후 Object.is() 비교
const compare4 = Object.is(JSON.stringify(aObject), JSON.stringify(bObject));
// isEqual 비고
const compare5 = _.isEqual(aObject, bObject);
console.log('비교 1 : ' + compare1);
console.log('비교 2 : ' + compare2);
console.log('비교 3 : ' + compare3);
console.log('비교 4 : ' + compare4);
console.log('비교 5 : ' + compare5);
});
</script>aObject의 값은 동일하며 bObject의 "name"과 "data"의 위치를 바꿔줬습니다. 어떤 결과가 나올까요?!
결과는... 5번을 제외한 나머지 방법들은 false가 나왔습니다. object의 실제 데이터는 동일하지만 위의 예시처럼 위치만 조금 달라도 결과가 확연하게 달라지는 모습입니다.
결과적으로 보게 되면 object의 비교를 할 때에는 5번 방법으로 하는 것이 가장 바람직해 보입니다.
마무리
오늘은 이렇게 자바스크립트에서 두 Object를 비교하는 방법들을 알아봤습니다. 개발 업무를 하면서 비교 연산을 많이 마주하게 되는데 비교 대상의 값들이 동일하여 true만 나오는 결과만 확인하는 것보단 강제로 false가 날 수 있는 상황을 만들어 보면서 조금 더 안전하고 정확한 결과를 만들어 보는 습관을 가지는 것도 중요한 것 같습니다!
그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.
