JavaScriptコードを書くのが難しいこともあれば、単に怖いこともあります。これは多くの開発者によく知られています。 その過程で、必然的にエラーが発生し、それらのいくつかはしばしば繰り返されます。 初心者の開発者向けに設計されたこの記事では、これらのエラーとその解決方法について説明しています。 わかりやすくするために、関数、プロパティ、およびオブジェクトの名前は、
人気のある歌から取られています。 これはすべて、一般的なエラーの修正方法をすばやく覚えるのに役立ちます。
「Habr」の読者には、「Habr」プロモーションコードを使用してSkillboxコースに登録すると10,000ルーブルの割引があります。
Skillboxの推奨事項：実践コース「Mobile Developer PRO」 。
TypeError：プロパティが定義されていません
let girl = { name: "Lucky", location: "Hollywood", profession: "star", thingsMissingInHerLife: true, lovely: true, cry: function() { return "cry, cry, cries in her lonely heart" } } console.log(girl.named.lucky)
上記のサンプルコードはUncaught TypeErrorをスローします：未定義エラーのプロパティ 'lucky'を読み取ることができません。 問題は、女の子オブジェクトには名前付きプロパティがありますが、名前付きプロパティがないことです。 また、girl.namedプロパティは定義されていないため、正式には存在しないため、アクセスできません。 しかし、girl.named.luckyをgirl.nameに置き換えると、すべてが機能し、プログラムはLuckyを返します。
プロパティの詳細については、
こちらをご覧ください 。
TypeErrorエラーを修正するメソッド
プログラマーが特定のタイプと一致しないデータに対してアクションを実行しようとすると、TypeErrorエラーが発生します。 例として、.bold（）を使用するか、未定義のプロパティを要求するか、実際には関数ではない関数を呼び出します。
したがって、girl（）を呼び出そうとすると、Uncaught TypeErrorエラーが表示されます。実際には、関数ではなくオブジェクトが呼び出されるため、yourVariable.boldは関数ではなく、girlは関数ではありません。
エラーを排除するには、変数を調べる必要があります。 女の子とは何ですか？ girl.namedとは何ですか？ コードを分析するか、console.logを使用して変数を表示するか、デバッガーコマンドを使用するか、またはコンソールで変数名を呼び出すことで確認できます。 変数に含まれるデータ型で操作できることを確認する必要があります。 収まらない場合は、条件またはtry..catchブロックを追加して操作を制御するなど、変更します。
スタックオーバーフロー
Baby One More Timeの歌の作者を信じているなら（これはブリトニー・スピアーズです）、この文脈でヒットする言葉は、歌手が再び呼ばれることを望んでいることを意味します（ここでは、歌の文脈についての説明があります）。 この欲求が実生活での通話数の増加につながる可能性があります。 しかし、プログラミングでは、これは呼び出しスタックがオーバーフローした場合にエラーを引き起こす可能性のある再帰です。
エラーは次のとおりです。
エラー：スタック領域が不足しています（エッジ）
InternalError：再帰が多すぎます（Firefox）
RangeError：最大呼び出しスタックサイズを超えました（Chrome）
開発者が再帰で基本ケースを考慮しなかった場合、またはコードが提供されたケースに対応していない場合、スタックオーバーフローが発生します。
function oneMoreTime(stillBelieve=true, loneliness=0) { if (!stillBelieve && loneliness < 0) return loneliness++ return oneMoreTime(stillBelieve, loneliness) }
この場合、stillBelieveをfalseに設定することはできないため、oneMoreTimeが毎回呼び出されますが、関数は終了しません。
2人の友人を希望し始めた場合、これは孤独（孤独）を軽減し、電話を待つことはできません。
function oneMoreTime(stillBelieve=true, loneliness=0) { if (!stillBelieve && loneliness < 0) return loneliness-- stillBelieve = false return oneMoreTime(stillBelieve, loneliness) }
例として、システムがエラーメッセージを表示せず、JavaScriptコードが実行されるページがフリーズするだけの場合、無限ループの場合があります。 これは、whileループに終了条件がない場合に発生します。
let worldEnded = false while (worldEnded !== true) { console.log("Keep on dancin' till the world ends") }
次のようにして問題を解決できます。
let worldEnded = false while (worldEnded !== true) { console.log("Keep on dancin' till the world ends") worldEnded = true }
無限ループと再帰をデバッグする
無限ループに問題がある場合は、ChromeまたはEdgeでタブを閉じ、Firefoxでブラウザーウィンドウを閉じる必要があります。 その後、コードを慎重に分析する必要があります。 問題が見つからない場合は、デバッガーコマンドをループまたは関数に追加し、変数の値を確認する価値があります。 結果が期待どおりでない場合は、交換して、簡単に実行できます。
上記の例では、デバッガーを関数またはループの最初の行として追加する必要があります。 次に、スコープ内の変数を分析して、Chromeでデバッグタブを開く必要があります。 [次へ]ボタンを使用すると、各反復での変更を追跡できます。 これをすべて行うのは簡単で、ほとんどの場合、問題はそうです。
このすべての詳細については、ここ（
Chromeの場合 ）およびここ（
Firefoxの場合 ）を参照してください。
構文エラー
最も一般的なJavaScriptエラーの1つはSyntaxErrorです。 それらを避けて、テキストエディタの拡張を助けてください。 そのため、Bracket Pair Colorizerはコード内のブラケットを異なる色でマークし、Prettierまたは同様の分析ツールを使用すると、エラーをすばやく見つけることができます。 SyntaxErrorの可能性を減らす最良のオプションは、最小限のネストです。
コメントを共有する：間違いを避けるため、または間違いを迅速に検出して排除するために、あなたは何をしますか？
Skillboxの推奨事項：