에러 처리

에러 처리의 필요성

에러가 발생하지 않는 코드를 작성하는 것은 불가능에 가깝다. 따라서 에러는 언제나 발생할 수 있으며, 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다.

console.log('[Start]');

foo(); // ReferenceError: foo is not defined
// 발생한 에러를 방치하면 프로그램은 강제 종료된다.

// 에러에 의해 프로그램이 강제 종료되어 아래 코드는 실행되지 않는다.
console.log('[End]');

 

try...catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속 코드를 실행시킬 수 있다.

console.log('[Start]');

try {
  foo();
} catch (error) {
  console.error('[에러 발생]', error);
  // [에러 발생] ReferenceError: foo is not defined
}

// 발생한 에러에 적절한 대응을 하면 프로그램이 강제 종료되지 않는다.
console.log('[End]');

 

직접적으로 에러를 발생하지 않는 예외적인 상황이 발생할 수 있다. 이러한 상황도 적절히 대응해야 한다.

// DOM에 button 요소가 존재하지 않으면 querySelector 메서드는 에러를 발생시키지 않고 null을 반환한다.
const $button = document.querySelector('button'); // null

$button.classList.add('disabled');
// TypeError: Cannot read property 'classList' of null

const $elem = document.querySelector('#1');
// DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector.

 

이때 if 문으로 값을 확인하거나 단축 평가 또는 옵셔널 체이닝 연산자 ?.를 사용하지 않으면 다음 처리에서 에러로 이어질 가능성이 크다.

// DOM에 button 요소가 존재하는 경우 querySelector 메서드는 에러를 발생시키지 않고 null을 반환한다.
const $button = document.querySelector('button'); // null
$button?.classList.add('disabled');

 

 

try...catch...finally 문

기본적으로 에러 처리를 구현하는 방법은 크게 두 가지가 있다.

1. if 문, 단축 평가 또는 옵셔널 체이닝 연산자를 통해 확인해서 처리하는 방법
2. try...catch...finally 문을 이용한 에러 처리 방법

console.log('[Start]');

try {
  // 실행할 코드(에러가 발생할 가능성이 있는 코드)
  foo();
} catch (err) {
  // try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행된다.
  // err에는 try 코드 블록에서 발생한 Error 객체가 전달된다.
  console.error(err); // ReferenceError: foo is not defined
} finally {
  // 에러 발생과 상관없이 반드시 한 번 실행된다.
  console.log('finally');
}

// try...catch...finally 문으로 에러를 처리하면 프로그램이 강제 종료되지 않는다.
console.log('[End]');

 

• try 코드 블록에 포함된 문 중에서 에러가 발생하면 발생한 에러는 catch문의 매개 변수에 전달되고 catch 코드 블럭이 실행
• catch 문의 매개 변수(나는 err 로 많이 사용한다...)는 try 코드 블럭에 포함된 문 중에서 에러가 발생하면 생성되고 catch 코드 블럭에서만 유효하다.
• finally 코드 블럭은 에러 발생과 상관없이 반드시 한 번 실행된다.

 

Error 객체

Error 생성자 함수는 에러 객체를 생성하며 에러를 상세히 설명하는 에러 메시지를 인수로 전달할 수 있다.

1 @ 1;    // SyntaxError: Invalid or unexpected token
foo();    // ReferenceError: foo is not defined
null.foo; // TypeError: Cannot read property 'foo' of null
new Array(-1); // RangeError: Invalid array length
decodeURIComponent('%'); // URIError: URI malformed

 

Error 생성자 함수가 생성한 에러 객체는 message 프로퍼티와 stack 프로퍼티를 갖는다.

message 프로퍼티	Error 생성자 함수에 인수로 전달한 에러 메시지
stack 프로퍼티	에러를 발생시킨 콜 스택의 호출 정보를 나타내는 문자열이며 디버깅 목적으로 사용

 

 

throw 문

Error 생성자 함수로 에러객체를 생성한다고 에러가 발생하는 것이 아니다. 에러 객체 생성과 에러 발생은 의미가 다르기에 에러를 발생시키려면 throw 문으로 에러 객체를 던져야 한다.

try {
  // 에러 객체를 던지면 catch 코드 블록이 실행되기 시작한다.
  throw new Error('something wrong');
} catch (error) {
  console.log(error);
}

 

외부에서 전달받은 콜백 함수를 n번 만큼 호출하는 repeat 함수를 구현해보자.

// 외부에서 전달받은 콜백 함수를 n번만큼 반복 호출한다
const repeat = (n, f) => {
  // 매개변수 f에 전달된 인수가 함수가 아니면 TypeError를 발생시킨다.
  if (typeof f !== 'function') throw new TypeError('f must be a function');

  for (var i = 0; i < n; i++) {
    f(i); // i를 전달하면서 f를 호출
  }
};

try {
  repeat(2, 1); // 두 번째 인수가 함수가 아니므로 TypeError가 발생(throw)한다.
} catch (err) {
  console.error(err); // TypeError: f must be a function
}

 

 

에러의 전파

이전의 프로미스를 정리한 글에서 살펴본 바와 같이 에러는 콜 스택의 아래 방향으로 전파된다.

const foo = () => {
  throw Error('foo에서 발생한 에러'); // ④
};

const bar = () => {
  foo(); // ③
};

const baz = () => {
  bar(); // ②
};

try {
  baz(); // ①
} catch (err) {
  console.error(err);
}

 

1번에서 baz 함수를 호출 → 2번에서 bar 함수가 호출 → 3번에서 foo 함수가 호출 → 4번에서 에러를 throw한다.

 

이때 foo 함수가 throw한 에러는 foo → bar → baz → 전역 실행 컨텍스트 방향으로 에러는 전파된다.

 

Promise에서는 then의 두 번째 콜백 혹은 catch 메서드로 에러 처리가 가능하다.

비동기 함수와 async/await의 경우는 try...catch...finally를 이용해 에러 처리가 가능하다.