자바스크립트에서 == 연산자와 ===연산자는 둘 다 두 값의 동등성을 비교하는데 사용되지만, 그 작동 방식에 중요한 차이가 있다. 이 두 연산자를 제대로 이해하고 사용해야 버그를 예방하고 코드의 의도를 명확히 파악할 수 있다.
== 연산자는 비교하지 전에 두 피연산자의 타입을 동일하게 맞추기 위해 타입 변환(coercion)을 수행한다. 이로 인해 의도하지 않은 결과가 발생할 수 있다.
console.log(5 == '5'); // true (숫자와 문자열을 비교하며 문자열 '5'가 숫자 5로 변환됨)
console.log(false == 0); // true (false는 0으로 변환됨)
console.log(null == undefined); // true (둘 다 비어 있음을 의미하므로 true)
=== 연산자는 두 피연산자가 같은 값이고, 같은 타입일 때만 true를 반환한다. 즉, 타입 변환을 하지 않고 값과 타입이 모두 동일해야 한다.
console.log(5 === '5'); // false (숫자와 문자열은 타입이 다름)
console.log(false === 0); // false (타입이 다름)
console.log(null === undefined); // false (타입이 다름)
console.log(5 === 5); // true (같은 타입의 동일한 값)
타입 변환으로 인해 발생할 수 있는 예기치않은 오류를 방지하기 위해 ===연산자를 사용하는 것이 좋다. 이는 코드의 안정성과 가독성을 높인다.
== 연산자가 필요한 경우, 즉, 타입이 다를 수 있지만 값이 같다고 판단되는 경우에만 사용해야한다. 이러한 경우는 코드 리뷰 시 주의 깊게 살펴봐야 한다.
✔️ NaN과 비교
어떤 값이 NaN인지 확인하려면isNaN함수를 사용해야 한다. NaN은 자신과도 같지 않기 때문에NaN == NaN또는NaN === NaN은 항상 false를 반환한다.✔️ 객체와 배열의 비교
객체나 배열은 참조 타입이므로 같은 인스턴스를 가리키지 않은 한 항상 false를 반환한다.const a = [1, 2, 3]; const b = [1, 2, 3]; console.log(a == b); // false console.log(a === b); // false const c = a; console.log(a == c); // true console.log(a === c); // true