JavaScript 비교 연산자

JavaScript의 비교 연산자는 단순히 ==, ===를 넘어서서 다양한 상황에서 중요한 역할을 합니다. 이 글에서는 헷갈리기 쉬운 비교 연산자들의 차이와 실제 사용 시 주의할 점들을 상세히 정리합니다.

---

1. 느슨한 비교 (==) vs 엄격한 비교 (===)

console.log(1 == '1');   // true
console.log(1 === '1');  // false

• ==는 타입을 자동 변환하여 값만 비교합니다 (type coercion)
• ===는 타입과 값 모두를 비교하므로 더 안전하고 예측 가능합니다

대부분의 경우 === 사용을 권장합니다.

---

2. != vs !==

console.log(null != undefined);  // false
console.log(null !== undefined); // true

• !=는 ==처럼 자동 타입 변환을 수행
• !==는 타입과 값 모두 비교하는 반면, !=는 느슨하게 동작합니다

---

3. 숫자/문자 비교의 차이점

console.log('10' < 5);       // false ('10' → 10으로 변환됨)
console.log('apple' < 'cat'); // true (사전 순 정렬 기준)

• 숫자 비교는 대부분 타입 변환이 이루어지지만
• 문자열 간 비교는 유니코드 값을 기준으로 정렬

---

4. 객체 비교는 참조 기준

const a = { x: 1 };
const b = { x: 1 };
console.log(a === b); // false

const c = a;
console.log(a === c); // true

• 객체, 배열 등은 내용이 같더라도 참조가 다르면 false입니다
• 비교 시 값이 아닌 참조 주소를 비교한다는 점 주의

---

5. NaN은 자기 자신과도 다르다

console.log(NaN === NaN);         // false
console.log(Object.is(NaN, NaN)); // true

• NaN은 ===로 비교해도 false가 나옵니다
• Object.is()는 NaN, +0, -0도 정확히 비교 가능

---

6. valueOf와 toString에 의한 비교

const obj = {
  valueOf() { return 123; }
};

console.log(obj == 123); // true

• 객체와 기본형을 비교할 때 valueOf()나 toString()이 자동 호출되어 변환됨
• 객체 비교 시에는 이런 자동 변환이 예기치 못한 결과를 만들 수 있으므로 주의

---

7. Boolean 비교와 암묵적 변환 주의

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

console.log('' == false);  // true
console.log([] == false);  // true
console.log({} == false);  // false

• ==는 예외적인 규칙이 많아 혼란을 유발할 수 있음
• === 사용 시 이런 예외 없이 명확한 비교 가능

---

8. null / undefined 비교

console.log(null == undefined);  // true
console.log(null === undefined); // false

• null과 undefined는 == 비교에서만 서로 같음
• ===로 비교하면 false

---

마무리

JavaScript의 비교 연산자는 간단해 보이지만 의외로 많은 함정을 포함하고 있습니다. 특히 ==와 ===, 객체 참조 비교, NaN의 비교 등은 자주 실수할 수 있는 부분입니다.

항상 명확하고 예측 가능한 코드를 위해서는 ===, !==를 기본으로 사용하고, 필요한 경우에만 타입 강제 변환을 허용하는 것이 좋습니다.

실수 줄이기 팁: ESLint의 eqeqeq 규칙을 활성화하여 == 사용을 제한하는 것도 좋은 방법입니다.