자바스크립트에는 두 가지 동등 비교 연산자가 있습니다. '=='(동등 연산자)는 오직 값만 비교하는 반면, '==='(일치 연산자)는 값과 데이터 타입(String, Boolean 등)을 모두 비교합니다. 따라서 '==='은 값과 자료형이 모두 일치할 때만 true를 반환하고, 하나라도 다르면 false를 반환합니다.
1. '==' 연산자 (동등 비교)
'==' 연산자는 데이터 타입에 관계없이 할당된 값이 같은지 여부만 판단합니다. 아래 예제에서 변수 x와 y는 모두 숫자 5이므로 true가 출력되고, z는 6이므로 false가 출력됩니다.
예제
<html>
<body>
<p id="strict"></p>
<script>
var x = 5;
var y = 5;
var z = 6;
document.getElementById("strict").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>출력 결과
true false
2. '===' 연산자 (엄격한 일치 비교)
'===' 연산자는 값과 데이터 타입이 모두 일치할 때에만 true를 반환합니다. 아래 예제에서 세 변수(x, y, z)는 모두 값 5를 가지고 있지만, y와 z는 문자열 타입으로 할당되어 있습니다. x === y를 비교하면 값은 같아도 x는 숫자형이고 y는 문자열형이므로 false가 반환됩니다. 반면 x == z는 타입 변환 후 값만 비교하기 때문에 true가 됩니다.
예제
<html>
<body>
<p id="strict"></p>
<script>
var x = 5;
var y = "5";
var z = "5";
document.getElementById("strict").innerHTML =
(x === y) + "<br>" + (x == z);
</script>
</body>
</html>출력 결과
false true
정리
결론적으로 '=='는 비교 전 암묵적 타입 변환(type coercion)을 수행하여 값만 비교하는 느슨한 비교이고, '==='는 타입 변환 없이 값과 타입을 모두 엄격하게 비교합니다. 예상치 못한 버그를 방지하고 코드의 의도를 명확히 하기 위해 실무에서는 대부분 '===' 사용이 권장됩니다.