Programming/JS

[Javascript] 예외 처리

w00se 2022. 2. 21. 18:18

Javascript 에러는 어떤 것들이 있나?

  • MDN - Erorr
  • 대표적으로 Erorr 생성자가 있고 그 이외 주요 오류는 SyntaxError, ReferecneError, TypeError, RangeError, URIError, EvalError 등이 있다.

에러 처리를 하지 않으면?

→ 프로그램이 강제 종료된다.

  • 에러를 처리한 경우
try {
  const arr = null;
  arr[0];
} catch (err) {
  console.log('에러: ', err); // TypeError 발생
}

console.log('여기까지 실행이 되나?'); // 실행됨
  • 에러를 처리하지 않는 경우
const arr = null;
arr[0]; // 여기서 코드 실행 종료

console.log('여기까지 실행이 되나?');

try ... catch ... finally 구문 - 에러를 처리하는 대표적인 방법

try { 
    // 실행할 코드 영역
    const arr = null;
    arr[0]; // 에러 발생 코드, 여기서 바로 catch 구문으로 Jump!
    console.log('여기는 실행이 안됨'); 
} catch (err) { 
    // 에러 발생시 처리 영역
    console.log('에러: ', err);
} finally {
    console.log('여기는 에러 발생 여부와 관계없이 반드시 실행되는 부분');
}

옵셔널 체이닝 - 참조 값이 null 또는 undefined 인경우 에러 처리 방법

Error 객체

const testError = new Error('이건 테스트 에러');

// 에러 종류: 에러 메시지 /n 에러 발생 위치 정보
// 출력 예시
// Error 이건 테스트 에러
// ~~ 에러 위치 정보 ~~~
console.log(testError);

// 에러 메시지만 출력
// 출력 예시: 이건 테스트 에러
console.log(testError.message);
  • Error를 제외한 다른 에러들도 생성자가 존재한다.(ex. SyntaxError, ReferecneError)
    • 예외에 맞는 에러를 발생시킬 수 있다.
const syntaxError = new SyntaxError('syntax 에러');
console.log(syntaxError);

const referenceError = new ReferenceError('reference 에러');
console.log(referenceError);

const typeError = new TypeError('type 에러');
console.log(typeError);

const rangeError = new RangeError('range 에러');
console.log(rangeError);

const uriError = new URIError('URI 에러');
console.log(uriError);

const evalError = new EvalError('Eval 에러');
console.log(evalError);

throw 문

  • 에러를 생성하는 것과 발생시키는 것은 다르다.
  • throw 문을 이용해야 에러를 발생시킬 수 있다. 즉, try ... catch 구문의 catch 블록이 실행된다.
  • 예시
try { 
    console.log('여기는 실행됨');
    throw new Error('testErorr'); // 에러를 발생시키고 catch 블록으로 이동
    console.log('여기는 실행이 안됨');
} catch (err) { 
    console.log(err.message);
}

검증 함수

  • 검증 함수 이름 컨벤션
    • isXXX()
    • shouldXXX()
    • canXXX()
    • checkXXX()
  • 위 함수들은 boolean 값을 반환하기를 기대합니다.

주관적인 깔끔한 에러 처리 방식

  • try ... catch 구문과 throw new Error 구문을 적절히 이용하는 방법
const isEmptyName = (carName) => carName === '';

const isValidLength = (carName) => carName.length <= 5;

const validator = {
  validateCarName: (carName) => {
    if (isEmptyName(carName)) {
      throw Error('자동차 이름은 빈 값을 입력할 수 없습니다.');
    }

    if (isValidLength(carName)) {
      throw Error('자동차 이름은 5자 이하여야 합니다.');
    }
  },
};

try {
  const testCarName = 'abcdef';

  validator.validateCarName(testCarName);

  console.log('입력된 자동차 이름: ', testCarName);
} catch (err) {
  console.log(err.message);
}

참고 자료

  • MDN Docs
  • 모던 Javascript Deep Dive - 이웅모 저