変数宣言の中括弧の秘密を明らかにする

JavaScript でよく見かける構文 var { ... } = ...アドオン SDK ドキュメントと Chrome Javascript は、最初は複雑に思えるかもしれません。ただし、これは構造化代入として知られる強力な機能を表します。

構造化代入により、オブジェクトと配列から効率的に値を抽出し、オブジェクトと配列のリテラル構文を使用してそれらを新しく宣言された変数に割り当てることができます。次の例を考えてみましょう:

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var {a, b, c} = ascii;

このコードは、ascii オブジェクトから特定のプロパティ (a、b、c) を効果的に抽出し、プロパティごとに個別の変数を作成します。このアプローチによりコードが合理化され、

var a = ascii.a;
var b = ascii.b;
var c = ascii.c;

同様に、以下に示すように、配列の構造化代入を利用できます。

var ascii = [97, 98, 99];

var [a, b, c] = ascii;

このコードは次のコードと同等です。

var a = ascii[0];
var b = ascii[1];
var c = ascii[2];

さらに、代入を分割すると、抽出中にプロパティの名前を変更できます。例:

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var {a: A, b: B, c: C} = ascii;

このコードは、ascii オブジェクトのプロパティ a、b、および c に対応する値を持つ変数 A、B、および C を作成します。