1つのDEEP DIVEサマリー(エラー処理)
12643 ワード
エラー処理
エラー処理が必要
エラーのないコードを書くことは不可能です.発生したエラーを無視すると、プログラムは強制的に終了します.console.log("[Start]");
foo(); // ReferenceError: foo is not defined
console.log("[End]");
// 터미널 💻
[Start]
/...
foo(); // ReferenceError: foo is not defined
^
ReferenceError: foo is not defined
[End] 는 빛을 보지 못하고 종료되었다...
try catch文を使用してエラーに適切に対応する場合は、プログラミングを強制的に終了することなく、コードを実行し続けることができます.console.log("[Start]");
try {
foo();
} catch (error) {
console.error("[에러 발생]", error);
// [에러 발생] ReferenceError: foo is not defined
}
// 발생한 에러에 적절한 대응을 하면 프로그램이 강제 종료되지 않는다.
console.log("[End]");
[Start]
[에러 발생] ReferenceError: foo is not defined
at Object.<anonymous> (/...파일이 실행된 상대 경로)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47
[End]
直接エラーが発生しない例外も発生する可能性があります.例外に適切に対応しないと、誤りを招く可能性が高い.// DOM에 button 요소가 존재하지 않으면 querySelector 메서드는 에러를 발생시키지 않고 null을 반환한다.
const $button = document.querySelector("button"); // null
$button.classList.add("disabled");
// TypeError: Cannot read property 'classList' of null
クイック評価またはオフセットフィルタ演算子(?.)使用しない場合は、次の処理でエラーが発生する可能性があります.// DOM에 button 요소가 존재하는 경우 querySelector 메서드는 에러를 발생시키지 않고 null을 반환한다.
const $button = document.querySelector("button"); // null
$button?.classList.add("disabled");
したがって,我々が作成したコードでは,いつでもエラーや例外が発生する可能性があり,それに対応するコードを記述することが重要である.
try catch finally
基本的に,エラー処理を実現する方法は大きく2つある.
①異常が発生した場合、if文またはショートカット評価またはオフセット演算子で戻り値(nullまたは-1)を決定する方法
エラー処理コードを登録し、エラーが発生したらエラー処理コードにジャンプさせる方法です.
②catch finally文を試用する方法
一般的にこの方法をエラー処理と呼ぶ
try catch finally文は、3つのコードブロックから構成されます.
finally文は必要でなければ省略できます.catch文も省略できますが、catch文のないtry文は意味がないので省略しません.try {
// 실행할 코드
} catch (err) {
// try 블록 내부에서 발생한 에러를 처리할 코드
} finally {
// try catch 블록이 모두 완료된 후 실행할 코드
}
console.log("[Start]");
try {
foo();
} catch (err) {
console.error(err); // ReferenceError: foo is not defined
} finally {
console.log("finally");
}
console.log("[End]");
Errorオブジェクト
Errorジェネレータ関数は、エラーオブジェクトを生成します.Errorジェネレータ関数では、エラーを詳細に記述したエラーメッセージをパラメータとして渡すことができます.const error = new Error("invalid");
JavaScriptは、Errorコンストラクション関数を含む7つのErrorオブジェクトを作成できるErrorコンストラクション関数を提供します.この関数によって作成されるすべてのエラーオブジェクトのプロトタイプはErrorです.プロトタイプを継承します.
ジェネレータ関数インスタンスError一般的なエラーオブジェクトSyntaxError JavaScript構文のエラーオブジェクトが参照できない識別子を参照したときに発生するエラーオブジェクトタイプError演算子またはパラメータのデータ型が無効なときに発生するエラーオブジェクトRangeError値の許容範囲.エラーオブジェクトEvalErrorReval関数で発生したエラーオブジェクトは、エラーオブジェクトURIまたはdecodeURI関数の引数が無効な場合に発生します.1 @ 1; // SyntaxError: Invalid or unexpected token
foo(); // ReferenceError: foo is not defined
null.foo; // TypeError: Cannot read property 'foo' of null
new Array(-1); // RangeError: Invalid array length
decodeURIComponent('%'); // URIError: URI malformed
戸を投げる
Error作成者関数を使用してエラーオブジェクトを作成しても、エラーは発生しません.すなわち,エラーオブジェクト生成とエラー発生の意味が異なる.try {
// 에러 객체를 생성한다고 에러가 발생하는 것은 아니다.
new Error("something wrong");
} catch (error) {
console.log(error);
}
エラーを生成するには、tryコードブロックからthrow文にエラーオブジェクトを投げ出す必要があります.throw 표현식;
throw文の式は値の影響を受けませんが、通常はエラーオブジェクトを指定します.
エラーが投げ出されると、catch文はエラー変数を生成し、投げ出されたエラーオブジェクトを割り当てます.
次にcatchコードブロックが実行されます.try {
// 에러 객체를 던지면 catch 코드 블록이 실행되기 시작한다.
throw new Error("something wrong");
} catch (error) {
console.log(error);
}
Error: something wrong
at Object.<anonymous> (/...)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47
Reference
この問題について(1つのDEEP DIVEサマリー(エラー処理)), 我々は、より多くの情報をここで見つけました
https://velog.io/@junh0328/DEEP-DIVE-한-장-요약-에러처리
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
console.log("[Start]");
foo(); // ReferenceError: foo is not defined
console.log("[End]");
// 터미널 💻
[Start]
/...
foo(); // ReferenceError: foo is not defined
^
ReferenceError: foo is not defined
[End] 는 빛을 보지 못하고 종료되었다...
console.log("[Start]");
try {
foo();
} catch (error) {
console.error("[에러 발생]", error);
// [에러 발생] ReferenceError: foo is not defined
}
// 발생한 에러에 적절한 대응을 하면 프로그램이 강제 종료되지 않는다.
console.log("[End]");
[Start]
[에러 발생] ReferenceError: foo is not defined
at Object.<anonymous> (/...파일이 실행된 상대 경로)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47
[End]
// DOM에 button 요소가 존재하지 않으면 querySelector 메서드는 에러를 발생시키지 않고 null을 반환한다.
const $button = document.querySelector("button"); // null
$button.classList.add("disabled");
// TypeError: Cannot read property 'classList' of null
// DOM에 button 요소가 존재하는 경우 querySelector 메서드는 에러를 발생시키지 않고 null을 반환한다.
const $button = document.querySelector("button"); // null
$button?.classList.add("disabled");
try {
// 실행할 코드
} catch (err) {
// try 블록 내부에서 발생한 에러를 처리할 코드
} finally {
// try catch 블록이 모두 완료된 후 실행할 코드
}
console.log("[Start]");
try {
foo();
} catch (err) {
console.error(err); // ReferenceError: foo is not defined
} finally {
console.log("finally");
}
console.log("[End]");
const error = new Error("invalid");
1 @ 1; // SyntaxError: Invalid or unexpected token
foo(); // ReferenceError: foo is not defined
null.foo; // TypeError: Cannot read property 'foo' of null
new Array(-1); // RangeError: Invalid array length
decodeURIComponent('%'); // URIError: URI malformed
try {
// 에러 객체를 생성한다고 에러가 발생하는 것은 아니다.
new Error("something wrong");
} catch (error) {
console.log(error);
}
throw 표현식;
try {
// 에러 객체를 던지면 catch 코드 블록이 실행되기 시작한다.
throw new Error("something wrong");
} catch (error) {
console.log(error);
}
Error: something wrong
at Object.<anonymous> (/...)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47
Reference
この問題について(1つのDEEP DIVEサマリー(エラー処理)), 我々は、より多くの情報をここで見つけました https://velog.io/@junh0328/DEEP-DIVE-한-장-요약-에러처리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol