Post

[모던 자바스크립트 Deep Dive]47장 에러 처리

Posted
By your_full_name 8 min read

47.1 에러 처리의 필요성

  • 에러에 대해 대처하지 않는 경우 ⇒ 프로그램 강제 종료

    1
2
3
4
5
6
7

      console.log('[Start]'); // [Start]
    
  foo(); // ReferenceError: foo is not defined
  // 발생한 에러를 방치하면 프로그램은 강제 종료된다.
    
  // 에러에 의해 프로그램이 강제 종료되어 아래 코드는 실행되지 않는다.
  console.log('[End]');

    • try...catch문으로 에러에 대응하여 프로그램 강제 종료 없이 계속 코드를 실행시킬 수 있다.

      1
2
3
4
5
6
7
8
9
10
11

        console.log('[Start]'); // [Start]
        
  try {
    foo();
  } catch (error) {
    console.error('[에러 발생]', error);
    // [에러 발생] ReferenceError: foo is not defined
  }
        
  // 발생한 에러에 적절한 대응을 하면 프로그램이 강제 종료되지 않는다.
  console.log('[End]'); // [End]
  • 직접적으로 에러를 발생시키지 않는 예외적인 상황

    • 대응하지 않으면 에러로 이어질 수 있다.

      1
2
3
4
5
6

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

    • 이 또한 적절히 대응해야 한다.

      1
2
3
4

        // DOM에 button 요소가 존재하는 경우 querySelector 메서드는 
  // 에러를 발생시키지 않고 null을 반환한다.
  const $button = document.querySelector('button'); // null
  $button?.classList.add('disabled');
  • 에러나 예외적인 상황에 대응해야 원인 파악과 해결이 원활해 진다.

47.2 try...catch...finally문

  • 에러 처리 구현 방법
    1. 예외적인 상황이 발생하면 반환하는 값(null 또는 -1)을 확인
      1. if문이나 단축 평가 또는 옵셔널 체이닝 연산자 활용
    2. 에러 처리(error handling) 코드를 미리 등록
      1. 에러 발생 시 에러 처리 코드로 점프
      2. 예) try...catch...finally문

  • try...catch...finally문

    1
2
3
4
5
6
7
8

      try {
  	// 실행할 코드
  } catch (err) {
  	// try 코드 블록에서 에러 발생 시 실행
  	// try 코드 블록에서 발생한 Error 객체가 err로 전달
  } finally {
  	// 에러 발생과 상관 없이 한 번 실행
  }

  • 예시

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

      console.log('[Start]'); // [Start]
    
  try {
    // 실행할 코드(에러가 발생할 가능성이 있는 코드)
    foo();
  } catch (err) {
    // try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행된다.
    // err에는 try 코드 블록에서 발생한 Error 객체가 전달된다.
    console.error(err); // ReferenceError: foo is not defined
  } finally {
    // 에러 발생과 상관없이 반드시 한 번 실행된다.
    console.log('finally'); // finally
  }
    
  // try...catch...finally 문으로 에러를 처리하면 프로그램이 강제 종료되지 않는다.
  console.log('[End]'); // [End]

47.3 Error 객체

  • Error 생성자 함수
    • 에러 객체 생성

    • 인수로 에러를 설명하는 에러 메세지 전달 가능

      1

        const error = new Error('invalid');
    • message 프로퍼티: Error 생성자 함수에 인수로 전달한 에러 메세지
    • stack 프로퍼티: 에러를 발생시킨 콜스택의 호출 정보를 나타내는 문자열
      • 디버깅 목적으로 사용
  • 에러 객체를 생성할 수 있는 생성자 함수
    • Error 생성자 함수를 제외하고 모두 Error.prototype을 상속받는다.
    생성자 함수인스턴스
    Error일반적 에러 객체
    SyntaxError자바스크립트 문법에 맞지 않는 문을 해석할 때 발생하는 에러 객체
    ReferenceError참조할 수 없는 식별자를 참조했을 때 발생하는 에러 객체
    TypeError피연산자 또는 인수의 데이터 타입이 유효하지 않을 때 발생하는 에러 객체
    RangeError숫자값의 허용 범위를 벗어났을 때 발생하는 에러 객체
    URIErrorencodeURI 또는 decodeURI 함수에 부적절한 인수를 전달했을 때 발생하는 에러 객체
    EvalErroreval 함수에서 발생하는 에러 객체
    1
2
3
4
5

      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

47.4 throw문

  • throw 표현식
    • 표현식은 어떤 값이라도 상관 없지만 일반적으로 에러 객체 지정

  • 에러 객체 생성 ≠ 에러 발생

    1
2
3
4
5
6
7

      try {
    // 에러 객체를 생성한다고 에러가 발생하는 것은 아니다.
    new Error('something wrong');
  	console.log('good'); // good
  } catch (error) {
    console.log(error); 
  }

  • try 코드 블록에서 throw문으로 에러 객체를 던짐 ⇒ 에러 발생

    1
2
3
4
5
6
7

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

  • 예시

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

      // 외부에서 전달받은 콜백 함수를 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
  }
    • repeat 함수는 에러를 발생시킬 가능성이 있으므로 try 코드 블록 내부에서 호출

47.5 에러의 전파

  • 에러는 호출자 방향으로 전파 ⇒ 콜 스택의 아래 방향으로 전파

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

      const foo = () => {
    throw Error('foo에서 발생한 에러'); 
  };
    
  const bar = () => {
    foo();
  };
    
  const baz = () => {
    bar(); 
  };
    
  try {
    baz(); 
  } catch (err) {
    console.error(err); // Error: foo에서 발생한 에러
  }
    • 전역에서 에러가 캐치된다.
  • throw된 에러를 어디에서도 캐치하지 않으면 프로그램은 강제 종료된다.
  • 주의) 비동기 함수인 setTimeout이나 프로미스 후속 처리 메서드의 콜백 함수는 호출자가 없으므로 에러를 전파할 호출자가 존재하지 않는다.
book_notes
모던 자바스크립트 Deep Dive
This post is licensed under CC BY 4.0 by the author.