JavaScript 에러 - Throw과 Try to Catch

try 문장은 코드 블록 내의 오류를 테스트할 수 있도록 합니다.

catch 문장은 오류를 처리할 수 있습니다.

throw 문은 사용자 정의 오류를 생성할 수 있습니다.

finally 결과와 관계없이 try와 catch 뒤에 코드를 실행할 수 있도록 합니다.

오류는 항상 발생합니다!

JavaScript 코드를 실행할 때, 여러 가지 오류가 발생할 수 있습니다.

오류는 프로그래머의编码 오류, 오류 입력으로 인한 오류, 또는 예상치 못한 문제로 인해 발생할 수 있습니다.

예제

이 예제에서는 다음과 같이 adddlert 의도적으로 오류를 생성하기 위해 경고 코드를 작성했습니다:

<p id="demo"></p>
<script>
try {
    adddlert("많이 방문해 주셔서 감사합니다!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

직접 시험해 보세요

JavaScript는 adddlert를 오류로 잡고 그 오류를 처리하기 위한 코드를 실행합니다.

JavaScript try와 catch

try 문장은 실행 중 오류를 감지하기 위해 코드 블록을 정의할 수 있습니다.

catch 문장은 try 코드 블록에서 오류가 발생할 때 실행할 코드 블록을 정의할 수 있습니다.

JavaScript 문 try 와 catch 쌍으로 나타납니다:

try {
     테스트를 위해 제공된 코드 블록
}
 catch(err) {
     오류 처리 코드 블록
}

JavaScript에서 오류를 발생시킵니다

오류가 발생하면 JavaScript는 일반적으로 중지되고 오류 메시지가 생성됩니다.

기술적인 용어는 다음과 같이 설명됩니다:JavaScript는 오류를 던집니다(오류를 던진다)。

JavaScript는 실제로 두 개의 속성을 가진 오류를 생성합니다: Error 객체:name 와 message。

throw 문

throw 문은 사용자 정의 오류를 생성할 수 있습니다.

기술적으로는 다음과 같이 할 수 있습니다:예외(오류를 던진다)를 던집니다。

예외는 JavaScript 문자열, 숫자, 불리언 또는 객체일 수 있습니다:

throw "Too big";    // 텍스트를 던진다
throw 500;          // 숫자를 던진다

다음과 같이 사용할 수 있습니다: throw 과 try 와 catch 함께 사용하면 프로그램 흐름을 제어하고 사용자 정의 오류 메시지를 생성할 수 있습니다.

입력 검증 예제

이 예제에서는 입력을 확인합니다. 값이 잘못된 경우 예외(err)를 발생시킵니다.

이 예외(err)는 catch 문으로 잡혀서 사용자 정의 오류 메시지를 표시됩니다:

<!DOCTYPE html>
<html>
<body>
<p>5 - 10 사이의 숫자를 입력하세요：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">입력 테스트</button>
<p id="message"></p>
<script>
function myFunction() {
    var 메시지, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "空的";
         if(isNaN(x)) throw "숫자가 아닙니다";
         x = Number(x);
        if(x < 5) throw "太小";
        if(x > 10) throw "太大";
    }
    catch(err) {
        message.innerHTML = "입력은 " + err;
    }
}
</script>
</body>
</html>

직접 시험해 보세요

HTML 검증

이 코드는 단순한 예제입니다.

최신 브라우저는 대부분 JavaScript와 내장된 HTML 검증을 결합하여 사용하며, HTML 속성에서 정의된 사전 정의된 검증 규칙을 통해:

<input id="demo" type="number" min="5" max="10" step="1">

이 튜토리얼의 나중 장에서는 형식 검증에 대해 더 배울 수 있습니다.

finally 문

finally 문장은 try와 catch 뒤에도 코드를 실행할 수 있도록 합니다. 결과는 어떤 것인지에 관계없이:

try {
     // 테스트를 위해 작성된 코드 블록
}
 catch(err) {
     // 오류 처리 코드 블록
} 
finally {
     // 결과와 관계없이 항상 실행되는 코드 블록
}

예제

function myFunction() {
    var 메시지, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "비어 있습니다";
        if(isNaN(x)) throw "숫자가 아닙니다";
         x = Number(x);
        if(x >  10) throw "많すぎ";
        if(x <  5) throw "작すぎ";
    }
    catch(err) {
        message.innerHTML = "오류：" + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

직접 시험해 보세요

Error 객체

JavaScript는 오류가 발생할 때 오류 정보를 제공하는 내장 error 객체를 가집니다。

error 객체는 두 가지 유용한 속성을 제공합니다：name 와 message。

Error 객체 속성

속성 설명
name 오류 이름을 설정하거나 반환합니다
message 오류 메시지(한 문자열)를 설정하거나 반환합니다

Error Name Values

error의 name 속성은 다섯 가지 다른 값을 반환할 수 있습니다：

오류 이름 설명
EvalError eval() 함수에서 발생한 오류
RangeError 수 범위를 벗어난 오류가 발생했습니다
ReferenceError 잘못된 참조가 발생했습니다
SyntaxError 문법 오류가 발생했습니다
TypeError 타입 오류가 발생했습니다
URIError encodeURI()에서 발생한 오류

아래에서 이六个不同的值为您详细解释。

Eval 오류

EvalError eval() 함수 내에서 발생하는 오류를 보여줍니다

JavaScript의 새 버전에서는 eval() 함수에서 오류를 던지지 않습니다 EvalError。아래에서 이六个不同的值为您详细解释。 SyntaxError 대신에 사용해 주세요

범위 오류

RangeError 합법한 범위를 벗어난 수를 사용했을 때 발생합니다.

예를 들어: 수의 유효 자리수를 500으로 설정할 수 없습니다.

예제

var num = 1;
try {
    num.toPrecision(500);   // 수는 500개의 유효 수를 가질 수 없습니다
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

직접 시험해 보세요

참조 오류

아직 선언되지 않은 변수를 사용(참조)하면 ReferenceError 발생할 것입니다：

예제

var x;
try {
    x = y + 1;   // y는 참조될 수 없습니다(사용)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

직접 시험해 보세요

문법 오류

문법 오류가 있는 코드를 계산하면 SyntaxError 발생:

예제

try {
    eval("alert('Hello')");   // '을 빠뜨려서 오류가 발생합니다
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

직접 시험해 보세요

타입 오류

만약 사용하는 값이 기대하는 범위에서 벗어나면 TypeError 발생:

예제

var num = 1;
try {
    num.toUpperCase();   // 숫자를 대문자로 변환할 수 없습니다
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

직접 시험해 보세요

URI 오류

URI 함수에서 불법 문자를 사용하면, URIError 발생:

예제

try {
    decodeURI("%%%");   // 이러한 백분위호를 URI 인코딩할 수 없습니다
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

직접 시험해 보세요

비표준 Error 객체 속성

Mozilla와 Microsoft은 비표준 error 객체 속성을 정의했습니다:

  • fileName (Mozilla)
  • lineNumber (Mozilla)
  • columnNumber (Mozilla)
  • stack (Mozilla)
  • description (Microsoft)
  • number (Microsoft)

공공 웹사이트에서 이러한 속성을 사용하지 마세요. 모든 브라우저에서 동작하지 않습니다.