JavaScript에서는 Error 클래스를 상속하여 기본 에러 객체를 확장할 수 있습니다. 가장 권장되는 방법은 내장된 Error 클래스를 상속받는 새로운 커스텀 에러 클래스(Custom Error Class)를 정의하는 것입니다.
커스텀 에러가 필요한 이유
기본 Error 객체만으로는 애플리케이션에서 발생하는 다양한 오류 상황을 세분화하기 어렵습니다. 커스텀 에러 클래스를 사용하면 다음과 같은 장점이 있습니다.
- 에러의 종류를
name속성으로 명확하게 구분할 수 있습니다. instanceof연산자를 통해 특정 에러 타입만 골라서 처리할 수 있습니다.- 에러 코드, 발생 시점 등 추가 정보를 함께 담아 디버깅에 활용할 수 있습니다.
예제
다음은 JavaScript에서 Error 클래스를 확장하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Extend JavaScript Error</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to create a new error by extending the error class
</h3>
<script>
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let BtnEle = document.querySelector(".Btn");
class CustomError extends Error {
constructor(message) {
super(message);
this.name = "Custom Error";
}
}
function test() {
throw new CustomError("New Error thrown");
}
BtnEle.addEventListener("click", () => {
try {
test();
}
catch (err) {
resEle.innerHTML += "err.name = " + err.name + "<br>";
resEle.innerHTML += "err.message = " + err.message + "<br>";
}
});
</script>
</body>
</html>
코드 설명
class CustomError extends Error: ES6의 class 문법으로 내장 Error 클래스를 상속합니다.super(message): 부모 클래스인 Error의 생성자를 호출하여 에러 메시지를 전달합니다.this.name = "Custom Error": 에러 이름을 직접 지정해 콘솔이나 로그에서 쉽게 식별할 수 있도록 합니다.throw new CustomError(...):test()함수가 호출될 때 커스텀 에러 객체를 던집니다.- 버튼 클릭 시
try...catch블록에서 에러를 잡아name과message속성을 화면에 출력합니다.
출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같이 에러 정보가 출력됩니다.
