[javascript] 많이 실수하는 자바스크립트 예외 상황

자바스크립트는 널리 사용되는 프로그래밍 언어 중 하나이지만, 몇 가지 예외 상황에서 실수하기 쉬운 특징을 갖고 있습니다. 이 글에서는 자바스크립트 개발자들이 자주 맞닥뜨리는 몇 가지 예외 상황을 살펴보겠습니다.

1. 변수 스코프 이해하기

자바스크립트에서 변수의 스코프는 중요한 개념 중 하나입니다. var 키워드를 이용해 선언된 변수는 함수 스코프를 가지기 때문에, 코드 블록 안에서 선언된 변수가 함수 전체에서 접근 가능하다는 사실을 잘 이해해야 합니다. 또한, 변수의 스코프를 고려하지 않고 선언하면 의도치 않은 결과를 초래할 수 있습니다.

function example() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10
}

위 예제에서 if 문 블록 안에서 선언된 변수 x는 해당 함수의 전체 스코프에서 접근 가능합니다. 이런 스코프의 특성을 이해하지 못하면 예상치 못한 결과를 얻을 수 있습니다.

2. 타입 변환 주의하기

자바스크립트는 동적 타입 언어로, 변수의 타입이 자동으로 변환되는 특징을 갖고 있습니다. 이러한 동작은 초보 개발자들에게 혼란을 줄 수 있습니다. 때로는 자동 타입 변환으로 인해 예기치 않은 결과를 얻을 수 있기 때문에, 타입 변환에 주의해야 합니다.

console.log(1 + '2');   // '12'
console.log(1 - '2');   // -1
console.log(1 * '2');   // 2
console.log(1 / '2');   // 0.5

위 예제에서는 숫자와 문자열의 연산을 보여줍니다. 숫자와 문자열의 연산은 자바스크립트 엔진에 의해 자동으로 타입이 변환되어 실행됩니다. 이러한 동작을 이해하지 못하면 예기치 못한 결과를 얻을 수 있습니다.

3. 비동기 처리 이슈

자바스크립트에서 비동기 처리는 일상적인 작업 중 하나입니다. setTimeout 함수, AJAX 요청, Promise 등을 사용하여 비동기적인 작업을 처리할 수 있습니다. 그러나 비동기 처리의 특성을 이해하지 못하면 버그가 발생할 수 있습니다.

console.log(1);
setTimeout(function() {
    console.log(2);
}, 0);
console.log(3);

위 예제에서 setTimeout 함수를 사용하여 0ms 후에 로그를 출력하도록 설정했습니다. 하지만 로그를 확인하면 1, 3, 2 순서로 출력됩니다. 이는 setTimeout 함수에 전달된 콜백 함수가 비동기적으로 실행되기 때문입니다. 이러한 비동기 처리 특성을 이해하지 못하면 코드 실행 순서를 제어하기 어려울 수 있습니다.

결론

자바스크립트는 강력하고 유연한 언어이지만, 몇 가지 예외 상황에서 실수하기 쉬운 특징을 가지고 있습니다. 변수 스코프, 타입 변환, 비동기 처리와 같은 주요 개념을 잘 이해하고, 이를 고려하여 코드를 작성해야 합니다. 이를 통해 예상치 못한 버그와 실수를 최소화할 수 있습니다.

참고자료: