JavaScript - try...catch: 초보자를 위한 오류 처리 마스터

안녕하세요, 열망하는 프로그래머 여러분! 오늘 우리는 JavaScript 오류 처리의 세계로 흥미로운 여정을 떠납니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요 - 많은 예제와 설명을 통해 단계별로 안내해 드리겠습니다. 이 튜토리얼의 끝을 맺을 때, 당신은 프로처럼 오류를 잡을 수 있을 것입니다!

JavaScript - try...catch

JavaScript try...catch 문

자전거 타는 것을 배우는 것을 상상해 보세요. 몇 번이고 넘어질 수도 있지만, 그건 괜찮습니다 - 일어나서 다시 시도합니다. 프로그래밍에서 우리는 try...catch 문을 사용하여 비슷한 일을 합니다. 우리는 코드를 "시도"하고, 그것이 "넘어지면" (오류를 발생시키면) 그것을 "잡아" 부드럽게 처리합니다.

간단한 예제를 보겠습니다:

try {
// 오류를 일으킬 수 있는 코드
console.log(nonExistentVariable);
} catch (error) {
// 오류를 처리하는 코드
console.log("Oops! An error occurred:", error.message);
}

이 예제에서 우리는 존재하지 않는 변수를 로그하려고 시도하고 있습니다. 프로그램이 충돌하지 않고, catch 블록이 오류를 잡아 친절한 메시지를 로그합니다.

JavaScript try...catch...finally 문

Sometimes, we want to run some code regardless of whether an error occurred or not. That's where the finally block comes in handy. It's like saying, "No matter what happens, make sure to do this!"

try {
console.log("Let's try to divide by zero!");
let result = 10 / 0;
console.log("Result:", result);
} catch (error) {
console.log("Oh no! An error occurred:", error.message);
} finally {
console.log("This will always run, error or not!");
}

이 예제에서, 제로로 나누는 것이 오류를 일으키지만, finally 블록은 여전히 실행됩니다.

JavaScript Throw 문

occasionally, we want to create our own errors. We can do this using the throw statement. It's like being the referee in a game and calling a foul when you see one.

function checkAge(age) {
if (age < 0) {
throw new Error("Age cannot be negative!");
}
console.log("Age is valid:", age);
}

try {
checkAge(-5);
} catch (error) {
console.log("Caught an error:", error.message);
}

여기서 우리는 음수 나이를 사용하려고 할 때 우리 자신의 오류를 발생시킵니다.

Try 블록을 중첩

nested dolls, we can nest try...catch blocks inside each other. This is useful when we want to handle errors at different levels of our code.

try {
try {
throw new Error("Oops!");
} catch (innerError) {
console.log("Inner catch:", innerError.message);
throw innerError; // 오류를 다시 던짐
}
} catch (outerError) {
console.log("Outer catch:", outerError.message);
}

이 예제에서 우리는 내부 블록에서 오류를 잡아 로그하고 그것을 다시 던져 외부 블록에 의해 잡히게 합니다.

오류를 다시 던지기

occasionally, we want to catch an error, do something with it, and then pass it along to be handled elsewhere. This is called rethrowing an error.

function doSomethingRisky() {
throw new Error("Danger, Will Robinson!");
}

try {
doSomethingRisky();
} catch (error) {
console.log("Logging the error:", error.message);
throw error; // 오류를 다시 던짐
}

여기서 우리는 오류를 잡아 로그하고 그것을 다른 코드 부분이 처리할 수 있도록 다시 던집니다.

조건부 Catch 블록

occasionally, we might want to handle different types of errors differently. We can do this by checking the error type in our catch block.

try {
let randomNumber = Math.random();
if (randomNumber < 0.5) {
throw new TypeError("Type error!");
} else {
throw new RangeError("Range error!");
}
} catch (error) {
if (error instanceof TypeError) {
console.log("Handling TypeError:", error.message);
} else if (error instanceof RangeError) {
console.log("Handling RangeError:", error.message);
} else {
console.log("Unknown error:", error.message);
}
}

이 예제는 우리가 다른 유형의 오류를 다른 방법으로 처리할 수 있도록 보여줍니다.

JavaScript try...catch와 setTimeout() 메서드

비동기 코드를 작업할 때, 오류 처리는 복잡할 수 있습니다. setTimeout() 함수에서 오류를 처리하는 방법을 보겠습니다.

try {
setTimeout(() => {
throw new Error("Async error!");
}, 1000);
} catch (error) {
console.log("This won't catch the error!");
}

// Correct way:
setTimeout(() => {
try {
throw new Error("Async error!");
} catch (error) {
console.log("Caught async error:", error.message);
}
}, 1000);

첫 번째 시도는 작동하지 않습니다. 왜냐하면 오류가 try...catch 블록이 실행이 끝난 후에 던져지기 때문입니다. 두 번째 시도는 올바르게 오류를 잡습니다.

Promise 기반 오류

프러미스를 사용할 때, 우리는 .catch()를 사용하여 오류를 처리합니다. 이는 비동기 연산에 대한 catch 블록과 같습니다.

function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error("Failed to fetch data"));
}, 1000);
});
}

fetchData()
.then(data => console.log("Data:", data))
.catch(error => console.log("Error:", error.message));

이 예제에서 우리는 데이터를 가져오는 데 실패한 것처럼模拟하고 결과 오류를 처리합니다.

JavaScript의 오류 유형

JavaScript에는 여러 가지 내장된 오류 유형이 있습니다. 다음 표는 이를 요약합니다:

오류 유형	설명
Error	일반 오류 유형
SyntaxError	코드에 문법 오류가 있을 때 발생
ReferenceError	존재하지 않는 변수를 참조할 때 발생
TypeError	값이 기대하는 유형과 다를 때 발생
RangeError	값이 기대 범위에 없을 때 발생
URIError	글로벌 URI 처리 함수를 잘못 사용할 때 발생
EvalError	`eval()` 함수를 잘못 사용할 때 발생

이러한 오류 유형을 이해하면 더 정확한 오류 처리 코드를 작성하는 데 도움이 됩니다.

그리고 여기서 끝입니다! JavaScript 오류 처리의 충격적인 강의를 마치셨습니다. 오류는 적이 아닙니다 - 더 나은, 더 견고한 코드를 작성하는 데 유용한 피드백입니다. 계속 연습하고, 호기심을 가지고, 행복하게 코딩하세요!

Credits: Image by storyset