JavaScript에서 오류 이름(error name) 값은 발생한 오류의 이름을 설정하거나 반환하는 데 사용됩니다. err.name 속성을 활용하면 try-catch 문에서 잡힌 오류가 어떤 유형인지 정확하게 파악할 수 있습니다.
JavaScript의 오류 이름 종류
오류 이름은 아래 표와 같이 여섯 가지 값 중 하나를 반환할 수 있습니다.
| 번호 | 오류 이름 및 설명 |
|---|---|
| 1 | EvalErroreval() 함수 실행 중 발생하는 오류를 나타냅니다. |
| 2 | RangeError 숫자 값이 유효 범위를 벗어날 때 발생합니다. 예를 들어 배열 길이에 음수를 지정하는 경우입니다. |
| 3 | ReferenceError 잘못된(유효하지 않은) 참조가 발생했을 때 나타납니다. 대표적인 예는 선언되지 않은 변수를 사용하는 경우입니다. |
| 4 | SyntaxError 코드에 문법 오류가 있을 때 발생합니다. |
| 5 | TypeError 값이 기대한 자료형이 아닐 때 발생합니다. 예를 들어 숫자가 아닌 값을 다루는 함수에 잘못된 타입을 전달하는 경우입니다. |
| 6 | URIErrorencodeURI() 또는 decodeURI() 함수 사용 중 잘못된 인자가 전달되면 발생합니다. |
예제 코드
다음은 JavaScript에서 오류 이름 값을 확인하는 전체 예제 코드입니다. 이 예제는 변수가 정의되기 전에 해당 변수를 호출하여 ReferenceError를 유발하고, catch 블록에서 오류 이름을 출력합니다.
<!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: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript 오류 이름 값</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 {
resEle.innerHTML = a;
}
catch (err) {
resEle.innerHTML = "Error name = " + err.name;
}
let a = 44;
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭하면, 아직 정의되지 않은 변수 a를 참조하려다 ReferenceError가 발생하고, catch 블록이 이를 잡아 다음 결과를 화면에 표시합니다.
정리
JavaScript의 오류 이름 값은 EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError 여섯 가지입니다. try-catch 문과 함께 err.name을 활용하면 오류의 원인을 빠르게 식별하고, 오류 유형에 따라 적절한 예외 처리 로직을 구현할 수 있습니다.