JavaScript:
에러 처리하기

어떻게 할까:

아래는 클래식한 try-catch 블록입니다:

try {
  // 에러가 발생할 수 있는 코드
  let result = potentiallyRiskyOperation();
  console.log('성공:', result);
} catch (error) {
  // 에러가 발생했을 때 수행할 작업
  console.error('이런:', error.message);
}

에러가 발생하지 않았을 때의 샘플 출력:

성공: 42

에러가 발생했을 때:

이런: 무언가 잘못됐어요

비동기 코드에서는, 프로미스가 관련되어 있을 때, async 함수 안에서 try-catch를 사용하세요:

async function fetchData() {
  try {
    let data = await fetch('https://api.example.com/data');
    console.log('데이터를 가져왔습니다:', data);
  } catch (error) {
    console.error('데이터를 가져오는 데 에러가 발생했습니다:', error.message);
  }
}

fetchData();

깊이 알아보기

자바스크립트에서의 에러 처리는 진화해왔습니다. 과거에는 (ES3, 1999년 경) try-catch 블록만 있었습니다. 그다지 융통성이 높지는 않았지만 일단은 그 일을 해냈습니다.

ES6(2015)는 프로미스(Promises)를 도입해 .then().catch()를 제공하면서 비동기 에러를 더 우아하게 처리할 수 있게 되었습니다.

fetch('https://api.example.com/data')
  .then(data => console.log('데이터를 가져왔습니다:', data))
  .catch(error => console.error('데이터를 가져오는 데 에러가 발생했습니다:', error.message));

구현 세부 사항으로, 에러가 발생하면 자바스크립트 엔진은 messagestack 같은 유용한 속성들을 가진 Error 객체를 생성합니다. 더 복잡한 앱을 위해서는 Error 클래스를 확장하여 커스텀 에러 타입을 만들 수도 있습니다 – 유용한 팁이지요.

대안들? 에러 처리를 무시하기(나쁜 아이디어), 에러-첫 번째 파라미터를 사용하는 콜백(callbacks)을 활용하기(Node.js 스타일이라 하죠), 또는 더 세련된 라이브러리와 프레임워크를 사용하여 그들만의 방식을 제공하는 것들이 있습니다.

또한 보기

에러 처리에 대해 더 알아보려면: