JavaScriptのベストプラクティス
グローバル変数を避けるnew、避ける、避ける==、避けるeval()
グローバル変数を避ける
グローバル変数の使用を最小限に抑えます。
これには、すべてのデータ型、オブジェクト、および関数が含まれます。
グローバル変数と関数は、他のスクリプトで上書きできます。
代わりにローカル変数を使用し、 クロージャの使用方法を学びます。
常にローカル変数を宣言する
関数で使用されるすべての変数は、ローカル変数として宣言する必要があります。
ローカル変数は、
keywordまたはkeyword、あるいはkeywordで宣言する必要があります。そうしないと、グローバル変数になります。varletconst
厳密モードでは、宣言されていない変数は許可されません。
上の宣言
すべての宣言を各スクリプトまたは関数の先頭に配置することをお勧めします。
この意志：
- よりクリーンなコードを与える
- ローカル変数を探すための単一の場所を提供する
- 不要な（暗黙の）グローバル変数を簡単に回避できるようにする
- 不要な再宣言の可能性を減らします
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;
これはループ変数にも当てはまります。
for (let i = 0; i < 5; i++)
{
変数を初期化する
変数を宣言するときに変数を初期化することをお勧めします。
この意志：
- よりクリーンなコードを与える
- 変数を初期化するための単一の場所を提供する
- 未定義の値を避けてください
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};
変数を初期化すると、使用目的（および使用目的のデータ型）がわかります。
constでオブジェクトを宣言する
constを使用してオブジェクトを宣言すると、タイプが誤って変更されるのを防ぐことができます。
例
let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Changes object to string
const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Not possible
constを使用して配列を宣言します
constを使用して配列を宣言すると、タイプの偶発的な変更を防ぐことができます。
例
let cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Changes array to number
const cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Not possible
new Object（）を使用しないでください
""の代わりに使用new String()0の代わりに使用new Number()falseの代わりに使用new Boolean(){}の代わりに使用new Object()[]の代わりに使用new Array()/()/の代わりに使用new RegExp()function (){}の代わりに使用new Function()
例
let x1 = ""; // new primitive string
let x2 = 0; // new primitive number
let x3 = false; // new primitive boolean
const x4 = {}; // new object
const x5 = []; // new array object
const x6 = /()/; // new regexp object
const x7 = function(){}; // new function object
自動型変換に注意してください
JavaScriptは大まかに型付けされています。
変数には、すべてのデータ型を含めることができます。
変数はそのデータ型を変更できます。
例
let x = "Hello"; // typeof x is a string
x = 5; // changes typeof x to a number
数字が誤って文字列またはNaN（数字ではない）に変換される可能性があることに注意してください。
数学演算を行う場合、JavaScriptは数値を文字列に変換できます。
例
let x = 5 + 7; // x.valueOf() is 12, typeof x is a number
let x = 5 + "7"; // x.valueOf() is 57, typeof x is a string
let x = "5" + 7; // x.valueOf() is 57, typeof x is a string
let x = 5 - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "7"; // x.valueOf() is -2, typeof x is a number
let x = "5" - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "x"; // x.valueOf() is NaN, typeof x is a number
文字列から文字列を減算すると、エラーは生成されませんがNaN、（数値ではなく）が返されます。
例
"Hello" - "Dolly" // returns NaN
使用===比較
==比較演算子は、比較前に常に（一致する型に）変換します。
===演算子は、値とタイプの比較を強制します。
例
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true;
// false
パラメータのデフォルトを使用
引数が欠落している関数が呼び出された場合、引数が欠落している値はに設定され
undefinedます。
未定義の値はコードを壊す可能性があります。引数にデフォルト値を割り当てるのは良い習慣です。
例
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
ECMAScript 2015では、関数定義でデフォルトのパラメーターを使用できます。
function (a=1, b=1) { /*function code*/ }
関数パラメーターと引数の詳細については、関数パラメーターを参照してください。
デフォルトでスイッチを終了する
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";
}
オブジェクトとしての数値、文字列、ブール値は避けてください
数値、文字列、またはブール値は常にプリミティブ値として扱います。オブジェクトとしてではありません。
これらのタイプをオブジェクトとして宣言すると、実行速度が低下し、厄介な副作用が発生します。
例
let x = "John";
let y = new String("John");
(x === y) // is false because x is a string and y is an object.
さらに悪いことに：
例
let x = new String("John");
let y = new String("John");
(x == y) // is false because you cannot compare objects.
eval（）の使用は避けてください
このeval()関数は、テキストをコードとして実行するために使用されます。ほとんどの場合、それを使用する必要はありません。
任意のコードを実行できるため、セキュリティ上の問題も発生します。