함정에 빠지기 쉬운 자바스크립트 문법6

자바스크립트는 유연한 문법과 다양한 표현 방식으로 인해, 한 줄의 코드가 예상과 다른 동작을 할 수 있습니다. 이번 6탄에서는 더 깊이 들어가 잘 알려지지 않은 예외적인 동작과 그에 대한 이해를 도울 사례들을 소개합니다.

---

✅ 1. Object.is vs ===

📌 문제 상황

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

Object.is(0, -0);     // false
0 === -0;             // true

📌 설명

Object.is는 ===와 유사하지만, NaN 비교와 ±0 비교에서 차이를 보입니다.

📌 대처

정밀한 비교가 필요할 땐 Object.is()를 고려하고, 일반 비교에서는 ===를 사용합니다.

---

✅ 2. [] == ![]의 놀라운 결과

📌 문제 상황

[] == ![]; // true

📌 설명

이 표현은 다음과 같은 방식으로 평가됩니다:

1. ![]는 false
2. [] == false로 해석됨
3. [] → '', false → 0 → ''
4. 결과: '' == '' → true

📌 대처

항상 ===를 사용하여 예기치 않은 형 변환을 방지합니다.

---

✅ 3. console.log(typeof NaN)은 "number"

📌 문제 상황

console.log(typeof NaN); // "number"

📌 설명

NaN은 Not-a-Number를 의미하지만 실제 타입은 number입니다. 숫자 연산이 실패했을 때의 결과이기 때문에 숫자형으로 분류됩니다.

📌 대처

NaN 체크는 반드시 Number.isNaN()으로 수행해야 합니다.

---

✅ 4. arguments 객체는 배열이 아니다

📌 문제 상황

function example() {
  console.log(arguments instanceof Array); // false
}

📌 설명

arguments는 배열과 유사하지만 실제 배열은 아니기 때문에 map, filter 등의 배열 메서드를 사용할 수 없습니다.

📌 대처

필요 시 Array.from(arguments) 또는 전개 연산자 ...args를 사용해 진짜 배열로 변환합니다.

---

✅ 5. setTimeout(fn, 0)은 즉시 실행되지 않는다

📌 문제 상황

setTimeout(() => console.log("later"), 0);
console.log("now");
// 출력: now → later

📌 설명

0ms를 지정해도 타이머는 콜 스택이 비워진 뒤 실행되며, 마이크로태스크가 우선 실행됩니다.

📌 대처

즉시 실행을 원한다면 queueMicrotask() 또는 Promise.resolve().then()을 사용할 수 있습니다.

---

✅ 결론

이번 편에서는 더욱 미묘하고 이해하기 어려운 자바스크립트 문법 사례를 살펴보았습니다. 명확한 비교 방식, 정확한 형 변환 이해, 배열 유사 객체와 타이머 실행 순서 등은 고급 자바스크립트 활용에 중요한 요소입니다. 실무에서 마주치기 전에 숙지해두면 코드의 예측 가능성과 안정성이 크게 향상됩니다.