Object.is() 메서드란?
Object.is() 메서드는 ES6(ES2015)에서 새롭게 도입된 기능으로, 두 값을 비교하는 데 사용됩니다. 비교 대상은 숫자나 문자열 같은 원시 타입(primitive)일 수도 있고 객체일 수도 있습니다.
이 메서드는 기존의 == 또는 === 연산자보다 한층 더 정밀하고 직관적인 비교를 수행한다는 점이 큰 특징입니다.
=== 연산자와의 차이점
Object.is()는 === 연산자와 거의 동일하게 작동하지만, 다음 두 가지 경우에서 서로 다른 결과를 반환합니다.
- NaN 비교: Object.is(NaN, NaN)은 true를 반환하지만, NaN === NaN은 false를 반환합니다.
- +0과 -0 비교: Object.is(0, -0)은 false를 반환하지만, 0 === -0은 true를 반환합니다.
동등성 비교 예제 코드
다음은 Object.is()를 활용해 객체를 비교하는 전체 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<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: blueviolet;
}
</style>
</head>
<body>
<h1>Object.is() equality comparsion</h1>
<div class="result"></div>
<button class="Btn">Click here</button>
<h3>Click on the above button to compare objects using Object.is()</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let obj = { a: 11, b: 22 };
let obj1 = { a: 11, b: 22 };
let obj2 = obj;
BtnEle.addEventListener("click", () => {
if (Object.is(obj, obj1)) {
resEle.innerHTML = "obj = obj1";
} else {
resEle.innerHTML = "obj != obj1 <br>";
}
if (Object.is(obj, obj2)) {
resEle.innerHTML += "obj = obj2";
}
});
</script>
</body>
</html>
코드 설명
- obj와 obj1: 내용은 같지만 서로 다른 메모리 주소를 참조하는 별개의 객체이므로, Object.is(obj, obj1)은 false를 반환합니다.
- obj와 obj2: obj2는 obj와 동일한 객체를 참조하므로, Object.is(obj, obj2)는 true를 반환합니다.
즉, Object.is()는 객체를 비교할 때 속성값이 아니라 참조(reference)가 같은지를 판단합니다.
실행 결과
페이지를 실행하면 다음과 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같이 비교 결과가 화면에 표시됩니다.
