JavaScript에서는 내장된 Error 객체를 상속받아 자신만의 사용자 정의 오류(Custom Error)를 만들 수 있습니다. 이를 통해 오류의 이름과 메시지를 명확하게 정의하고, 애플리케이션의 디버깅과 예외 처리를 더욱 체계적으로 관리할 수 있습니다.
사용자 정의 오류란?
기본적으로 JavaScript는 TypeError, RangeError, SyntaxError 등 다양한 내장 오류 타입을 제공합니다. 하지만 실제 개발 환경에서는 프로젝트에 특화된 오류 유형이 필요할 때가 많습니다. 이때 Error 클래스를 확장(extends)하여 커스텀 오류 클래스를 정의하면, 오류 발생 원인을 더 직관적으로 파악할 수 있습니다.
예제 코드
다음은 버튼을 클릭하면 사용자 정의 오류를 생성하고 화면에 표시하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<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>JavaScript의 사용자 정의 오류</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위의 버튼을 클릭하면 사용자 정의 오류가 생성되어 화면에 표시됩니다.
</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 = "CustomError";
}
}
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>코드 설명
- CustomError 클래스:
Error클래스를 상속받아 정의됩니다. 생성자에서super(message)를 호출해 부모 클래스에 메시지를 전달한 뒤,this.name속성을"CustomError"로 지정하여 오류 이름을 설정합니다. - test() 함수: 호출되는 즉시
throw문을 통해 새로운CustomError인스턴스를 던집니다. - try...catch 블록: 버튼 클릭 이벤트 발생 시
test()함수를 실행하고, 발생한 오류를 catch 블록에서 잡아err.name과err.message값을 화면에 출력합니다.
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같이 오류의 이름과 메시지가 화면에 표시됩니다.
err.name = CustomError err.message = New Error thrown
정리
이처럼 Error 클래스를 상속하면 손쉽게 사용자 정의 오류를 만들 수 있으며, try...catch 문과 함께 활용하면 오류 처리 로직을 더욱 명확하고 안전하게 작성할 수 있습니다. 대규모 애플리케이션에서는 오류 유형별로 별도의 커스텀 에러 클래스를 두어 코드 가독성과 유지보수성을 높이는 것이 좋습니다.