Articles
JavaScript 소개
자바스크립트의 오류 처리

자바스크립트의 오류 처리

이 글은 자바스크립트에서의 오류 처리에 대해 설명합니다.

YouTube Video

자바스크립트의 오류 처리

자바스크립트에서의 오류 처리는 프로그램이 예기치 못한 문제에 직면했을 때 오류를 포착하고 적절히 처리하는 중요한 기능입니다. 주로 오류를 포착하고 처리하기 위해 try...catch 구문을 사용하는 것이 일반적입니다. 또한, Promise 또는 비동기 작업을 처리할 때는 async/await 또는 Promise.prototype.catch를 사용하여 오류를 처리할 수 있습니다.

try...catch 구문

try...catch는 코드 블록 내부에서 오류가 발생했을 때 이를 포착하고 처리하는 데 사용됩니다.

 1try {
 2    // Code that may throw an error
 3    let result = riskyFunction();
 4    console.log(result);
 5} catch (error) {
 6    // Catch and handle the error
 7    console.error("An error occurred:", error.message);
 8} finally {
 9    // Code that will always execute
10    console.log("Error handling has completed.");
11}
  • try 블록 내부에서 오류가 발생하면 프로그램 실행이 중단되고, catch 블록이 실행됩니다.
  • finally 블록은 오류가 발생했는지 여부에 관계없이 항상 실행됩니다. 이는 리소스 해제 및 최종 처리 등의 작업에 유용합니다.

오류 발생시키기 (throw)

자바스크립트에서는 throw 키워드를 사용하여 명시적으로 오류를 발생시킬 수 있습니다. 커스텀 오류 메시지나 커스텀 오류를 발생시킬 때 사용됩니다.

 1function checkAge(age) {
 2    if (age < 18) {
 3        throw new Error("You are under 18 years old.");
 4    }
 5    return "Age verification completed.";
 6}
 7
 8try {
 9    let result = checkAge(15);
10    console.log(result);
11} catch (error) {
12    console.error(error.message);  // Displays "You are under 18 years old."
13}

비동기 작업의 오류 처리 (Promise와 async/await)

비동기 작업을 수행할 때 오류 처리는 약간 다릅니다. Promise를 사용할 때는 catch 메서드를 통해 오류를 포착합니다.

1let promise = new Promise((resolve, reject) => {
2    // Asynchronous operation
3    setTimeout(() => reject(new Error("An issue has occurred!")), 1000);
4});
5
6promise
7    .then(result => console.log(result))
8    .catch(error => console.error(error.message));  // Displays "An issue has occurred!"

async/await를 사용해 비동기 작업을 수행할 때는 try...catch를 사용하여 오류를 처리할 수 있습니다.

 1async function fetchData() {
 2    try {
 3        let response = await fetch('https://api.example.com/data');
 4        let data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("An error occurred while fetching data:", error.message);
 8    }
 9}
10
11fetchData();

요약

  • try...catch 구문을 사용하여 동기 오류를 포착할 수 있습니다.
  • throw를 사용하여 직접 오류를 발생시킬 수 있습니다.
  • 비동기 작업에서 발생하는 오류는 Promise의 catch 메서드 또는 async/await와 try...catch를 사용해 처리할 수 있습니다.

이러한 방식을 활용하면 오류가 발생하더라도 프로그램이 올바르게 작동하도록 보장할 수 있습니다.

Error

Error 클래스는 오류 처리를 위해 사용됩니다. 이는 오류를 생성하고 오류 메시지와 스택 추적을 제공하는 기능을 제공합니다.

1try {
2    throw new Error("Something went wrong");
3} catch (e) {
4    console.log(e.message); // Something went wrong
5}

기본 사용법

오류가 발생했을 때 명시적으로 Error 객체를 생성할 수 있습니다. new Error()를 사용하여 인스턴스를 생성하고 오류 메시지를 전달합니다.

1const error = new Error("Something went wrong");
2console.log(error.message);  // "Something went wrong"
3console.log(error.name);     // "Error"
4console.log(error.stack);    // Stack trace (information about where the error occurred)

throw를 사용하여 오류 발생시키기

JavaScript에서는 throw 키워드를 사용하여 오류를 발생시킬 수 있습니다. 이는 특정 상황에서 처리를 중단하고 오류 핸들러로 제어를 전달하는 데 사용됩니다.

