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

자바스크립트의 독특한 문법과 유연성은 강력한 도구이지만, 예상과 다른 결과를 유발하기도 합니다. 이번 4탄에서는 자바스크립트 문법 중에서도 더욱 사소해 보이지만 실무에서 문제를 일으킬 수 있는 함정들을 소개합니다.

---

✅ 1. this의 동적 바인딩

📌 문제 상황

const obj = {
  name: 'JS',
  getName: function () {
    return this.name;
  }
};

const getName = obj.getName;
console.log(getName()); // undefined (엄격 모드에선 error)

📌 설명

this는 호출 방식에 따라 동적으로 결정됩니다. 위 코드에서 getName은 객체에서 분리되었기 때문에 this는 전역 객체를 참조하게 됩니다.

📌 대처

.bind(), 화살표 함수 또는 call, apply 사용으로 명시적 바인딩을 적용해야 합니다.

---

✅ 2. isNaN의 이상한 판단

📌 문제 상황

isNaN("abc"); // true

📌 설명

isNaN은 내부적으로 Number()로 형 변환 후 NaN 여부를 확인하므로 예기치 않은 true를 반환할 수 있습니다.

📌 대처

항상 Number.isNaN()을 사용하는 것이 안전합니다.

---

✅ 3. +true는 1이다

📌 문제 상황

console.log(+true); // 1
console.log(+false); // 0

📌 설명

+ 단항 연산자는 피연산자를 숫자로 변환합니다. 이처럼 불리언 값도 산술 연산에 사용되면 암묵적 형 변환이 일어납니다.

📌 대처

명시적 변환 (Number(true)) 또는 타입 체크를 통해 코드 가독성과 안정성을 확보해야 합니다.

---

✅ 4. return과 세미콜론 자동 삽입

📌 문제 상황

function test() {
  return
  {
    key: 'value'
  };
}

console.log(test()); // undefined

📌 설명

자바스크립트는 줄바꿈 후 세미콜론을 자동 삽입합니다. return 다음에 줄바꿈이 있으면 바로 반환되어 실제 객체는 반환되지 않습니다.

📌 대처

return 키워드와 반환값은 같은 줄에 위치시키는 것이 안전합니다.

---

✅ 5. function 선언의 호이스팅과 초기화

📌 문제 상황

sayHi(); // 정상 동작
function sayHi() {
  console.log('Hello');
}

sayBye(); // TypeError: sayBye is not a function
var sayBye = function() {
  console.log('Bye');
};

📌 설명

함수 선언(function)은 전체 스코프로 호이스팅되어 바로 호출 가능하지만, 함수 표현식(var)은 변수 선언만 올라가고 함수 정의는 런타임에 할당됩니다.

📌 대처

초기화를 명확히 구분하고, 가능하면 const 또는 let으로 함수 표현식을 선언합니다.

---

✅ 결론

자바스크립트는 작동 방식이 직관적이지 않은 부분이 많습니다. 특히 this, 형 변환, 세미콜론 자동 삽입 등은 주의하지 않으면 버그로 이어질 수 있습니다. 이러한 특성들을 잘 이해하고 의식적으로 작성하는 습관을 가지는 것이 안정적인 코드 작성을 위한 첫걸음입니다.