왜 ==와 ===가 JavaScript에서 다르게 동작하는가

Source: Dev.to

엄격한 동등성 (===)

===는 두 가지를 확인합니다:

1. 값이 같은가?
2. 타입이 같은가?

두 조건이 모두 만족해야 합니다.

5 === 5               // true
5 === "5"             // false
true === 1            // false
null === undefined    // false

타입이 일치하지 않으면, JavaScript는 변환 없이 false를 반환합니다.

느슨한 동등성 (==)

==는 값을 비교하기 전에 변환하여 “도와주려” 합니다 (형 변환).

5 == "5"               // true  (string → number)
true == 1              // true  (boolean → number)
false == 0             // true
null == undefined      // true  (special case)

몇 가지 놀라운 경우

"" == 0                // true
"0" == 0               // true
[] == 0                // true

왜 이런 일이 발생할까

==를 사용할 때, JavaScript는 자동으로 피연산자를 같은 타입으로 맞추려고 합니다:

이러한 암묵적인 단계 때문에 ==가 혼란스러운 결과를 낼 수 있습니다.

어느 것을 사용해야 할까요?

초보자와 대부분의 경우에는 엄격한 동등성을 선호합니다:

// Use ===

예측 가능하고 예상치 못한 타입 변환을 방지합니다.
변환 규칙을 완전히 이해하거나 null == undefined와 같은 특수 경우가 필요할 때만 ==를 사용하세요.

간단한 데모

console.log(0 == false);   // true
console.log(0 === false);  // false

console.log("5" == 5);     // true
console.log("5" === 5);    // false

콘솔에서 이 스니펫들을 실행하면 차이를 즉시 확인할 수 있습니다.

빠른 요약

짧은 요약

• ===는 엄격하고 예측 가능합니다.
• ==는 타입 강제 변환을 수행하며 복잡할 수 있습니다.

더 깔끔한 로직과 놀라움을 줄이기 위해 ===를 사용하세요.