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

자바스크립트는 다양한 기능을 제공하면서도 그만큼 함정도 많은 언어입니다. 이번 7탄에서는 비교적 흔하지만 간과되기 쉬운 동작들, 그리고 예기치 않게 발생하는 오류를 유발하는 문법 사례들을 다룹니다.

---

✅ 1. Boolean([])과 [] == false는 다른 결과를 가진다

📌 문제 상황

Boolean([]);     // true
[] == false;      // true

📌 설명

• Boolean([])는 명시적 변환으로 truthy
• [] == false는 암묵적 형 변환으로 문자열/숫자 변환을 거쳐 true

📌 대처

논리 연산과 비교 연산이 다르게 평가된다는 점을 이해하고, 비교 연산에는 항상 === 사용을 권장합니다.

---

✅ 2. typeof function() {}와 typeof class {}는 다르다

📌 문제 상황

typeof function() {}; // "function"
typeof class {};       // "function"

📌 설명

둘 다 "function"을 반환하지만, 클래스는 내부적으로 constructor 함수로 정의되며, 함수와 다르게 호출할 수 없습니다.

📌 대처

클래스는 new 키워드로만 호출 가능하다는 점에 유의해야 하며, 함수와 클래스의 의도적 차이를 인식하고 사용해야 합니다.

---

✅ 3. forEach는 break, return으로 반복을 중단할 수 없다

📌 문제 상황

[1, 2, 3].forEach((item) => {
  if (item === 2) return; // 현재 반복만 건너뜀
  console.log(item);
});

📌 설명

forEach는 중간에 빠져나올 수 없는 메서드입니다. return은 해당 콜백 함수에서만 작동합니다.

📌 대처

조건부 반복 제어가 필요한 경우 for, for...of, some, every 등을 활용합니다.

---

✅ 4. delete는 객체 프로퍼티에만 사용해야 한다

📌 문제 상황

let x = 1;
delete x; // false

📌 설명

전역 스코프에서 var, let, const로 선언한 변수는 delete로 제거되지 않습니다. 객체 프로퍼티에만 사용 가능합니다.

📌 대처

변수 삭제가 아닌 값 재할당이나 블록 스코프의 활용이 필요합니다.

---

✅ 5. switch 문에서 break를 빠뜨리면 fallthrough 발생

📌 문제 상황

let x = 2;
switch (x) {
  case 1:
    console.log("One");
  case 2:
    console.log("Two");
  case 3:
    console.log("Three");
}
// 출력: "Two", "Three"

📌 설명

break를 명시하지 않으면 다음 case로 계속 실행됩니다.

📌 대처

각 case 블록 마지막에 반드시 break를 추가하거나, 의도적 fallthrough임을 주석으로 명시합니다.

---

✅ 결론

이번 편에서는 비교적 자주 사용되는 기능 속의 함정을 조명했습니다. 논리 평가, 클래스 구문, 반복 제어, delete 키워드, switch 문 등 자주 사용되지만 실수하기 쉬운 코드 패턴을 숙지하는 것은 자바스크립트 실력을 한 단계 끌어올리는 데 도움이 됩니다.