자바스크립트 == vs === 비교 연산자의 차이와 올바른 사용법

자바스크립트에서 값을 비교할 때 가장 흔히 사용되는 연산자는 ==(느슨한 비교)와 ===(엄격한 비교)입니다. 이 둘은 겉보기에는 비슷하지만, 내부 작동 방식과 비교 결과는 전혀 다를 수 있습니다. 잘못 사용하면 의도치 않은 버그로 이어질 수 있기 때문에, 정확한 차이를 이해하고 상황에 맞게 사용하는 것이 중요합니다.

---

✨ == (느슨한 동등 연산자)

• 타입 변환을 허용함 (type coercion)
• 비교 전에 두 값의 타입이 다르면 자동으로 형 변환 후 비교

예시:

'5' == 5       // true → 문자열 '5'가 숫자 5로 변환됨
0 == false     // true → false는 0으로 변환됨
null == undefined // true → 둘은 느슨한 비교에서만 같음
[] == ''       // true
[] == 0        // true

⚠️ 주의해야 할 점

• 형 변환이 암묵적으로 일어나기 때문에 예측하기 어려운 결과를 낳을 수 있음
• 실제로 어떤 변환이 일어나는지 알기 어려워 디버깅이 어려움

---

✨ === (엄격한 동등 연산자)

• 타입까지 동일해야 true 반환
• 비교 전 형 변환이 일어나지 않음 → 가장 안전한 비교 방식

예시:

'5' === 5      // false → 타입이 다름
0 === false    // false → 타입이 다름
null === undefined // false → 타입도 다르고 값도 다름
5 === 5        // true

---

🔍 요약 비교표

표현식	== 결과	=== 결과	설명
'1' == 1	true	false	형 변환 발생 여부 차이
0 == false	true	false	false → 0으로 변환됨
null == undefined	true	false	특이 케이스 (명시적 허용)
[] == ''	true	false	배열 → 문자열 변환
[] == 0	true	false	배열 → 숫자 변환

---

✅ 어떤 걸 써야 할까?

• 항상 ===를 사용하는 것이 좋습니다.
• 예상치 못한 형 변환을 방지하고, 코드를 명확하게 유지할 수 있습니다.
• ==는 특별한 경우(예: null == undefined 비교) 외에는 사용을 지양하세요.

---

✨ 결론

==는 편해 보일 수 있지만, 내부적으로 많은 형 변환이 일어나기 때문에 비교의 정확성이 떨어질 수 있습니다. 실무나 협업 코드에서는 예외적인 상황이 아니라면 항상 ===를 사용하는 습관을 들이는게 좋습니다.