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

이번 8편에서는 자바스크립트 문법 중에서 한눈에 보기에는 명확하지만, 실제 실행 결과는 의외인 사례들을 다룹니다. 이러한 사례들은 코드 리뷰나 디버깅 과정에서도 자주 혼란을 야기하므로 미리 숙지해두면 큰 도움이 됩니다.

✅ 1. null >= 0은 true다

📌 문제 상황

null >= 0; // true
null > 0;  // false

📌 설명

• null >= 0 → Number(null) >= 0 → 0 >= 0 → true
• null > 0 → Number(null) > 0 → 0 > 0 → false

📌 대처

비교 연산에서 null, undefined와 같은 특수 값을 비교할 때는 명시적인 체크가 필요합니다.

---

✅ 2. setTimeout 안에서 this는 다르게 작동함

📌 문제 상황

const obj = {
  name: 'test',
  run: function () {
    setTimeout(function () {
      console.log(this.name); // undefined
    }, 100);
  }
};
obj.run();

📌 설명

setTimeout 내의 this는 전역 객체(window 또는 undefined)이며, obj와 무관합니다.

📌 대처

화살표 함수 또는 .bind(this)를 사용하여 의도한 컨텍스트 유지

---

✅ 3. +[]는 0이다

📌 문제 상황

console.log(+[]); // 0

📌 설명

• []는 ""로 변환
• +""는 0으로 변환됨

📌 대처

암묵적 형변환이 포함된 연산은 명시적 형변환(Number())으로 대체하여 가독성을 높입니다.

---

✅ 4. typeof Symbol() === "symbol"이지만, typeof Symbol === "function"

📌 문제 상황

typeof Symbol(); // 'symbol'
typeof Symbol;   // 'function'

📌 설명

Symbol은 생성자 함수이고, 호출 시 반환하는 값은 symbol 타입입니다. 이 둘을 혼동하면 의도와 다른 타입 체크 오류가 발생할 수 있습니다.

---

✅ 5. Array(3)과 Array.of(3)은 다르다

📌 문제 상황

Array(3);     // [ <3 empty items> ]
Array.of(3);  // [3]

📌 설명

• Array(n)은 n개의 빈 슬롯을 가진 배열 생성
• Array.of(n)은 단일 요소 n을 포함한 배열 생성

📌 대처

초기화된 배열을 원한다면 Array.of 또는 .fill()을 사용하는 것이 더 안전합니다.

---

✅ 결론

이번 편에서도 자바스크립트의 의외성과 관련된 문법을 중점적으로 살펴보았습니다. 특히 비교 연산, this 바인딩, 타입 변환 등의 사례는 초보자뿐만 아니라 숙련된 개발자에게도 혼란을 줄 수 있으므로 반복 학습이 필요합니다.