[JS] 자바스크립트 예외처리

자바스크립트로 코드를 작성하다보면 예외사항을 처리해야 할 때가 있다.
예를들어, 덧셈 기능을 하는 함수에 매개변수로 문자열이 들어온다면 예외를 발생시켜야 한다.
자바스크립트는 문자 + 숫자 연산도 가능하기에 예외처리를 하지 않으면 끔찍한 결과가 나타날 수 있다.
3 + 5 = 8 이지만, '3' + 5 = 35 라는 결과가 나온다.
따라서, 예외적인 상황에서는 적절하게 예외를 발생시켜야 할 필요가 있다.

예외는 throw 를 통해 발생시킬 수 있다. 덧셈함수로 예시를 보자.

function add(a, b){
    if (typeof a !== 'number' || typeof b !== 'number')
        throw '매개변수가 잘못됐어..!'
    return a + b
}

이런식으로 throw 를 통해 예외를 발생시키면 그 아래의 코드는 실행되지 않는다.

위 코드를 add('3', 5) 로 실행시켜 보았다.
다음과 같이 에러가 나타나는 것을 확인할 수 있다.

그런데, 에러메세지를 잘 보면 Uncaught라고 나와있다.
우리가 예외를 발생시키는 것은 성공했지만 어디선가 예외에 대한 처리(Catch)를 해주지 않았기 때문이다.
이 상태로라면 예외가 해결되지 못하여 전체 프로그램이 에러로인해 정상적인 작동을 하지 못할 가능성이 있다.
따라서, 다음과 같이 예외를 잡아줘야한다.

예외가 발생할 가능성이 있는 코드를 try-catch 문을 통해 감싸주면 된다.

try {
  add("3", 5);
} catch (e) {
  console.log(e);
}

이렇게 코드를 작성하면 add함수에서 예외가 발생하더라도 catch문에 잡히고 catch문 내에 있는 로직을 수행하게 된다. 지금은 콘솔로그를 찍었으므로 다음과 같은 메세지가 나온다.

예외를 잡아줬기에 이제 Uncaught라는 메세지는 나오지 않는다.

이렇게만 해도 예외처리는 가능하지만 자바스크립트에는 Error객체가 존재한다.
throw할때 에러 객체를 전달해보자.

function add(a, b) {
  if (typeof a !== "number" || typeof b !== "number")
    throw new Error("매개변수가 잘못됐어..!");
  return a + b;
}

이렇게 Error객체를 전달했을 때는 그냥 문자열을 전달했을 때의 결과와 조금 다르다.

이렇게 에러가 나타난 위치에 대한 정보를 확인할 수 있다. 디버깅을 위해서는 필수적인 정보들이다.
이러한 정보들의 기록이 가능한 이유는 콜스택에서 에러로 인해 함수가 제거될때 그 정보들을 기록하기 때문이다.

콜스택의 개념을 생각해보자.
가장 상단에 있는 함수에서 Error가 발생 했을 때 상단에 있는 함수가 pop되며 Error가 전달된다.
만약 그 아래에 있는 함수가 에러를 Catch한다면 거기서 멈추게 되지만 Catch하지 않는다면 함수의 로직이 정상적으로 작동하지 않고 계속해서 Error가 전달될 것이다. 그리고 이 때의 정보를 Error객체에 담아 보여주는 것이다.

일반적인 상황에서의 예외처리 방법을 다뤄봤다.
하지만, Promise를 사용하는 비동기 상황에서는 예외처리를 위해 조금 더 생각해보아야 할 부분들이 있다.
이건 다음 포스팅에서 다뤄보겠다.