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 구문 - 에러를 처리하는 대표적인 방법
- MDN - try ... catch
- 해당 질문 글에 의하면 try ... catch 구문은 런타임에 발생한 에러만 처리할 수 있다.
- 예시
try {
// 실행할 코드 영역
const arr = null;
arr[0]; // 에러 발생 코드, 여기서 바로 catch 구문으로 Jump!
console.log('여기는 실행이 안됨');
} catch (err) {
// 에러 발생시 처리 영역
console.log('에러: ', err);
} finally {
console.log('여기는 에러 발생 여부와 관계없이 반드시 실행되는 부분');
}
옵셔널 체이닝 - 참조 값이 null 또는 undefined 인경우 에러 처리 방법
Error 객체
- MDN - Error() 생성자
- Erorr 생성자를 통해 에러를 생성할 수 있다.
- 예시
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 - 이웅모 저
'Programming > JS' 카테고리의 다른 글
[Javascript] Eslint 설정 파일 옵션 env, parserOptions (0) | 2022.04.21 |
---|---|
[Javascript] 타이머 함수 (0) | 2022.02.21 |
[Javascript] 정보 은닉 (0) | 2022.02.20 |
[Javascript] 탭 이동 효과 구현하기 (0) | 2021.12.21 |
[Javascript] Eslint와 prettier 설치 및 vscode 에러 해결법 (2) | 2021.12.10 |