11-1. JavaScript 에러 핸들링

I. 에러 핸들링 (error handling) 의 필요성

 

에러/에러 error 발생에 대비하지 않으면 프로그램이 종료됨

console.log('에러 발생 전');		// 여기까지만 실행됨

// ⚠️ 오류를 발생시키는 코드
(3).split('');

// 출력되지 않음
console.log('에러 발생 후');

 

 

 

II. 자바스크립트의 에러 핸들링

 

1. try ... catch 문

console.log('에러 발생 전');

try {
  (3).split('');

} catch (e) {
  console.error('🛑 에러!!', e);
}

console.log('에러 발생 후');

✨try 블록

 - 에러 발생 여지가 있는 코드 포함

 - 이곳에서 발생한 에러는 프로그램을 멈추지 않음

 

✨catch 블록

 - 에러 발생시 실행할 코드 포함

 - 발생한 오류 객체를 인자로 받음

 

 

 

2. try ... catch ... finally 문

function connect () { console.log('☀️', '통신 연결'); }
function disconnect () { console.log('🌙', '통신 연결 해제'); }
function sendArray (arr) { console.log('전송', arr); }

function sendStringAsArray (str) {
  connect();

  try {
    sendArray(str.split(''));
    return true;

  } catch (e) {
    console.error('🛑 에러!!', e);
    return false;

  } finally {
    // 💡 전송 성공 여부와 관계없이 연결은 끊어야 함
    disconnect();
    console.log('- - - - - - - -');
  }

  // ❓ 이곳에 넣는 것과 무엇이 다른가?
  // 아래로 대체하여 실행해 볼 것
  // disconnect();
  // console.log('- - - - - - - -');
}

['ABC', '가나다', 123, '123'].forEach(i => {
  console.log(
    sendStringAsArray(i) 
    ? '[성공]' : '[실패]', '\n\n'
  );
});

✨finally 블록

 - 오류가 발생 여부와 관계없이 한 번 실행되는 코드 포함

 - 위와 같은 경우 널리 사용

 - try 나 catch 문에 return이 있더라도 반드시 실행!!

 

 

 

III. Error 객체

- 에러 발생 시 던져지는 thrown 객체

- 에러에 대한 정보를 담고 있음

- 에러가 발생하지 않아도, 직접 생성하여 던지기 가능

 

1. 기본 생성과 사용

const error = new Error('뭔가 잘못됐어');

console.error(error);

// 두 번째 인자로 이유를 명시할 수도 있음
const error = new Error(
  '뭔가 잘못됐어',
  { cause: '뭘 잘못했으니까' }
);

console.error(error);

 

- 기본 인스턴스 프로퍼티와 메서드

console.log(error.name);
console.log(error.message);

// cause를 입력했을 경우
console.log(error.cause);

 

✨의도적으로 에러 발생시키기

throw new Error('이유를 묻지 마라');

 

 

2. 에러의 여러 종류

아래 에러들은 모두 Error 부터 상속받음

- 어떤 문제에 의한 에러인지 쉽게 식별 가능하도록 함

- 기타 에러 유형 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error#%EC%98%A4%EB%A5%98_%EC%9C%A0%ED%98%95

 

✨오류 종류에 따라 대처하기

errorFuncs.forEach(func => {
  try {
    func();

  } catch (e) {
    if (e instanceof TypeError) {
      console.error('자료형 확인하세요.');
      return;
    }
    if (e instanceof ReferenceError) {
      console.error('선언 안 된 거 쓴 거 없는지 확인하세요.');
      return;
    }
    console.error('아니, 뭘 한 거에요?');
  }
});

 

 

 

IV. 에러 버블링 (error bubbling)

 

다른 함수를 호출했을 때

- 에러 발생 시 해당 함수에서 잡지 않으면 호출한 곳으로 던져짐

- 다중 호출 시 에러를 핸들링하는 코드가 있는 호출자까지 전달

function func1 () {
  throw new Error('에러');
}

function func2 () {
  func1();
}

function func3 () {
  func2();
}

function func4 () {
  try {
    func3();

  } catch (e) {
    console.error(e);
  }
  console.log('실행완료');
}

func4();

✨에러는 가능한 발생한 곳 가까이에서 처리하는 것이 좋음