| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
- useRef
- 프로그래머스
- 알고리즘
- 공식문서
- next.js
- 모던 딥 다이브 자바스크립트
- 내일배움카드
- 패스트캠퍼스
- 코딩테스트
- TypeScript
- 메가바이트스쿨
- 자료구조
- 개발 공부
- styled-components
- MegabyteSchool
- 이벤트
- 모던 자바스크립트 딥 다이브
- Github
- react
- 자바스크립트
- 개발자취업부트캠프
- 비전공자
- 입문
- GIT
- JavaScript
- 리액트
- CSS
- 프론트엔드
- useMemo
- 국비지원교육
- Today
- Total
개발 기록 남기기✍️
[Deep Dive] 47장 - 에러 처리 본문
이 카테고리는 모던 자바스크립트 Deep Dive 책을 공부하며 정리한 글을 포스팅하는 공간입니다.
47.1 에러 처리의 필요성
에러나 예외적인 상황에 대응하지 않으면 프로그램은 강제 종료된다.
에러가 발생하지 않는 코드를 작성하는 것이 이상적이지만 사실상 불가능하다. 따라서 작성한 코드에서 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요하다.
47.2 try ... catch ... finally 문
try ... catch ... finally 문은 에러 처리라고 한다. finally 문은 불필요하다면 생략 가능하다.
try {
// 실행할 코드(에러가 발생할 가능성이 있는 코드)
foo();
} catch (err) {
// try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행된다.
// err에는 try 코드 블록에서 발생한 Error 객체가 전달된다.
console.log(error)(err); // ReferenceError: foo is not defined
} finally {
// 에러 발생과 상관없이 반드시 한 번 실행된다.
console.log('finally');
}
try 코드 블록이 먼저 실행된다. 이때 try 코드 블록에 포함된 문 중에서 에러가 발생하면 발생한 에러는 catch 문의 err 변수에 전달되고 catch 코드 블록이 실행된다. catch문의 err 변수는 try 코드 블록에 포함된 문 중에서 에러가 발생하면 생성되고 catch 코드 블록에서만 유효하다. finally 코드 블록은 에러 발생과 상관없이 반드시 한 번 실행된다.
47.3 Error 객체
Error 생성자 함수는 에러 객체를 생성한다. Error 생성자 함수에는 에러를 상세히 설명하는 에러 메시지를 인수로 전달할 수 있다.
const error = new Error('invalid');
Error 생성자 함수가 생성한 에러 객체는 message 프로퍼티와 stack 프로퍼티를 갖는다. message 프로퍼티의 값은 Error 생성자 함수에 인수로 전달한 에러 메시지이고, stack 프로퍼티의 값은 에러를 발생시킨 콜 스택으 ㅣ호출 정보를 나타내는 문자열이며 디버깅 목적으로 사용한다.
Error 생성자 함수
| 생성자 함수 | 인스턴스 |
| Error | 일반적 에러 객체 |
| SyntaxError | 자바스크립트 문법에 맞지 않는 문을 해석할 때 발생하는 에러 객체 |
| ReferenceError | 참조할 수 없는 식별자를 참조했을 때 발생하는 에러 객체 |
| TypeError | 피연산자 또는 인수의 데이터 타입이 유효하지 않을 때 발생하는 에러 객체 |
| RangeError | 숫자값의 허용 범위를 벗어났을 때 발생하는 에러 객체 |
| URIError | encodeURI 또는 decodeURI 함수에 부적절한 인수를 전달했을 때 발생하는 에러 객체 |
| EvalError | eval 함수에서 발생하는 에러 객체 |
47.4 throw 문
에러를 발생시키려면 try 코드 블록에서 throw 문으로 에러 객체를 던져야 한다. 에러를 던지면 catch문의 에러 변수가 생성되고 던져진 에러 객체가 할당된다. 그리고 catch 코드 블록이 실행되기 시작한다.
try {
// 에러 객체를 던지면 catch 코드 블록이 실행되기 시작한다.
throw new Error('something wrong');
} catch (error) {
console.log(error);
}
47.5 에러의 전파
에러는 호출자 방향으로 전파된다. 즉, 콜 스택의 아래 방향(실행 중인 컨텍스트가 푸시되기 직전에 푸시된 실행 텍스트 방향)으로 전파된다.
const foo = () => {
throw Error('foo에서 발생한 에러'); // ④
};
const bar = () => {
foo(); // ③
};
const baz = () => {
bar(); // ②
};
try {
baz(); // ①
} catch (err) {
console.error(err);
}
①에서 baz 함수를 호출하면 ②에서 bar 함수가 호출되고 ③에서 foo함수가 호출되고 foo 함수는 ④에서 에러를 throw한다. 이때 foo 함수가 throw한 에러는 다음과 같이 호출자에게 전파되어 전역에서 캐치된다.
이처럼 throw된 에러를 캐치하지 않으면 호출자 방향으로 전파된다. 이때 throw된 에러를 캐치하여 적절히 대응하면 프로그램을 강제 종료시키지 않고 코드의 실행 흐름을 복구할 수 있다.
주의할 것은 비동기 함수인 setTimeout이나 프로미스 후속 처리 메서드의 콜백 함수는 호출자가 없다는 것이다. 즉, 호출자 함수가 실행 컨텍스트가 삭제되고(컨텍스트 스택이 비어있다는 의미) 비동기 함수가 동작하기 때문에 전파할 호출자가 없어서 에러 처리가 힘들다.
'Front-End > 숨참고 Deep Dive🏊♀️' 카테고리의 다른 글
| [Deep Dive] 49장 - Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 (0) | 2023.02.26 |
|---|---|
| [Deep Dive] 48장 - 모듈 (0) | 2023.02.25 |
| [Deep Dive] 46장 - 제너레이터와 async/await (0) | 2023.02.20 |
| [Deep Dive] 45장 - Promise (0) | 2023.02.19 |
| [Deep Dive] 44장 - REST API (0) | 2023.02.13 |