[JavaScript] 올바른 try...catch 사용 (feat. await의 비밀)

올바른 try...catch 사용법

try..catch 문은 JavaScript에서 예외 처리를 위해 사용되는 구문이다. try 블록 내에서 예외가 발생할 수 있는 코드를 작성하고, catch 블록은 예외가 발생한 경우 해당 예외를 처리하는 코드를 작성한다. 특히 비동기 작업에서 많이 사용되는데 asycn/await에서 try..catch를 사용할 때 주의해야 할 점을 알아보자.

잘못된 예

const wrongExample = () => {
	try {
		axios.get("http://qqqqqq.com"); // 오류를 일이키는 요청
	} catch (error) {
		console.log("에러 발생");
	}
};

wrongExample();

위 코드를 실행시키면 catch 문에서 오류를 검출할 수 없다 그 이유는 무엇일까? 그 이유는 저 함수가 실행되면 wrongExample 함수는 CallStack에 들어가고 그후 Promise인 axios 요청은 Microtask Queue에 들어간다. 그후 wrongExample 함수는 catch 문을 실행하기 전에 CallStack에서 제거되고 결국 CallStack 다음으로 실행되는 Microtask Queue에 있는 Promise가 실행되기 때문에 오류를 일이키는 요청을 검출할 수 없는 것이다.

좋은 예

const goodExample = async () => {
	try {
		await axios.get("http://qqqqqq.com"); // 오류를 일이키는 요청
	} catch (error) {
		console.log("에러 발생");
	}
};

goodExample();

위 잘못된 예의 문제를 해결하기 위해서는 오류를 일으키는 요청 앞에 await을 써주면 된다. 실행 과정은 다음과 같다.
1. goodExample 함수가 실행되고 CallStack에 쌓인다.
2. Promise인 axios 요청이 Microtask Queue에 들어간다.
3. axios 요청 앞에 있는 await 때문에 goodExample 함수는 현재의 실행 컨텍스트를 유지한 채로 CallStack에서 Microtask Queue으로 이동한다.
4. Microtask Queue에서 제일 앞에 있는 axios가 실행되고 오류를 일으키고 Microtask Queue에서 제거된다.
5. 그후 Microtask Queue에 있던 goodExample 함수가 이어서 실행되고 오류가 catch 문에 검출된다.

즉, await는 정확히 말하면 뒤에 것을 기다리는 것이 아니다. Promise가 마이크로큐에 들어가고 await가 마이크로큐에 들어간 것이다. 그리고 이것을 자바스크립트 엔진을 큐에 들어간 순서대로 실행하는 것일 뿐이다.