JavaScriptのネイティブエラータイプ

JavaScriptのネイティブエラータイプ

クレイジーテクノロジーハウスのフロントエンドのパイオニア

//デイリーフロントエンドナイトトークNo.475
//本体：1700ワード
//推定読書時間：10分

ブラウザコンソールからNode.jsを実行しているターミナルまで、至る所でエラーが発生します。

この記事の焦点は、JS開発中に発生する可能性のあるエラーの種類の概要を説明することです。

ヒント：適切なエラーメッセージは、迅速で痛みのない開発エクスペリエンスと、遅くて痛みを伴う開発エクスペリエンスの違いにつながる可能性があります。再利用可能なコードを作成するときは、明確で理解しやすいエラー処理コードを作成していることを確認してください。

---

1. RangeError

このエラーは、数値が許容値の範囲を超えるとスローされます。

例えば

const l = console.logconst arr = [90,88]
arr.length=90**99

2つの要素を持つ配列があります。次に、90 ** 99 == 2.9512665430652753e +193要素を含むように配列を拡張してみます。

この数は、アレイサイズが大きくなる可能性のある範囲を超えています。それを実行すると、RangeErrorがスローされます：

$ node errors
errors.js:4
arr.length=90**99
 ^RangeError: Invalid array length

JSで指定された範囲を超えてarr配列のサイズを増やしたいからです。

2. ReferenceError

このエラーは、変数またはアイテムへの参照が破棄されたときに発生します。つまり、変数またはアイテムが存在しません。

例えば

const l=console.logconst cat = "cat"
cat
dog

変数catは「cat」に初期化されます。次に、cat変数とdog変数が参照されます。cat変数は存在しますが、dog変数は存在しません。

catは「cat」を返し、dogという名前が環境レコードに見つからないため、dogは参照エラーを発生させます。

$ node errors
errors.js:3
dog
^ReferenceError: dog is not defined

変数を作成または定義するたびに、変数名が環境レコードに書き込まれます。環境記録はKey-Valueストアのようなものです。

+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+

変数を参照するときはいつでも、プログラムで定義された変数を格納します。レコード内で環境値が見つかり、その値が抽出されて返されると、変数の名前をキーとして環境レコードが検索されます。未定義の関数を呼び出します。

ここで、値が割り当てられていない変数を作成または定義するとします。変数はそのキーを変数名として環境レコードに書き込みますが、その値は未定義のままです。

var catenv record
+-----------------+
| Key | Value |
-------------------
| cat | undefined |
+-----------------+

後で変数に値を割り当てるとき、変数は環境レコードで検索され、定義された値がないことが判明すると、割り当ては上書きされます。

var cat
cat = "cat"env record
+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+

そのため、変数名が環境レコードに見つからない場合、JSエンジンはRefernceErrorを発生させます。

+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+cat // "cat", yes, :) it's there
dog // :( what's this? can't find it

注：環境レコードの値が設定されていないため、未定義の変数はReferenceErrorをスローしません。

3. SyntaxError

これは最も一般的な間違いです。このエラーは、JSエンジンが理解できないコードを入力したときに発生します。

JSエンジンは、解析中にこのエラーをキャッチしました。JSエンジンでは、端末で結果を確認する前に、コードがさまざまな段階を経ます。

• トークン化
• 構文解析
• 
  トークン化はコードのソースをユニットに分解することを説明します。この段階で、数字、キーワード、単語、および演算子は個別に分類され、マークが付けられます。

次に、生成されたタグストリームは解析ステージに渡され、パーサーによって処理されます。これは、ASTがマークアップストリームから生成される場所です。ASTは、コード構造の抽象表現です。

トークン化と解析の2つの段階で、コードの文法がJSの文法規則に準拠していない場合、この段階は失敗し、SyntaxErrorが発生します。例えば：

const l = console.loglet cat h = "cat"

コードの「h」は何を表していますか？この「h」はコードを壊しました。

$ node errors
errors.js:3
let cat h = "cat"
 ^SyntaxError: Unexpected identifier

ほら、Node.jsが問題を指摘しました。「h」は偶然であり、cat変数の宣言を破ったとのことです。

したがって、構文解析やコンパイル中に文法エラーが発生していると言えます。

4. TypeError

他のNativeErrorオブジェクトで失敗の理由が適切に示されていない場合、TypeErrorは、操作が失敗したことを示すために使用されます。

TypeErrorは、次のような間違ったデータ型で操作を実行すると発生します。

次のように数値を大文字に変換しようとすると、次のようになります。

const num = 123
num.toUpperCase()

これによりTypeErrorが発生します

$ node errors
errors.js:4
num.toUpperCase()
 ^TypeError: num.toUpperCase is not a function

toUpperCase関数には文字列データ型が必要なためです。toUpperCase関数は意図的に一般的であり、この値がStringオブジェクトである必要はありません。したがって、メソッドとして他の種類のオブジェクトに転送できます。

文字列のみが大文字または小文字に変換されます。Objects、Boolean、Symbol、null、undefinedデータ型でtoUpperCase関数を呼び出すと、操作するデータ型が間違っているため、TypeErrorが発生します。

5. URIError

これは、その定義と互換性のないグローバルURI処理関数が使用されていることを示しています。

JSのURI（Uniform Resource Indicator）には、decodeURI、decodeURIComponentなどの関数があります。

間違ったパラメータでそれらのいずれかを呼び出すと、URIErrorが発生します。

decodeURI("%")
^URIError: URI malformed

encodeURIは、エンコードされていないバージョンのURIを取得するために使用されます。「％」は正しいURIではないため、URIErrorが発生しました。

❝
URIが問題をエンコードまたはデコードすると、URIErrorをリードします。
❞

6. EvalError

これは、グローバルeval（）関数を使用するときにエラーを識別するために使用されます。

EcmaSpec 2018バージョンによると：

この例外は現在、この仕様では使用されていません。これは、この仕様の以前のバージョンとの互換性のために予約されています。

7. InternalError

このエラーは、JSエンジン内で発生します。特に、処理するデータが多すぎて、スタックの増加がクリティカル制限を超えている場合に発生します。

この問題は、JSエンジンが過度の再帰や切り替え状況などに圧倒された場合に発生します。

switch(num) {
 case 1:
 ...
 break
 case 2:
 ...
 break
 case 3:
 ...
 break
 case 4:
 ...
 break
 case 5:
 ...
 break
 case 6:
 ...
 break
 case 7:
 ...
 break
 ... up to 1000 cases
 }
以下是一个简单的过多递归的例子：

function foo() {
    foo()
}
foo()

総括する

私たちが言ったように、誰もが間違いを犯します。コードを入力した限り、これは安定したイベントです。それを克服するには、スローされる可能性のあるネイティブエラーの種類を知る必要があります。それらはこの記事にリストされており、それらがどのようにトリガーされるかを説明するためにいくつかの例が提供されています。

そのため、端末またはブラウザでエラーが発生した場合はいつでも、エラーが発生した場所と方法を簡単に見つけることができ、エラーが発生しにくい、より適切なコードを記述できます。

---