上位11の最も一般的なJavaScriptエラー

JavaScriptは習得が比較的簡単な言語です。 ただし、それには十分なエラーがあります。 それらを許可しませんか？ 今日は、最もよくある11の間違いを見ていきます。

間違い1-グローバル変数の使用

JavaScriptにしか精通していないのであれば、すべての変数がグローバルであるときにこれが素晴らしいと思うでしょう。 実際、このツールのすべての複雑さを知っているとは限りません。 グローバル変数は、別の.jsファイルにロードされている場合でも、コードのどの部分からでもアクセスできる変数です。 魅力的ですね。 すべての変数は常に変更可能です。

実際、いいえ。

意図せずに値を上書きする可能性があるため、これは悪い考えです。 あなたがオンラインストアを持っていて、JavaScriptを使用してバスケットに追加されたアイテムの価格の合計を計算するとします。 サンプルコードを次に示します。

var total = 0, //   tax = 0.05; // 5% 

コードを使用してページにツイートを表示したり、製品のミニギャラリーを作成したりするとします。 そして、次のようなコードが含まれている可能性があります。

 var total = 15; // -   twitter 

または

 var tax = function () { /* ... */ }; //    

これで問題が発生しました。 2つの重要な変数が上書きされ、コードが適切に機能していません。 それを支払うことは、書き換えに費やされる貴重な時間です。


