次に、JavaScriptエラー処理シリーズの記事のリストでは、未定義の変数errorを詳しく見 未定義の変数エラーは、変数またはオブジェクトへの参照が存在しないか、実行中のコードのスコープ外にあるコードで作成されたときにスローされます。

以下では、一般的に未定義の変数エラーを生成する具体的な例と、このエラーが発生したときにこのエラーをキャッチして対処する方法を見ていきます。 始めましょう！

テクニカルランダウン

• すべてのJavaScriptエラーオブジェクトは、エラーオブジェクトの子孫、またはその中の継承されたオブジェク
• ReferenceErrorオブジェクトはErrorオブジェクトから継承されます。
• 未定義の変数errorは、特定のタイプのReferenceErrorオブジェクトです。

いつ使用する必要がありますか？

JavaScriptでコーディングするプロセスの深いところでは、タイプミスをしたり、後でその変数を呼び出す前に変数やオブジェクトを初期化することを忘 これが発生すると、JavaScriptは未定義の変数エラーをスローして、参照されているオブジェクトが以前に定義されていないことを示すことで不快感を示します。

たとえば、ここでは、取得しようとしているの簡単な文を作っています。未定義のitemvariableのlengthプロパティ。 また、単純なtry-catchブロックを使用して発生する可能性のあるReferenceErrorsを取得し、それらを単純なprintError関数に渡してエラーメッセージの出力を美化しています。

var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { // Calling an undefined `item `variable var length = item.length; console.log(`Length is ${length}.`)} catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); }}

案の定、JavaScriptはitem変数が未定義であることに気付き、明示的な未定義変数errorを生成します:

// FIREFOX ReferenceError: item is not defined// CHROME ReferenceError: item is not defined

このシリーズで説明した他の多くのJavaScriptエラーとは異なり、未定義の変数エラーメッセージのテキストは、FirefoxまたはChromeに電力を供給する二つのエこの特定の未定義の変数エラーに対する明白で簡単な修正は、それを呼び出す前にitem変数を宣言することです。

var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { // Defining `item` first var item = "Bob"; var length = item.length; console.log(`Length is ${length}.`)} catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); }}

今、私たちはアイテ長さは、任意のエラーをスローすることなく呼び出し、したがって、私たちのコンソールを生成します。項目文字列の長さのログ出力:

Length is 3.

技術的には、未定義の変数エラーは未定義の変数への参照を識別することを目的としていますが、定義されているが、コードが実行されている現在のスコープコンテキストの外にある変数を参照しようとするときにも役割を果たします。たとえば、ここには単純なgetFullName関数があり、firstNameとlastNameの2つの変数を定義しています。 その関数のスコープ外では、firstName変数のlengthプロパティを取得しようとします:

var getFullName = function() { var firstName = "Bob"; var lastName = "Smith"; return `${firstName} ${lastName}`;}var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { // Accessing `firstName` from outside its scope var length = firstName.length; console.log(`Length is ${length}.`)} catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); }}

firstName変数は技術的にはすでに定義されていますが、このレベルの実行ではアクセスできないため、未定義の変数エラーがスローされます。

 ReferenceError: firstName is not defined

この場合、解決はfirstName変数とlastName変数をgetFullNamefunctionのスコープ外にプルすることであるため、実行のコンテキスト内にあります。-catch block:

// 4// Declaring the variables outside our functionvar firstName = "Bob";var lastName = "Smith";var getFullName = function() { return `${firstName} ${lastName}`;}var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { // Accessing `firstName` is now allowed var length = firstName.length; console.log(`Length is ${length}.`)} catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); }}

期待どおり、エラーは生成されず、firstname変数の長さが出力として取得されます:

Length is 3.

アプリケーションがJavaScriptエラーをどのように処理するかをさらに深く理解するには、革新的なAirbrake JavaScriptエラー追跡ツールをチェックして、リアルタ