【JavaScript】必須パターン

JavaScriptのより良い書き方を知りたくなったので、「JavaScriptパターン ―優れたアプリケーションのための作法」を読みました。その内、本書で「必須パターン」と呼んでいるいる内容をメモとして残します。注意としては、約10年前に出版された本なので、内容が少し古くなっているかもしれません。古い箇所は、適宜読みかえてください。

グローバル変数の数を最小にする

• 作成されたグローバル変数は、グローバルオブジェクトのプロパティになる。
• 関数の外のthisは、グローバルオブジェクト。

単独varパターン

var a = b = 0;  // ←×

var a, b;
a = b = 0;  // ←〇

• 暗黙のグローバルは、グローバルオブジェクトのプロパティである。
• 常にvarを使って変数を宣言すべき。

// 単独varパターン
var a = 1,
    b = 2,
    sum = a + b;

• 変数の宣言と初期化を同時に行う。
• ローカル変数を1箇所にまとめる。
• 巻き上げ防止。
• タイプ量が減る。

forループ

• DOMの操作は、時間がかかる。

for(var i = 0, max = myarray.length; i < max; i++){
  // 処理
}

• max = myarray.length;で、配列やコレクションの長さをキャッシュしておく。

for-inループ

• 配列に使わない。
• オブジェクトのプロパティを処理する時に使う。

組み込みプロトタイプを拡張しない

• 別の開発者は、組み込みプロトタイプが他と同じように動作すると期待するため。
• 拡張された機能があることを予想していない。

switchパターン

var inspect_me = 0,
    result = '';

switch (inspect_me){
case 0:
      result = "zero";
      break;
case 1:
      result = "one";
      break;
default:
      result = "unknown";
}

• swithとcaseのインデントを揃える
• caseの中のインデントを揃える
• caseの最後はbreak;で終わらせる
• defaultで終わらせる

暗黙の型変換を避ける

if(zero == false){  // ←×
  // 処理
}

if(zero === false){  // ←〇
  // 処理
}

• ===や!==で、値と型の両方をチェックする。

eval()を避ける

この関数は、任意の文字列を取り、それをJavaScriptのコードとして実行してしまう。setInterval(), setTimeout(), Function()コンストラクタに文字列を渡すのは、eval()を使うのと同様なので避けるべき。

parseInt()による数値変換

• 必ず基数パラメータを指定する。

parseInt(month, 10);

まとめ

「JavaScriptパターン ―優れたアプリケーションのための作法」で学んだ必須パターンは以下です。

• グローバル変数の数を最小にする
• 単独varパターン
• forループ
• for-inループ
• 組み込みプロトタイプを拡張しない
• switchパターン
• 暗黙の型変換を避ける
• eval()を避ける
• parseInt()による数値変換

感想

「JavaScriptパターン ―優れたアプリケーションのための作法」の中で、「必須パターン」と呼ばれるものについて学びました。本書を読んで先人の英知を学び、エラーの少ないコードを書けるようになりたいです。本の中で分からないことがまだまだあったので、調べて自分の知識にしていきたいです。

参考書

JavaScriptパターン ―優れたアプリケーションのための作法