それで解決策は何ですか？ つまり、 カプセル化 ; しかし、これを回避する方法は他にもたくさんあります。 最初に、呼び出し自体、匿名関数の形式ですべてのコードを記述できます。

 (function () { var total = 0, tax = 0.05; // -  }()); 

そして、外部からのコードは関数内のコードに到達しません。 これは「個人用」コードには適していますが、必要な機能を提供しません。 たとえば、他の人がテンプレートとして使用できるバスケットカウンターが必要な場合は、次のようにするとよいでしょう。

 var cartTotaler = (function () { var total = 0; tax = 0.05; //   return { addItem : function (item) { }, removeItem : function (item) { }, calculateTitle : function () { } }; }()); 

グローバル変数についてもう少し：変数の作成時にvarキーワードを使用しない場合、JavaScriptエンジンはデフォルトでグローバルとして定義することに注意してください。 例：

  (function () { tax = 0.05; }()); var totalPrice = 100 + (100 * tax); // 105 

税変数は関数の外部で使用できます。これは、宣言時にvarという単語が使用されなかったためです。 これに注意してください。

エラー2-セミコロンを忘れた

JavaScriptのステートメントはセミコロンで終わる必要があります。 とても簡単です。 忘れてしまった場合、コンパイラがあなたのために仕事をします。 だから、あなたはそれらを置くことはできませんか？

まあ、いくつかの場所でこれは重要です。 たとえば、ループ本体で複数のステートメントを実行している場合。 そうしないと、コンパイラーはエラーをスローします。 行の終わりはどうですか？

JavaScriptコミュニティはこれに分かれています。 バリケードの両側には強い議論があります。 私の主張は次のとおりです。この質問でコンパイラに依存している場合（最も単純なコードであっても）、火で遊んでいます。

たとえば、次のような単純な関数：

 function returnPerson (name) { return { name : name }; } 

それは素敵な小さなオブジェクトを返すはずです...しかし、コンパイラは、リターン後にセミコロンを入れたいと判断するので、何も返されず、オブジェクトは無視されます。 次のことを行う必要があります。

 return { name : name }; 

したがって、あなたへの私のアドバイスはセミコロンを置くことです。 正直なところ、それはかなり早く習慣になります。 ただし、Web開発者としては、おそらくセミコロンを入れる必要のない他の言語（PHPなど）を使用します。 それならなぜ？

注：下げることが許可されている各状況がわからない場合は、リスクを冒さない方が良いでしょう。

間違い3-==の使用

最初のJavaScript開発者に「JavaScriptで最も一般的なエラーは何ですか？」と尋ねると、ほとんどの場合、「===の代わりに==を使用」と答えます。 これはどういう意味ですか？

これを試してください：

 if (1 == 1) { console.log("!"); } 

コードが機能することを期待していましたか？ では、次を試してください。

 if (1 == '1') { console.log("!"); } 

はい、「真実！」コンソールにポップアップ表示されます...そして、それは悪いことです。 ここでは次のことが行われます。==は等化演算子です。 2つの変数を可能な限り類似させます。 この場合、文字列「1」は数値1に変換され、if-statementはtrueを返します 。

あなたが理解しているように、解決策は===;を使用することです。 これはすべて、演算子の場合に有効です！==および！=。

そして今、楽しみのために、二重の平等から生まれたいくつかの最高の間違い：

 '' == '0' // false '0' == '' // true false == '0' // true ' \t\r\n ' == 0 // true 

間違い4-タイプをラップするオブジェクトの使用

JavaScript（！）親切に（！）型を簡単に作成するための型ラッパーを提供します。

 new Number(10); new String("!"); new Boolean(true); new Object(); new Array("", "", ""); 

まず、非常に不便です。 これはすべて、非常に少ない数のキーストロークで実行できます。

 10; ""; true; {}; ["", "", ""]; 

しかし、それだけではありません。これらの2つのことはまったく同じではありません。 ダグラス・クロックフォード*がこの主題について言っていることは次のとおりです。

たとえば、 新しいブール値（false）は、ラップされた値を返すvalueOfメソッドを持つオブジェクトを生成します。
-JavaScript：良い部品、114ページ

これは、 typeof new Number（10）またはtypeof new String（ "Hello！"）を実行すると、「オブジェクト」が得られることを意味します-望んだものではありません。 さらに、シェルを使用すると、予期しない反応が発生する可能性があります。

では、なぜJavaScriptがこれらのオブジェクトを提供するのでしょうか？ 内部使用。 プリミティブ値にはメソッドがありません（オブジェクトではないため）。 そのため、プリミティブオブジェクトでメソッドが呼び出されると（たとえば、 "Hello people！" replace（ "people"、 "habralyudi"））、JavaScriptは文字列のラッパーを作成し、ジョブを実行してからオブジェクトを破棄します。

JavaScriptのラッパーをそのままにして、プリミティブ値を使用します。

エラー5-For-In使用時の属性検証なし

私たちはすべて配列の列挙に精通しています。 ただし、オブジェクトのプロパティを反復処理する必要がある場合があります。 （余談。実際、配列の要素は、1つのオブジェクトの番号付きプロパティです。）これをまだ行っていない場合は、For-Inループを使用しました。

  var prop, obj = { name: "", job: "", age: 55 }; for (var prop in obj) { console.log(prop + ": " + obj[prop]); } 

このコードを実行すると、次の出力が表示されます。

 name:  job:  age: 55 

ただし、ブラウザには、チェーンのさらに下にプロパティとメソッドが含まれます。 ほとんどの場合、これらのプロパティを一覧表示したくないでしょう。 hasOwnPropertiesを使用して、オブジェクトではないプロパティを除外する必要があります。

 Function Dog (name) { this.name = name; } Dog.prototype.legs = 4; Dog.prototype.speak = function () { return "!"; }; var d = new Dog(""); for (var prop in d) { console.log( prop + ": " + d[prop] ); } console.log("====="); for (var prop in d) { if (d.hasOwnProperty(prop)) { console.log( prop + ": " + d[prop] ); } } // Output // name:  // legs: 4 // speak: function () { return "!"; // } // ===== // name:  

プロパティが必要な場合もありますが、いくつかのメソッドを除外したい場合があります。 これはtypeofを使用して実行できます。

 for (var prop in d) { if (typeof d[prop] !== 'function') { console.log( prop + ": " + d[prop] ); } } 

いずれにせよ、不要な結果を避けるために、for-in式は常に明確です。

エラー6- withまたはevalの使用

幸いなことに、今日のほとんどの情報源はevalで学習していません。 ただし、古いソースまたはあまり信頼できないソースを使用する場合（インターネット上で優れた資料を見つけるのは非常に困難な場合があります）、 そこで検索または評価して使用できます。 ひどいスタート、開発者。

それでは、始めましょう。 使用できない2つの主な理由：

1. コードが遅くなります。
2. あなたが何をしているのかは必ずしも明確ではありません。

ポイント1は地面に立つ。 それでは、少し見てみましょう。 withの仕組みは次のとおりです。オブジェクトをwith-expressionに送信します。 次に、withブロック内で、変数としてオブジェクトのプロパティにアクセスできます。

 var person = { name: "", age : 10 }; with (person) { console.log(name); // console.log(age); // 10 } 

しかし、withオブジェクトのプロパティと同じ名前の変数がある場合はどうでしょうか？ 基本的に、両方がある場合、変数が使用されます。 ただし、with内のオブジェクトにプロパティを追加することはできません。 プロパティがない場合、または変数が存在する場合、変数はwithステートメントの外部からこれを実行できます。

 var person = { name: "", age : 10 }, name = ""; with (person) { console.log(name); //  job = ""; } console.log(person.job); // ; console.log(job); //  

evalに移りましょう。 簡単に言えば、コード行を関数に渡すと、それが実行されます。

 eval( "Console.log('!');" ); 

無害に聞こえますが、さらに強力に聞こえますか？ 実際、これが主な問題です-パワーが大きすぎます。 明らかに、このような行を書く理由はありません。なぜなら、1）なぜ簡単な方法で書かないのか？ そして、2）evalは同様にスローダウンします。 したがって、evalの主な用途は、現時点では必要のないコードを実行することです。 サーバーから、またはユーザーから直接受け取ることができます。 サイトユーザーにコードの完全な制御を許可してもよろしいですか？ しないことを望みます。 さらに、彼はハッカーのために彼のウェブサイトを開きます。EVALの使用は、「私は離れていて、鍵は敷物の下にあります」というサインです。あなた自身またはユーザーを愛しているなら、それを使わないでください。

エラー7- parseIntを使用する際に番号システムを使用することを忘れる

JavaScriptは、数字を含む文字列を数字に変換するのに役立つ小さな関数を提供します。

 parseInt("200"); // 200 parseInt("043"); // 35 

そして、そこで何が起こったのですか？ 2番目の例は43であってはなりませんか？ 実際、 parseIntは10進システムでのみ機能しません。 0で始まる行を見ると、彼はそれを8進数と見なします。 したがって、番号体系を忘れてはなりません。 彼らは基数について関数を話します。

 parseInt("020", 10); // 20 parseInt("100", 2); // 4 

エラー8- ifおよびwhile ステートメントを使用する場合 、括弧は使用されません

JavaScriptのメリットの1つは柔軟性です。 しかし、時には彼女はあなたに背を向けることができます。 これは、複合ifおよびwhile ステートメントの中括弧で発生します。 ステートメントにコードが1行しかない場合、括弧はオプションです。

 if (true) console.log("  if"); 

同じ行でステートメントを継続できるため、これは非常に便利です。

  var arr = ["", "", "", "", "", "", "", "", "", ""], i = arr.length - i; while (i) console.log( arr[i--] ); 

しかし、これはいくつかの理由で合理的ではありません。 まず、この手法は不明確です。

 if (true) console.log("  if"); console.log("  if"); 

意味がわかりますか？ 2行目は演算子の中にありませんが、非常に信じられそうです。 ブラケットはここに明確さをもたらします。 また、ifに行を追加する場合は、角かっこを忘れないでください。 すぐに追加した方がはるかに簡単です。 やれ

エラー9-要素を1つずつDOMに追加する

はい、はい、これはJavaScriptではありません。 ただし、100のうち99の場合、JavaScriptはDOMに影響します。 DOMには多くの間違いがありますが、ここに最大の間違いがあります。

JavaScriptを使用してDOM要素を埋め込むのは楽しくて便利ですが、残念ながらページをロードします。 したがって、多数のDOM要素を1つずつ挿入するのは悪い考えです。

 var list = document.getElementById("list"), items = ["", "", "", ""], el; for (var i = 0; items[i]; i++) { el = document.createElement("li"); el.appendChild( document.createTextNode(items[i]) ); list.appendChild(el); //    } 

代わりに行うべきことは次のとおりです。ドキュメントの断片を使用します。 ドキュメントフラグメント-DOM要素を保存するためのコンテナ。 その後、個別に挿入する代わりに、すべてを一気に実行できます。 ドキュメントフラグメントはそれ自体がノードではないため、オブジェクトモデルで表示しても何も起こりません。 DOMをレイアウトする前に要素を保持するための目に見えないネットワークになります。 以下に例を示します。

  var list = document.getElementById("list"), frag = document.createDocumentFragment(), items = ["", "", "", ""], el; for (var i = 0; items[i]; i++) { el = document.createElement("li"); el.appendChild( document.createTextNode(items[i]) ); frag.appendChild(el); // ! } list.appendChild(frag); 

エラー10-JavaScriptを学習しません

JavaScriptはjQueryではありません 。 わかった 上記のエラーのいくつかを行う場合、おそらくJavaScriptを読む必要があります。 JavaScriptはほとんど、またはまったく学習せずに使用できる言語であるため、多くの人がJavaScriptに時間を浪費しません。 それらのいずれかにしないでください。 優れた言語の教科書がたくさんあるので、言い訳はありません。 知っているのがjQuery（MooToolsなど）だけなら、あなたは自分を悪い場所に置いていることになります。

多くの人はJavaScriptを適切に学習する時間を無駄にしません。

エラー11-すべてのルールに従います

最後の最後の間違い-あなたはすべてのルールに従います。 はい、一部はここにリストされています。 他のすべての人と同様に、それらを破るためのルール。 実際には、1つまたは別の手法を使用できない理由を理解すると、 適切な状況で正しく適用できるツールになります。 同じevalがJSONを解析する唯一の方法です。 もちろん、セキュリティを適切にチェックする方法はたくさんあります（ライブラリを使用する方が良いです）。 自分が何をしているかを知っていて、それが必要な場合、「悪い練習」を使うことを恐れてはいけません。

もちろん、間違いを犯さないでください10。

---

Douglas Crockford-アメリカのプログラマー、JavaScriptの開発者、人気のあるJSON、Yahooの主要な開発者、およびYahooUIライブラリの作成者。