JavaScript ベストプラクティス

❮ 前章へ 次章へ ❯

グローバル変数を避け、new を避け、== を避ける、eval() を回避します。


グローバル変数を回避する

グローバル変数の使用を最小限に抑えます。

これには、すべてのデータ型、オブジェクト、および関数が含まれます。

グローバル変数と関数は、他のスクリプトで上書きすることができます。

代わりにローカル変数を使用し、クロージャの使い方を学習します。


常にローカル変数を宣言する

関数で使用するすべての変数は、ローカル変数として宣言する必要があります。

ローカル変数は、var キーワードで宣言しなければなりません。 宣言しない変数は、全てグローバル変数になります。

Strict モードでは、宣言していない変数は使用できません。


最上位での宣言

すべての宣言を、各スクリプトまたは関数の最上位に置くのは良いコーディング習慣です。

この結果:

// Declare at the beginning
var firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price * 100 / discount;

これはループ変数にも適用されます:

// 先頭で宣言する
var i;

// その後で使用する
for (i = 0; i < 5; i++) {

デフォルトでは、JavaScript はすべての宣言を一番上に移動します(JavaScript 巻き上げ)。


変数の初期化

変数を宣言するときに、変数を初期化するのはよいコーディング習慣です。

この結果:

// Declare and initiate at the beginning
var firstName = "",
    lastName = "",
    price = 0,
    discount = 0,
    fullPrice = 0,
    myArray = [],
    myObject = {};

変数を初期化することは、意図した使用法(および、意図したデータ型)の考え方を提供します。


Number、String、Boolean オブジェクトを決して宣言しない

常に、数値、文字列、ブール値はプリミティブ値として扱います。オブジェクトとして扱いません。

これらの型をオブジェクトとして宣言すると、実行速度が遅くなり、厄介な副作用が発生します:

var x = "John";             
var y = new String("John");
(x === y) // is false because x is a string and y is an object.
Try it Yourself »

またはさらに悪いことに:

var x = new String("John");             
var y = new String("John");
(x == y) // is false because you cannot compare objects.
Try it Yourself »

new Object() を使用しない

var x1 = {};           // new オブジェクト
var x2 = "";           // new primitive string
var x3 = 0;            // new primitive number
var x4 = false;        // new primitive boolean
var x5 = [];           // new array オブジェクト
var x6 = /()/;         // new regexp オブジェクト
var x7 = function(){}; // new function オブジェクト
Try it Yourself »

自動型変換には注意

数値が、誤って文字列や NaN(Not a Number)に変換される可能性があることに注意してください。

JavaScript の型は厳密ではありません。変数には異なるデータ型を格納することができ、変数はそのデータ型を変更することができます:

var x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number
Try it Yourself »

数学的な演算を行うとき、JavaScript は数値を文字列に変換することがあります:

var x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
var x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
var x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
var x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
var x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
var x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
var x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number
Try it Yourself »

文字列から文字列を引くと、エラーにはなりませんが、NaN(Not a Number)が返されます:

"Hello" - "Dolly"    // returns NaN
Try it Yourself »

=== 比較を使用する

== 比較演算子は、比較する前に常に(一致する型に)変換します。

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

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

0 === "";       // false
1 === "1";      // false
1 === true;     // false
Try it Yourself »

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

引数を指定しないで関数を呼び出しれた場合、未指定の引数の値には undefined が設定されます。

未定義の値はコードを壊すことがあります。引数にデフォルト値を代入するのは良い習慣です。

function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }
}
Try it Yourself »

関数パラメータと引数の詳細は、関数パラメータをご覧ください。


Switche は default で終る

switch 文は、常に default で終了してください。例えそれが必要ないと思っても。

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;
    default:
        day = "Unknown";
}
Try it Yourself »

eval() の使用を避ける

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

任意のコードを実行できるため、セキュリティ上の問題もあります。


❮ 前章へ 次章へ ❯