프론트/JavaScript
JavaScript : 자바스크립트 Errors (Try, Catch, Finally, Throw)
홍시쿼카
2022. 3. 16. 15:22
▶ JavaScript Errors
- Try : 실행할 코드 블록을 정의합니다.
- Catch : 오류를 처리하기 위한 코드 블록을 정의합니다.
- Finally : 명령문 결과와 관계없이 실행할 코드 블록을 정의합니다.
- Throw : 사용자 정의 오류를 정의합니다.
// 일반적인
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>
<script>
function myFunction() {
const message = document.getElementById("p01");
message.innerHTML = "";
let x = document.getElementById("demo").value;
try {
if(x == "") throw "is empty"; //빈 값인 경우
if(isNaN(x)) throw "is not a number"; // 숫자가 아닌 다른 값을 넣을 경우
x = Number(x);
if(x > 10) throw "is too high"; // 10보다 큰 경우
if(x < 5) throw "is too low"; // 5보다 작은 경우
}
catch(err) {
message.innerHTML = "Input " + err;
}
finally {
document.getElementById("p01").innerHTML = document.getElementById("demo").value;
document.getElementById("demo").value = "";
}
}
</script>
▶ Error 오류
Error Name | Description |
EvalError | eval()함수에서 에러 |
RangeError | 범위를 벗어난 숫자 발생 |
ReferenceError | 잘못된 참조 |
SyntaxError | 구문 오류 |
TypeError | 유형 오류 |
URIError | encodeURI()에서 오류 |
// RangeError
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500 significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
// referenceError
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
// SyntaxError
try {
eval("alert('Hello)"); // Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
// TypeError
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
// URIError
try {
decodeURI("%%%"); // You cannot URI decode percent signs
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}