JavaScript Try Catch：ステップバイステップガイド

JavaScriptのtrycatchブロックはエラーハンドラーです。 「try」ブロックには、テストするコードが含まれています。 「catch」には、「try」ブロックのコードを正常に実行できない場合に実行されるコードが含まれています。

開発者がプロ​​グラムをテストするとき、特定の方法でエラーを処理するコードを書くのが一般的です。これは、プログラムをクラッシュさせてプログラミングエラーをプログラムに表示させるよりも適切です。たとえば、長いエラーログではなく、「後でもう一度やり直してください」というメッセージをユーザーに表示させたい場合があります。

そこで、try /catchブロックが登場します。try/catchブロックを使用すると、エラーを適切に処理できるため、コーディングの問題によってプログラム全体がクラッシュすることはありません。このガイドでは、try / catchブロックの使用方法を示し、それらがどのように役立つかについて説明します。

エラー処理の復習

プログラムが壊れる可能性のある方法はたくさんあるので、すべての開発者はコードに間違いを犯します。

JavaScriptでエラーが発生すると、プログラムは通常停止し、エラーをコンソールに出力します。これは、何が問題なのかを確認できるので便利ですが、エラーが発生したユーザーはそれを理解できない可能性があります。

そのため、コードにエラー処理手順を含めることが重要です。エラーハンドラを含めることにより、エラーが発生した場合のプログラムの応答方法をカスタマイズできます。したがって、エラーハンドラを使用すると、エラーが発生したときにユーザーに表示されるメッセージや、問題の通知方法を決定できます。

JavaScriptトライキャッチ

JavaScriptのtrycatchブロックは、指定されたコードブロックのエラーを識別します。 「try」ブロックのコードにエラーがある場合、「catch」ブロックの内容が実行されます。 「finally」ブロックを使用して、プログラムが正常に実行されるかどうかをコードで実行することもできます。

try/catchプロシージャの構文は次のとおりです。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

try {
	// Your code here
	console.log(“The code works!”);
} catch (e) {
	console.log(“There is a problem in my code!”);
}

私たちのブロックには2つのステートメントがあります：

• {}を試してください。
• キャッチ（e）{}。

「try」ステートメントで囲まれたコードは、プログラムが実行しようとするものです。この場合、プログラムは「このコードは機能します」を出力しようとします。 コンソールに。 catchで囲まれたコード try でエラーが返された場合、ステートメントが実行されます。 ステートメント。

catchステートメントの（e）値は、「try」ステートメントのコードが失敗する原因となったエラーを表します。コードを停止したエラーの根本的な原因を確認できるように、「e」の値を出力することもできます。

JavaScriptの例をキャッチしてみてください

実際のtry/catchブロックを説明するために、例を使用してみましょう。以下の例では、コード内のJavaScript変数名のスペルを間違えています。

let ourVariable = “Test”;
console.log(ourVarible);

コードは次のようになります：

ReferenceError: ourVarible is not defined

これは、変数が見つからない場合に返されるデフォルトのエラーです。しかし、ユーザーにこのエラーが表示された場合はどうなりますか？彼らはおそらく混乱するでしょう。それでは、try/catchブロックを使用してコードを試してみましょう。

let ourVariable = “Test”;
try {
console.log(ourVarible);
} catch (e) {
	console.log(“There is a problem!”)
}

コードは次のようになります：

There is a problem!

私たちのコードには、上で見たのと同じReferenceErrorが含まれています。ただし、プログラムは、長くて複雑なデフォルトエラーを返す代わりに、 catchで指定したものを返します。 ブロック。コードはエラーをログに記録しますが、プログラムは代わりにカスタムエラーを返します。

catchブロックは、引数「e」のエラーを追跡します。必要に応じて、返されたエラーにアクセスできます。値「e」を返すプログラムの例を次に示します。

let ourVariable = “Test”;
try {
console.log(ourVarible);
} catch (e) {
	console.log(“There is a problem! Here is the error message from the code:”, e)
}

コードは次を返します：

There is a problem! Here is the error message from the code: ReferenceError: ourVarible is not defined.

これで、コードがエラーを報告し、プログラムによってスローされたエラーメッセージも表示されます。

キャッチは注目に値します 句はオプションです。エラーが発生した場合にプログラムが何もしないようにする場合は、コードを tryで囲むだけで済みます。 ブロック。

JavaScriptは最後に節をキャッチしようとします

コードに追加できる句がもう1つあります。最後にです。 最後に catchのようなオプションの句です 、エラーが発生した場合でもコードを実行できます。動作中のtry/catch/finally句の例を次に示します。

let ourVariable = "Test";
try {
console.log(ourVarible);
} catch (e) {
console.log("There is a problem! Here is the error message from the code:", e)
} finally {
	console.log("The code has been run!")
}

プログラムが返すものは次のとおりです。

TypeError: Your variable is not a string!
The code has been run!

コードでエラーが発生したため、 catch内のコード 句が実行されます。これにより、上記のTypeErrorが返されます。エラーが処理された後、最後に ブロックが実行され、このコードが実行されました！が出力されます。

結論

JavaScriptのtry/catch句を使用して、コードをテストできます。 tryステートメントを正常に実行できない場合、catchステートメントの内容が実行されます。 finallyステートメントは、tryステートメントまたはcatchステートメントの直後に実行されます。

ユーザーに表示されるサイトを開発している場合は、カスタムエラーがあると便利です。カスタムエラーにより、問題が発生したときにユーザーが混乱することはありません。

JavaScriptでのコーディングについてもっと知りたいですか？ JavaScriptの学習方法ガイドをお読みください。このガイドには、JavaScriptを学ぶためのヒントが含まれています。