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

자바스크립트는 유연하고 관대한 문법 특성 덕분에 초보자에게 진입 장벽이 낮은 언어입니다. 하지만 이로 인해 실수하거나 오해하기 쉬운 문법들도 많습니다. 이 글에서는 실무에서 자주 마주치지만, 주의하지 않으면 버그로 이어질 수 있는 자바스크립트 문법 사례들을 소개합니다.

---

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

📌 문제 상황

0 == false    // true
0 === false   // false
null == undefined  // true
null === undefined // false

📌 해결 방법

항상 ===를 사용하여 타입까지 비교하도록 습관을 들이는 것이 좋습니다.

---

✅ 2. typeof null은 왜 "object"인가?

📌 문제 상황

typeof null; // "object"

📌 원인

자바스크립트 초기 설계 실수로, null은 객체가 아님에도 불구하고 "object"로 판단됩니다.

📌 대처

null인지 체크할 때는 value === null을 사용합니다.

---

✅ 3. Array.prototype.length와 빈 요소

📌 문제 상황

const arr = [1, 2, 3];
arr[10] = 99;
console.log(arr.length); // 11
console.log(arr); // [1, 2, 3, <7 empty items>, 99]

📌 설명

배열에 특정 인덱스를 직접 할당하면 그 이전 인덱스는 비어 있는 상태로 존재하게 됩니다.

📌 대처

배열 조작은 push, splice 등을 활용하고, 명시적 인덱스 지정은 주의해서 사용해야 합니다.

---

✅ 4. NaN !== NaN인 이유

📌 문제 상황

NaN === NaN; // false

📌 원인

IEEE 754 부동소수점 표준에 따라 NaN은 자기 자신과도 같지 않은 유일한 값입니다.

📌 해결 방법

Number.isNaN(value)를 사용하여 NaN 여부를 확인합니다.

---

✅ 5. setTimeout 루프의 함정

📌 문제 상황

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 출력: 3, 3, 3

📌 원인

var는 함수 스코프이기 때문에 루프가 끝난 뒤의 값이 출력됩니다.

📌 해결 방법

let을 사용하거나, IIFE를 사용하여 클로저로 변수 값을 고정합니다.

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

---

✅ 결론

자바스크립트는 관대한 문법 덕분에 실수가 발생하기 쉽습니다. 본 글에서 다룬 대표적인 함정들을 숙지해 두면, 실무에서 발생할 수 있는 예기치 않은 동작을 미연에 방지할 수 있습니다.