JavaScript에서 문자열(string), 숫자(number), 불리언(boolean)과 같은 원시 타입(primitive)은 값(value)을 기준으로 비교됩니다. 반면 네이티브 객체든 사용자 정의 객체든 객체(object)는 참조(reference)를 기준으로 비교됩니다.
여기서 '참조로 비교한다'는 것은 두 개 이상의 객체가 메모리상의 동일한 위치를 가리키고 있는지를 확인한다는 의미입니다. 즉, 객체 내부의 속성값이 완전히 같더라도 서로 다른 메모리 주소에 존재하면 두 객체는 같지 않다고 판단됩니다.
JavaScript에서 객체 동등성 예제
다음 코드는 JavaScript에서 객체가 어떻게 비교되는지 보여줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>JavaScript에서 객체의 동등성</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하여 객체를 비교해 보세요</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let obj = {
name: "Rohan",
age: 21,
};
let obj1 = {
name: "Rohan",
age: 21,
};
let obj2 = obj;
BtnEle.addEventListener("click", () => {
if (obj != obj1) {
resEle.innerHTML = "obj은 obj1과 같지 않습니다 <br>";
}
if (obj2 === obj) {
resEle.innerHTML += "obj2는 obj과 같습니다";
}
});
</script>
</body>
</html>코드 설명
위 예제에서 핵심 포인트는 다음과 같습니다.
obj와obj1은 이름과 나이 속성이 완전히 동일하지만, 각각 별도의 객체 리터럴로 생성되었기 때문에 메모리상 서로 다른 위치에 존재합니다. 따라서obj != obj1은 true가 됩니다.obj2는let obj2 = obj;를 통해obj의 참조(주소)를 그대로 할당받았습니다. 따라서 두 변수는 같은 객체를 가리키며,obj2 === obj는 true가 됩니다.
출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같이 비교 결과가 표시됩니다.
정리
JavaScript에서 객체를 비교할 때는 내용이 아닌 참조(메모리 주소)가 기준이 됩니다. 객체의 실제 속성값을 기준으로 비교하고 싶다면 JSON.stringify()를 활용하거나, 깊은 비교(deep equality)를 수행하는 유틸리티 함수 또는 Lodash의 _.isEqual() 같은 라이브러리를 사용하는 것이 좋습니다.