ほとんどのコードベースは、新しいアイデアや概念でいっぱいです。つまり、コードベースで作業したい場合は、それらのアイデアと概念を学ぶ必要があります。教科書とは対照的に、コードの追加の課題は、人々がそれを線形に読まないことです。彼らはどこにでも飛び込み、何が起こっているのかを大まかに理解できるはずです。コードベースの3つの部分が役立ちます

多くの賢さは、これらの最適化に向けられています。ただし、通常は必要ありません。一方では、JavaScriptエンジンはますますスマートになり、確立されたパターンに従うコードの速度を自動的に最適化します。一方、縮小ツール (第32章) は、コードを可能な限り小さくするように書き直します。どちらの場合も、ツールはあなたのために賢いため、あなたが賢くなる必要はありません。

コードのパフォーマンスを最適化する以外に選択肢がない場合があります。その場合は、必ず正しい部分を測定して最適化してください。ブラウザでは、問題は多くの場合DOMとHTMLに関連しており、言語自体には関連していません。

私は比較的タイトな空白が好きです。モデルは英語の書き方に倣います。開き括弧の後と閉じ括弧の前にはスペースを入れず、カンマの後にはスペースを入れます。

var result = foo('a', 'b');
var arr = [ 1, 2, 3 ];
if (flag) {
    ...
}

無名関数の場合、Douglas Crockford のルールに従って、キーワード function の後にスペースを入れます。その理由は、名前付き関数式から名前を削除した場合と同じ見た目になるためです。

function foo(arg) { ... }  // named function expression
function (arg) { ... }     // anonymous function expression

演算子のスコープがわかりやすくなるため、読みやすくなります。

return result ? result : theDefault;  // no
return (result ? result : theDefault);  // yes

私は、1つの宣言で複数の変数を宣言しません。

// no
var foo = 3,
    bar = 2,
    baz;

// yes
var foo = 3;
var bar = 2;
var baz;

このアプローチの利点は、行の削除、挿入、並べ替えが簡単になり、行が自動的に正しくインデントされることです。

前のルールの補足として、同じ変数を2つの異なるブロックで2回宣言しないでください。例えば

// Don’t do this
if (v) {
    var x = v;
} else {
    var x = 10;
}
doSomethingWith(x);

上記のコードは、次のコードと同じ効果と意図を持っているため、そのように記述する必要があります。

var x;
if (v) {
    x = v;
} else {
    x = 10;
}
doSomethingWith(x);

以下のことをお勧めします。

そうする主な利点は次のとおりです。

コンストラクターの場合、厳格モードを使用することが重要です。これは、インスタンス化のために new 演算子を忘れることから保護するためです。また、コンストラクターで任意のオブジェクトを返すことができることに注意してください。コンストラクターの使用に関するその他のヒントは、コンストラクター実装のヒントに記載されています。

括弧を付けた方が、このようなコンストラクターの呼び出しが見やすくなると感じています。

var foo = new Foo;  // no
var foo = new Foo();  // yes

2つの演算子が互いに競合しないように括弧を使用してください。結果は必ずしも期待どおりにならない場合があります。

> false && true || true
true
> false && (true || true)
false
> (false && true) || true
true

instanceof は特に注意が必要です。

> ! {} instanceof Array
false
> (!{}) instanceof Array
false
> !({} instanceof Array)
true

ただし、コンストラクターの後のメソッド呼び出しには問題がないと考えています。

new Foo().bar().baz();  // ok
(new Foo()).bar().baz();  // not necessary

Boolean、Number、String()、Object()（関数として使用—これらの関数をコンストラクターとして使用しないでください）を介して値を型に変換します。その理由は、この規則の方が説明的であるためです。

> +'123'  // no
123
> Number('123')  // yes
123

> ''+true  // no
'true'
> String(true)  // yes
'true'

this は、現在のメソッド呼び出しのレシーバーのみを参照する必要があります。暗黙的なパラメーターとして乱用しないでください。その理由は、このような関数は呼び出しと理解が容易になるためです。また、オブジェクト指向メカニズムと関数型メカニズムを分けておくことも好きです。

// Avoid:
function handler() {
    this.logError(...);
}

// Prefer:
function handler(context) {
    context.logError(...);
}

これは、undefined と比較したり、truthiness を確認したりするよりも、わかりやすく安全です。

// All properties:
if (obj.foo)  // no
if (obj.foo !== undefined)  // no
if ('foo' in obj) ... // yes

// Own properties:
if (obj.hasOwnProperty('foo')) ... // risky for arbitrary objects
if (Object.prototype.hasOwnProperty.call(obj, 'foo')) ... // safe