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

자바스크립트의 유연한 문법은 개발자에게 자유를 주는 동시에, 예상치 못한 함정을 만들어내기도 합니다. 이번 편에서는 실무에서 종종 발견되지만 이해하지 않으면 의도치 않은 결과를 초래할 수 있는 자바스크립트 문법 사례들을 추가로 소개합니다.

---

✅ 1. [] + [] 는 왜 빈 문자열이 되는가?

📌 문제 상황

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

📌 원인

자바스크립트에서 + 연산자는 피연산자가 문자열이면 문자열 덧셈을 수행합니다. 배열은 기본적으로 문자열로 변환되며, [].toString()은 빈 문자열 ''이므로 결과도 ''입니다.

📌 대처

연산 전에 명확한 형 변환을 적용하거나, 타입을 정확히 확인합니다.

---

✅ 2. parseInt('08')는 왜 8이 아닌가?

📌 문제 상황

parseInt('08');  // 결과: 8 (현대 브라우저 기준)
parseInt('08', 10); // 명시적 권장

📌 설명

과거 자바스크립트에서는 parseInt('08')는 8진수로 해석되어 0이 되는 경우가 있었습니다. 이를 방지하기 위해 항상 **두 번째 인자에 진수(10)**를 명시하는 습관이 필요합니다.

---

✅ 3. delete는 배열 요소를 삭제하지 않는다

📌 문제 상황

const arr = [1, 2, 3];
delete arr[1];
console.log(arr); // [1, empty, 3]

📌 원인

delete는 객체 속성을 제거하는 연산자입니다. 배열 요소를 제거해도 인덱스 자체는 유지되어 "구멍"이 생깁니다.

📌 해결 방법

arr.splice(1, 1); // [1, 3]

---

✅ 4. typeof NaN === 'number'

📌 문제 상황

typeof NaN; // 'number'

📌 설명

NaN은 "Not a Number"라는 의미지만, 자바스크립트에서는 number 타입에 속하는 특수한 값입니다. 계산 오류로 인해 발생할 수 있으며, 값 확인은 Number.isNaN()을 사용합니다.

---

✅ 5. arguments는 Arrow Function에서 동작하지 않는다

📌 문제 상황

const fn = () => {
  console.log(arguments);
};
fn(1, 2, 3); // ReferenceError

📌 설명

화살표 함수는 자신의 arguments 객체를 갖지 않으며, 부모 함수의 스코프를 참조합니다.

📌 해결 방법

일반 함수 표현식 사용:

function fn() {
  console.log(arguments);
}

---

✅ 결론

자바스크립트는 개발자에게 강력한 표현력을 제공하지만, 기본 문법과 작동 방식을 정확히 이해하지 않으면 오류로 이어질 수 있습니다. 위에서 소개한 사례들은 코드 리뷰나 디버깅 시 반드시 체크해야 할 부분들이며, 실전에서 자주 마주칠 수 있으므로 숙지해 두는 것이 좋습니다.