私のベストプラクティス – JavaScript

1. キャッシュを無効にする

Firefox:
開発ツールを開く -> 設定を開く (F1) -> "Disable HTTP Cache (when toolbox is open)"

Chrome:
デベロッパーツールを開く -> 設定を開く (F1) -> "Disable cache (while DevTools is open)"

2. JSコンソールを開いたままにする

DevToolsでコンソールタブを開き、そのままにしておきましょう。そうすればステップ1の設定が有効なままになり、ネットワークやJSのエラーにもすぐ気づけます。

うっかり見落としたときのために、JSのエラーをさらにわかりやすく表示してくれる次のプラグインもおすすめです：

3. JavaScript：必読書『You Don't Know JS』

• You Don't Know JS (1st Edition)
• thisを避けるべき理由がわかる
• JSで一見おかしなことが起きる理由がわかる（キーワードはレキシカルスコープ、クロージャ）

4. セミコロン

• 必ず付ける
• 必須ではありませんが、例えば次の落とし穴を避けるのに役立ちます：Stack Overflow
• JavaScriptは自動的にセミコロンを挿入します：

// you want to return 5 and have ugly formatting:
return
5

// JavaScript Interpretation:
return;
5;

5. 論理演算子&&と||

• Javaでは、a && bとa || bはブール代数に従って評価されます。aとbはブール値でなければなりません。
• JavaScriptでは：
  • a && bは、aがtrueならbを返す
  • a || bは、aがfalseならbを返す

式もこのようにつなげられるので、これ以上ないほど短いif文が書けます。いわゆるシンタックスシュガーです：

• isAdmin && showDeleteButton();
• （厳密に言えば、これはもう文ではありません）

デフォルト値の指定にもよく使われます：

• let sendNewsletter = form.getNewsletterOptIn() || false;

6. JavaScriptは参照渡し？それとも値渡し？

JavaScriptでは、ここが面白いところです。例：

function changeStuff(a, b, c) {
    a = a * 10;
    b.item = "changed";
    c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);
console.log(obj2.item);

出力は次のとおりです：

10
changed
unchanged

もしobj1がまったく参照でなかったとしたら、obj1.itemを変更しても、関数の外にあるobj1にはまったく影響しないはずです。

逆に引数が本物の参照だったとしたら、すべてが変わるはずです。numは100になり、obj2.itemは「changed」になるでしょう。実際には、numは10のまま、obj2.itemも「unchanged」のままです。

実は、渡された要素は値渡しされています。ただし、値として渡されるもの自体が参照なのです。技術的には、これは共有渡し（call by sharing）と呼ばれます。

実際のところ、これは次のような意味になります。パラメーターそのものを変更しても（numやobj2のように）、関数に渡された元のオブジェクトには影響しません。一方、パラメーターの内部の値を変更すると、その変更は反映されます（obj1のように）。