객체 비교의 기본 원리
자바스크립트에서 객체는 배열이나 문자열과 같은 단순 자료형이 아닙니다. 객체는 참조 타입(reference type)이므로 변수에는 값 자체가 아닌 메모리 주소가 저장되며, 따라서 "===" 또는 "==" 연산자로 직접 비교하는 것은 불가능합니다.
두 객체를 비교하려면 먼저 JSON.stringify()를 사용해 객체를 문자열로 변환(stringify)한 뒤, 동등 연산자로 비교해야 합니다.
예제 1: JSON.stringify()를 이용한 비교
다음 예제에서는 두 객체를 각각 문자열로 변환한 후 서로 비교합니다.
<html>
<body>
<script>
const obj1 = {Name: "Rahim", City: 'Hyderabad',Country: "India" };
const obj2 = {Name: "Rahim", City: 'Hyderabad',Country: "India" };
document.write(JSON.stringify(obj1) === JSON.stringify(obj2));
</script>
</body>
</html>
출력 결과
true
두 객체가 동일한 프로퍼티를 같은 순서로 가지고 있으므로 true가 출력됩니다.
예제 2: 프로퍼티 순서가 다른 경우
그러나 JSON.stringify()를 이용한 비교에는 한계가 있습니다. 아래 예제에서는 두 객체가 동일한 프로퍼티를 포함하고 있지만, 프로퍼티의 나열 순서가 서로 다릅니다. JSON.stringify()는 프로퍼티 순서까지 문자열에 그대로 반영하기 때문에, 이 경우 비교 결과는 false가 됩니다.
<html>
<body>
<script>
const obj1 = {Name: "Rahim", City: 'Hyderabad', Country: "India" };
const obj2 = {Name: "Rahim", Country: "India", City: 'Hyderabad'};
document.write(JSON.stringify(obj1) === JSON.stringify(obj2));
</script>
</body>
</html>
출력 결과
false
Lodash의 isEqual() 메서드 활용
이러한 한계를 극복하기 위해 'lodash'라는 자바스크립트 라이브러리를 활용할 수 있습니다. lodash의 _isEqual() 메서드는 프로퍼티의 순서와 무관하게 키/값 쌍(key/value pairs)이 동일한지만 검사하므로, 실질적인 내용 기준의 깊은 비교(deep comparison)가 가능합니다.
예제 3: _.isEqual()을 이용한 깊은 비교
다음 예제에서는 lodash의 "_isEqual()" 메서드를 사용하여 두 객체를 비교합니다.
<html>
<head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
<script>
const obj1 = {Name: "Rahim", City: 'Hyderabad', Country: "India" };
const obj2 = {Name: "Rahim", Country: "India", City: 'Hyderabad'};
document.write(JSON.stringify(obj1) === JSON.stringify(obj2));
document.write("</br>");
document.write(_.isEqual(obj1, obj2));
</script>
</body>
</html>
출력 결과
false
true
첫 번째 결과 false는 JSON.stringify() 기반 비교가 프로퍼티 순서의 차이를 감지했음을 보여주고, 두 번째 결과 true는 _.isEqual()이 내용 기준으로 두 객체를 동일하다고 판단했음을 의미합니다.
어떤 방법을 선택해야 할까?
- JSON.stringify() 비교: 구조가 단순하고 프로퍼티 순서가 일정하게 보장되는 평면(flat) 객체에 적합합니다. 별도의 라이브러리 없이 바로 사용할 수 있다는 장점이 있습니다.
- lodash의 _.isEqual(): 중첩된 객체나 프로퍼티 순서가 불규칙한 객체를 비교할 때 권장됩니다. 순서에 영향받지 않고 정확한 깊은 비교를 수행합니다.