『JavaScriptパターン』読書メモ


単独varパターン:関数の先頭でvar文をひとつにまとめる

  • その関数で必要なすべてのローカル変数が一目でわかる
  • 変数定義前に変数を使用してしまうエラーを予防できる
function func() {
var a = 1,
b = 2,
sum = a + b,
myObject = {},
i,
j;
// do something...
}

for文:配列を回すときはキャッシュする

for (var i = 0; i < array.length; i++)

上記for文では、ループの回数分 array.length の計算が行われるため、配列が巨大化すると、パフォーマンスが悪化する。

以下のように、for文の初期化の時点で一度だけ array.length を求め、その値を変数に入れて使うようにすれば、この問題を回避できる。

for (var i = 0, max = array.length; i < max; i++)

さらに、比較をせずに0に向けてカウントダウンするというパターンもある。この方法のほうがパフォーマンスが良い。

for (var i = array.length; i > 0; i--)

for-in文:オブジェクトはfor-inで回す

// man オブジェクトを定義
var man = {
hands: 2,
legs: 2,
heads: 1
};
// すべてのオブジェクトにメソッドを追加
if (typeof Object.prototype.clone === "undefined") {
Object.prototype.clone = function() {};
}
// アンチパターン(hasOwnProperty()で確認してない)
for (var i in man) {
console.log(man[i]); // clone: function() {} が表示される
}
// 自分自身のプロパティかどうかのチェックを挟む
for (var i in man) {
if (object.hasOwnProperty(i)) {
console.log(man[i]);
}
}
// よりパフォーマンスの良いバージョン
var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
if (hasOwn.call(man, i)) {
console.log(man[i]);
}
}

switch文

var inspect_me = 0,
result = '';
switch (inspect_me) {
case 0:
result = "zero";
break;
case 1:
result = "one";
break;
default:
result = "unknown";
}
  • caseの最後はbreakで終わらせる
  • breakを省略して次のcaseに続けるのは避ける
  • switchの最後はdefault:で終わらせる

暗黙の型変換を避ける

値を比較する際は、==ではなく、===を使う。

if (0 === false) {
// ここは実行されない
}
if (0 == false) {
// 数値と真偽値の比較なので、右辺のfalseが数値に変換され0になる。
// すると、0と0は等しいので、0 == falseはtrueになる。
// したがって、ここは実行される
}

eval()を避ける

  • “eval() is evil”
  • eval()を使いたい場面では、ほとんどの場合、eval()以外の方法の方が、安全な処理を行うことができる

parseInt()による数値変換時には、基数を設定する

var month = "06",
year = "09";
month = parseInt(month, 10);
year = parseInt(year, 10);

第2引数を省略すると、”0″で始まる文字列は8進数として評価される。
この仕様は、ECMAScript 5では変更されたが、現在のほとんどのJavaScript実装(ECMAScript 3)では、parseInt(“09”)は9ではなく0を返す。

また、parseInt()以外の方法で文字列を数値に変換することもできる。

+"09"; // 9
Number("09"); // 9

波括弧は省略しない

for (var i = 0; i < 10; i += 1)
console.log(i);
console.log(i + " is " + (i % 2 ? "odd" : "even"));

2つ目のconsole.logは、for文の外側にある。

セミコロンは省略しない

JavaScriptでは、行末のセミコロンを省略できる場合がある。しかし、セミコロンを省略すると保守性が低下し、思わぬバグの原因となる。

コメントを残す

コメントを残す