“const {foo} = var;” といった奇妙なコードを見たことはありませんか?これは ES2015 から加わった「分割代入」という構文です。
分割代入にはいくつかの書き方がありますが、直感的に使える便利な機能なので、使い方を紹介します。
配列の分割代入
まずは最も簡単な配列の分割代入です——。
- const numbers = ['one', 'two', 'three'];
-
- const [one, two, three, four] = numbers;
- console.log(one); // "one"
- console.log(two); // "two"
- console.log(three); // "three"
- console.log(four); // undefined
簡単ですね。「分割代入」という言葉が直感的に感じられると思います。
では次の場合はどうでしょうか——。
- const numbers = ['one', 'two', 'three', 'four', 'five'];
-
- const [one, two, three, ...more] = numbers;
- console.log(one); // "one"
- console.log(two); // "two"
- console.log(three); // "three"
- console.log(more); // ["four", "five"]
先程の例との違いは numbers
に2つの要素が加わったことと変数 four
が more
という名前に変わったことの2点です。しかし、more
には、ドットが3つ直前に加えられています。これはスプレッド構文というもので、これもまた ES2015 で新しく追加されたものです。
どんどんいきましょう♪——。
- let a, b;
-
- [a = 1, b = 2] = [7];
- console.log(a); // 7
- console.log(b); // 2
これも簡単ですね。変数 a
のみデフォルト値を上書きしています。
続いて、少しトリッキーな例です——。
- let left = '<=';
- let right = '=>';
-
- [left, right] = [right, left];
- console.log(left); // "=>"
- console.log(right); // "<="
変数に代入される値が入れ替わりました。配列を使った構文なのに Array オブジェクトが関係していないのが面白いところです。
興味がない要素は無視することもできます——。
- const [one, , three] = [1, 2, 3];
-
- console.log(one); // 1
- console.log(three); // 3
2番目の要素には興味がないので変数を立てていません。もし1番目の要素も無視したいなら、[one, , three]
の部分を代わりに [ , , three]
という風にします。そうすれば one
は 宣言されていないため ReferenceError
が送出されます。試してみてください。
オブジェクトの分割代入
配列だけでなくオブジェクトも分割代入できます。よく、モジュールから公開されるオブジェクトの一部をインポートするのに使われます。
まずは次の Pen 内の3つの代入文について、どんな値が代入されるか予想してみてください。ボタンを押すと答えが確認できます。
では、オブジェクトの分割代入の使い方を紹介していきましょう——。
- const obj = {a: 'エー', b: 'ビー'};
-
- let a, b;
- ({a} = obj);
- console.log(a); // "エー"
- console.log(b); // undefined
次は難しい使い方です——。
- const obj = {a: 'エー', b: 'ビー'};
-
- let a, b, x, y;
- ({a: x, b: y} = obj);
- console.log(a); // undefined
- console.log(b); // undefined
- console.log(x); // "エー"
- console.log(y); // "ビー"
変数 a
, b
の値をそれぞれ x
, y
という名前の変数に代入しています。コードを見たときに瞬時に理解できるようになりたいですね。
今度は、ライブラリ利用時によく見かける使い方です——。
- import {range} from 'lodash';
-
- console.log(range(3)); // [0, 1, 2]
この例では、Lodash から range
関数を取り出しています。Python 言語ではお馴染みの range
ですが、JavaScript には代わりのものがないため便利です。Lodash にはとても多くの関数が含まれているのですが、この方法なら必要なものだけをインポートすることができます。
次は配列と考え方が同じですが、スプレッド構文を用いた例です—— 。
- const {a, b, ...other} = {a: 1, b: 2, c: 3, d: 4}
-
- console.log(a); // 1
- console.log(b); // 2
- console.log(other); // {c: 3, d: 4}
プロパティ名がチェインケースのキャメルケースに変換することができます——。
- const style = { 'text-align': 'right' };
- const { 'text-align': textAlign } = style;
-
- console.log(textAlign); // "right"