JavaScript ベストプラクティス

グローバル変数、を避けることをお勧めしますnew、===、eval()

グローバル変数を避ける

グローバル変数の使用を最小限に抑えることをお勧めします。

すべてのデータ型、オブジェクト、関数を含みます。

グローバル変数と関数は他のスクリプトでオーバーライドされることがあります。

局所変数を使用し、それを使用する方法を学ぶことをお勧めしますクロージャ。

常に局所変数を宣言する

関数内で使用されるすべての変数は宣言されるべきです局所変数

局所変数必要を通じて var キーワードで宣言しないと、それらはグローバル変数になります。

ストリクトモードでは宣言されていない変数は許可されません。

トップで宣言

良いコーディングの習慣は、すべての宣言を各スクリプトや関数のトップに置くことです。

この方法の利点は：

  • より整然としたコードを得ます
  • 局所変数を探すのに便利な場所を提供します
  • 不要なグローバル変数を避けやすくなります
  • 不要な再宣言の可能性を減らす
// トップで宣言
var firstName, lastName, price, discount, fullPrice;
// その後使用
firstName = "Bill";
lastName = "Gates";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;

ループ変数としても使用できます：

// トップで宣言
var i;
// その後使用
for (i = 0; i < 5; i++) {

デフォルトでは、JavaScriptはすべての宣言をトップに移動します（JavaScriptのホisting）。

変数の初期化

変数を宣言する際に初期化を行うのは良い習慣です。

この方法の利点は：

  • より整然としたコード
  • 変数の初期化を別の場所で行ってください
  • 未定義の値を避けてください
// 先頭で宣言および初期化を行ってください
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

変数の初期化により、予期される用途とデータ型を理解できます。

数値、文字列、またはブール値のオブジェクトを宣言しないでください

常に数値、文字列、またはブール値をオブジェクトではなく原始値として考え、ください。

これらのデータ型をオブジェクトとして宣言すると、実行速度が遅くなり、不快な副作用が発生します：

インスタンス

var x = "Bill";             
var y = new String("Bill");
(x === y) // 結果は false、なぜなら x は文字列で y はオブジェクトだからです。

自分で試してみてください

またはさらに悪い：

インスタンス

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // 結果は false、なぜならオブジェクトを比較することができません。

自分で試してみてください

new Object()を使用しないでください

  • {}を使用して new Object() を代用してください
  • ""を使用して new String() を代用してください
  • 0を使用して new Number() を代用してください
  • falseを使用して new Boolean() を代用してください
  • []を使用して new Array() を代用してください
  • /()/を使用して new RegExp() を代用してください
  • function (){}を使用して new Function() を代用してください

インスタンス

var x1 = {};           // 新しいオブジェクト
var x2 = "";           // 新しい原始の文字列値
var x3 = 0;            // 新しい原始の数値
var x4 = false;        // 新しい原始のブール値
var x5 = [];           // 新しい配列オブジェクト
var x6 = /()/;         // 新しい正規表現
var x7 = function(){}; // 新しい関数オブジェクト

自分で試してみてください

自動的なデータ型変換に気をつけてください

数値が予期せぬ理由で文字列や NaN（数値ではありません）。

JavaScript はフレックス型です。変数は異なるデータタイプを含むことができ、変数はそのデータタイプを変更できます：

インスタンス

var x = "Hello";     // typeof x は文字列
x = 5;               // typeof x を数値に変更

自分で試してみてください

数学演算を行う場合、JavaScriptは数値を文字列に変換することができます：

インスタンス

var x = 5 + 7;       // x.valueOf() は 12、typeof x は数値
var x = 5 + "7";     // x.valueOf() は 57、typeof x は文字列
var x = "5" + 7;     // x.valueOf() は 57、typeof x は文字列
var x = 5 - 7;       // x.valueOf() は -2、typeof x は数値
var x = 5 - "7";     // x.valueOf() は -2、typeof x は数値
var x = "5" - 7;     // x.valueOf() は -2、typeof x は数値
var x = 5 - "x";     // x.valueOf() は NaN、typeof x は数値

自分で試してみてください

文字列を引き算すると、エラーが発生するのではなく、NaNが返されます。 NaN（Not a Number）：

インスタンス

"Hello" - "Dolly"    // 返回 NaN

自分で試してみてください

===を使用して比較する

== 比較演算子は比較の前に型変換を行います（型を一致させるために）。

=== 演算子は値と型を強制的に比較します：

インスタンス

0 == "";        // true
1 == "1";       // true
1 == true;      // true
0 === "";       // false
1 === "1";      // false
1 === true;     // false

自分で試してみてください

パラメータデフォルトの使用

関数を呼び出す際に引数が不足すると、欠けている引数の値はデフォルト値に設定されます。 undefined。

undefined 値が破壊する可能性があるため、パラメータにデフォルト値を設定することは良い習慣です。

インスタンス

function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }
}

自分で試してみてください

以下で関数の引数この章を読んで、関数の引数に関する詳細な内容を学んでください。

デフォルトを使用してswitchを終了する

以下を使用してください デフォルト で終了するために switch 文。必要だと思わない場合でも、含まれています。

インスタンス

switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
         break;
    case 2:
        day = "Tuesday";
         break;
    case 3:
        day = "Wednesday";
         break;
    case 4:
        day = "Thursday";
         break;
    case 5:
        day = "Friday";
         break;
    case 6:
        day = "Saturday";
         break;
    デフォルト:
        day = "Unknown";
}

自分で試してみてください

eval()の使用を避けましょう

eval() 関数はテキストをコードとして許可するために使用されます。ほぼすべての場合、必要はありません。

任意のコードの実行を許可するため、セキュリティ上の問題も同時に意味しています。