JavaScript 느슨한 동등성(==) 연산자 완벽 가이드

JavaScript에서 느슨한 동등성(loose equality) 연산자 ==는 두 개 이상의 피연산자를 비교할 때, 먼저 서로 다른 타입의 값을 공통된 타입으로 변환(타입 강제 변환, Type Coercion)한 뒤 그 값들이 같은지 확인하는 방식으로 동작합니다.

이 때문에 숫자와 문자열처럼 타입이 다른 값이라도 실질적인 값이 같다면 true를 반환하게 됩니다.

느슨한 동등성의 주요 타입 변환 규칙

숫자 vs 문자열: 문자열이 숫자로 변환되어 비교됩니다. 예: 1 == "1" → true
null vs undefined: 서로 같다고 판단되며(undefined == null → true), 다른 어떤 값과도 같지 않습니다.
불리언(Boolean): 숫자로 변환됩니다(true → 1, false → 0).
객체(Object): 원시 값과 비교될 때 valueOf() 또는 toString() 메서드를 통해 원시 값으로 변환됩니다.

예제 코드

아래는 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>Loose equality in JavaScript.</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button see some comparisons using loose equality</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "According to loose equality <br>";
        if (1 == "1") {
            resEle.innerHTML += "1 is equal to '1'<br>";
        }
        if (undefined == null) {
            resEle.innerHTML += "undefined is equal to null <br>";
        }
    });
</script>
</body>
</html>

실행 결과

페이지를 처음 열었을 때의 화면입니다.

JavaScript 느슨한 동등성(==) 연산자 완벽 가이드

'CLICK HERE' 버튼을 클릭하면 아래와 같이 느슨한 동등성 비교 결과가 화면에 표시됩니다.

JavaScript 느슨한 동등성(==) 연산자 완벽 가이드

결과에서 확인할 수 있듯이, 숫자 1과 문자열 "1"은 타입이 다름에도 불구하고 같다고 판정되며, undefined와 null 역시 서로 같다고 평가됩니다.

느슨한 동등성(==)과 엄격한 동등성(===)의 차이

연산자	특징
`==`	비교 전 피연산자의 타입을 자동으로 변환하여 값만 비교합니다.
`===`	타입 변환 없이 값과 타입이 모두 일치해야 `true`를 반환합니다.

마무리 및 사용 시 주의사항

느슨한 동등성 연산자는 편리해 보이지만, 예상치 못한 타입 변환으로 인해 의도하지 않은 결과를 초래할 수 있습니다. 예를 들어 0 == false, "" == 0 등은 모두 true로 평가되어 버그의 원인이 되기도 합니다.

따라서 실무에서는 타입까지 엄격하게 검사하는 일치 연산자(===)를 사용하는 것이 권장됩니다. 느슨한 동등성은 JavaScript의 타입 변환 메커니즘을 이해하기 위한 학습 목적으로 활용하는 것이 좋습니다.