자바스크립트에서 오류(Error) 객체는 스크립트 실행 중 문제가 발생했을 때 자바스크립트 인터프리터가 자동으로 생성하여 던지는(throw) 객체입니다. 또한 개발자가 직접 사용자 정의 예외를 만들어 던질 때에도 이 오류 객체를 활용할 수 있습니다.
오류 객체의 주요 속성
자바스크립트 오류 객체는 다음과 같은 두 가지 핵심 속성을 제공합니다.
| 속성 | 설명 |
|---|---|
| name | 오류의 이름(종류)을 설정하거나 반환합니다. 예를 들어 TypeError, ReferenceError 등이 있습니다. |
| message | 오류에 대한 상세 메시지를 문자열 형태로 설정하거나 반환합니다. |
대표적인 오류 유형
오류 객체의 name 속성에는 다양한 오류 유형이 담길 수 있습니다.
- ReferenceError: 선언되지 않은 변수를 참조할 때 발생
- TypeError: 값이 기대한 타입이 아닐 때 발생
- SyntaxError: 잘못된 문법으로 인해 발생
- RangeError: 허용 범위를 벗어난 값을 사용할 때 발생
예제 코드
다음은 자바스크립트에서 오류 객체를 확인하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Error Object</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Error Object</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 오류 객체가 화면에 표시됩니다.
</h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
try {
a;
}
catch (err) {
resEle.innerHTML = "Error = " + err + "<br>";
resEle.innerHTML += "error.name = " + err.name + "<br>";
resEle.innerHTML += "error.message = " + err.message + "<br>";
}
});
</script>
</body>
</html>코드 설명
위 예제는 try...catch문을 활용해 오류를 처리하는 방식을 보여줍니다. try 블록 안에서 선언되지 않은 변수 a를 참조하면 ReferenceError가 발생하고, catch 블록이 이를 잡아(catch) 오류 객체인 err를 통해 정보를 추출합니다.
err: 오류 객체 전체를 문자열로 출력err.name: 오류 이름(예: ReferenceError) 출력err.message: 오류 상세 메시지(예: a is not defined) 출력
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같이 오류 정보가 표시됩니다.
마무리
오류 객체는 자바스크립트 디버깅의 핵심 도구입니다. name과 message 속성을 적절히 활용하면 어떤 오류가 발생했는지 정확히 파악하고, 사용자에게 친절한 안내 메시지를 제공하거나 로그를 남기는 등 견고한 에러 처리 로직을 구현할 수 있습니다.