1function doSomething() {
2    throw new Error("This function is not yet implemented");
3}
4
5try {
6    doSomething();
7} catch (e) {
8    console.error(e.message);  // "This function is not yet implemented"
9}

throw로 발생한 오류는 try...catch 구문을 사용하여 처리할 수 있습니다.

사용자 정의 오류 생성하기

JavaScript에서는 Error 클래스를 확장하여 사용자 정의 오류를 만들 수 있습니다. 이를 통해 특정 상황에 맞는 맞춤형 오류를 생성할 수 있습니다.

 1class CustomError extends Error {
 2    constructor(message) {
 3        super(message);  // Call the parent class constructor
 4        this.name = "CustomError";  // Set the error name
 5    }
 6}
 7
 8try {
 9    throw new CustomError("A custom error has occurred");
10} catch (e) {
11    console.error(e.name);    // "CustomError"
12    console.error(e.message); // "A custom error has occurred"
13}

내장 오류 클래스

JavaScript에는 Error 클래스를 확장한 여러 내장된 오류 클래스가 있습니다. 이 클래스들은 특정 오류를 나타내는 데 사용됩니다.

  • ReferenceError: 존재하지 않는 변수를 참조할 때 발생합니다.
  • TypeError: 값의 유형이 예상된 유형과 다를 때 발생합니다.
  • RangeError: 숫자가 허용 범위를 벗어날 때 발생합니다.
  • SyntaxError: 문법적으로 올바르지 않은 코드가 실행될 때 발생합니다.
  • EvalError: eval() 함수 사용과 관련된 오류입니다. 오늘날에는 거의 사용되지 않습니다.
  • URIError: 잘못된 URI(인코딩 또는 디코딩 오류)가 사용될 때 발생합니다.
예시: ReferenceError

다음은 ReferenceError의 예시입니다.

1try {
2    console.log(undefinedVariable);  // Undefined variable
3} catch (e) {
4    console.error(e.name);    // "ReferenceError"
5    console.error(e.message); // "undefinedVariable is not defined"
6}
예시: TypeError

다음은 TypeError의 예시입니다.

1try {
2    null.f();  // Attempting to call a function on null
3} catch (e) {
4    console.error(e.name);    // "TypeError"
5    console.error(e.message); // "Cannot read properties of null (reading 'f')"
6}

finally 블록

try...catch 구문에서 오류 발생 여부와 상관없이 실행하고자 하는 연산이 있을 경우 finally 블록을 사용합니다.

1try {
2    throw new Error("An issue has occurred");
3} catch (e) {
4    console.error(e.message);  // "An issue has occurred"
5} finally {
6    console.log("Performing cleanup");
7}

이 예제에서 finally 블록의 작업은 오류가 발생하더라도 실행됩니다.

Error 객체의 속성

Error 객체는 다음과 같은 속성을 가지고 있습니다.

  • message: 이는 오류 메시지입니다.
  • name: 오류의 이름으로, 기본값은 "Error"입니다.
  • stack: 오류가 발생한 위치를 포함하는 스택 추적 정보로, 디버깅에 유용합니다.

예외 처리의 이점

올바른 오류 처리를 구현하면 예기치 못한 동작이 발생할 때 애플리케이션이 충돌하는 것을 방지할 수 있습니다. try...catch 구문과 오류 객체를 적절히 사용하면 더 견고한 코드를 작성할 수 있습니다.

 1function divide(a, b) {
 2    if (b === 0) {
 3        throw new Error("Cannot divide by zero");
 4    }
 5    return a / b;
 6}
 7
 8try {
 9    console.log(divide(4, 0));  // An error will occur
10} catch (e) {
11    console.error(e.message);   // "Cannot divide by zero"
12}

요약

  • Error 클래스는 오류의 원인을 나타내고 오류 처리를 수행하는 데 사용됩니다.
  • try...catch...finally 구문을 사용하여 오류를 처리하고 애플리케이션이 예기치 않게 종료되는 것을 방지하세요.
  • Error 클래스를 확장하여 사용자 정의 오류를 생성하는 것도 가능합니다.
  • TypeError 및 ReferenceError와 같은 내장 오류 클래스를 사용하여 다양한 유형의 오류를 처리할 수 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

JavaScript의 모듈