add_to_home_screen

ES 2015 構文「分割代入」を紹介

“const {foo} = var;” といった奇妙なコードを見たことはありませんか？これは ES2015 から加わった「分割代入」という構文です。

分割代入にはいくつかの書き方がありますが、直感的に使える便利な機能なので、使い方を紹介します。

目次

配列の分割代入

まずは最も簡単な配列の分割代入です——。

単純な例——配列の分割代入
  1. const numbers = ['one', 'two', 'three'];
  2.  
  3. const [one, two, three, four] = numbers;
  4. console.log(one);  // "one"
  5. console.log(two);  // "two"
  6. console.log(three);  // "three"
  7. console.log(four);  // undefined

簡単ですね。「分割代入」という言葉が直感的に感じられると思います。

では次の場合はどうでしょうか——。

スプレッド構文を使った例——配列の分割代入
  1. const numbers = ['one', 'two', 'three', 'four', 'five'];
  2.  
  3. const [one, two, three, ...more] = numbers;
  4. console.log(one);  // "one"
  5. console.log(two);  // "two"
  6. console.log(three);  // "three"
  7. console.log(more);  // ["four", "five"]

先程の例との違いは numbers に2つの要素が加わったことと変数 four が more という名前に変わったことの2点です。しかし、more には、ドットが3つ直前に加えられています。これはスプレッド構文というもので、これもまた ES2015 で新しく追加されたものです。

どんどんいきましょう♪——。

デフォルト値の設定——配列の分割代入
  1. let a, b;
  2.  
  3. [a = 1, b = 2] = [7];
  4. console.log(a);  // 7
  5. console.log(b);  // 2

これも簡単ですね。変数 a のみデフォルト値を上書きしています。

続いて、少しトリッキーな例です——。

変数の入れ替え——配列の分割代入
  1. let left = '<=';
  2. let right = '=>';
  3.  
  4. [left, right] = [right, left];
  5. console.log(left);  // "=>"
  6. console.log(right);  // "<="

変数に代入される値が入れ替わりました。配列を使った構文なのに Array オブジェクトが関係していないのが面白いところです。

興味がない要素は無視することもできます——。

要素の無視——配列の分割代入
  1. const [one, , three] = [1, 2, 3];
  2.  
  3. console.log(one);  // 1
  4. console.log(three);  // 3

2番目の要素には興味がないので変数を立てていません。もし1番目の要素も無視したいなら、[one, , three] の部分を代わりに [ , , three] という風にします。そうすれば one は 宣言されていないため ReferenceError が送出されます。試してみてください。

オブジェクトの分割代入

配列だけでなくオブジェクトも分割代入できます。よく、モジュールから公開されるオブジェクトの一部をインポートするのに使われます。

まずは次の Pen 内の3つの代入文について、どんな値が代入されるか予想してみてください。ボタンを押すと答えが確認できます。

では、オブジェクトの分割代入の使い方を紹介していきましょう——。

単純な例——オブジェクトの分割代入
  1. const obj = {a: 'エー', b: 'ビー'};
  2.  
  3. let a, b;
  4.  ({a} = obj);
  5. console.log(a);  // "エー"
  6. console.log(b);  // undefined

次は難しい使い方です——。

異なる名前を持つ変数への代入——オブジェクトの分割代入
  1. const obj = {a: 'エー', b: 'ビー'};
  2.  
  3. let a, b, x, y;
  4. ({a: x, b: y} = obj);
  5. console.log(a);  // undefined
  6. console.log(b);  // undefined
  7. console.log(x);  // "エー"
  8. console.log(y);  // "ビー"

変数 a, b の値をそれぞれ x, y という名前の変数に代入しています。コードを見たときに瞬時に理解できるようになりたいですね。

今度は、ライブラリ利用時によく見かける使い方です——。

import 文での利用——オブジェクトの分割代入
  1. import {range} from 'lodash';
  2.  
  3. console.log(range(3));  // [0, 1, 2]

この例では、Lodash から range 関数を取り出しています。Python 言語ではお馴染みの range ですが、JavaScript には代わりのものがないため便利です。Lodash にはとても多くの関数が含まれているのですが、この方法なら必要なものだけをインポートすることができます。

次は配列と考え方が同じですが、スプレッド構文を用いた例です—— 。

スプレッド構文を使った例——オブジェクトの分割代入
  1. const {a, b, ...other} = {a: 1, b: 2, c: 3, d: 4}
  2.  
  3. console.log(a);  // 1
  4. console.log(b);  // 2
  5. console.log(other);  // {c: 3, d: 4}

プロパティ名がチェインケースのキャメルケースに変換することができます——。

チェインケース→キャメルケース変換——オブジェクトの分割代入
  1. const style = { 'text-align': 'right' };
  2. const { 'text-align': textAlign } = style;
  3.  
  4. console.log(textAlign); // "right"