JavaScript에서 값을 비교할 때 느슨한 동등 연산자(loose equality)인 ==와 엄격한 동등 연산자(strict equality)인 === 중 어떤 것을 사용하느냐에 따라 결과가 크게 달라질 수 있습니다. 두 연산자의 동작 방식과 차이점을 예제 코드와 함께 자세히 알아보겠습니다.
느슨한 동등 연산자(==)란?
느슨한 동등 연산자 ==는 두 개 이상의 피연산자를 비교할 때, 먼저 각 값을 공통된 데이터 타입으로 변환한 후 값이 같은지 검사합니다. 따라서 데이터 타입이 서로 달라도 변환된 값이 같다면 true를 반환합니다.
예를 들어 숫자 1과 문자열 '1'을 ==로 비교하면, 문자열이 숫자로 변환되어 비교되기 때문에 결과는 true입니다.
엄격한 동등 연산자(===)란?
엄격한 동등 연산자 ===는 값뿐만 아니라 데이터 타입까지 완전히 일치해야만 true를 반환합니다. 어떠한 타입 변환도 수행하지 않기 때문에 더 엄격하고 안전한 비교가 가능합니다.
따라서 숫자 1과 문자열 '1'을 ===로 비교하면 타입이 다르므로 결과는 false입니다.
예제 코드
아래는 JavaScript에서 느슨한 동등과 엄격한 동등의 차이를 보여주는 전체 코드입니다.
<!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: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Strict equality vs Loose equality</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 느슨한 동등과 엄격한 동등 비교 결과를 확인할 수 있습니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "느슨한 동등(==) 기준 <br>";
if (1 == "1") {
resEle.innerHTML += "1은 '1'과 같습니다<br>";
}
if (undefined == null) {
resEle.innerHTML += "undefined는 null과 같습니다 <br>";
}
resEle.innerHTML += "<br>엄격한 동등(===) 기준 <br>";
if (1 === "1") {
resEle.innerHTML += "1은 '1'과 같습니다<br>";
} else {
resEle.innerHTML += "1은 '1'과 같지 않습니다<br>";
}
if (undefined === null) {
resEle.innerHTML += "undefined는 null과 같습니다 <br>";
} else {
resEle.innerHTML += "undefined는 null과 같지 않습니다 <br>";
}
});
</script>
</body>
</html>
실행 결과
페이지를 실행하면 아래와 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 다음과 같은 비교 결과가 출력됩니다.
- 느슨한 동등(
==) 기준:1 == '1'은 타입 변환 후 값이 같으므로 참이고,undefined == null도 특별 규칙에 의해 참으로 평가됩니다. - 엄격한 동등(
===) 기준:1 === '1'은 타입이 다르므로 거짓이고,undefined === null역시 타입이 다르므로 거짓으로 평가됩니다.
정리 및 개발 팁
느슨한 동등 연산자는 암묵적인 타입 변환 때문에 예상치 못한 버그를 유발할 수 있습니다. 그래서 대부분의 JavaScript 스타일 가이드(예: Airbnb 스타일 가이드)와 ESLint 규칙(eqeqeq)에서는 항상 ===와 !==를 사용할 것을 권장합니다. 타입 변환이 필요한 경우에는 Number(), String() 등으로 명시적으로 변환한 뒤 비교하는 것이 훨씬 안전하고 가독성이 좋습니다.