概要

JavaScriptのドット３つ、もといスプレッド演算子の便利な使い方をご紹介。
「スプレッド」という名前の通り、配列やオブジェクトの中身を展開するような使い方をする。

スプレッド構文を使うと、関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。

スプレッド演算子 - MDN web docs

使い方

関数呼び出し

const myFunction = (a, b) => {
  console.log(`received ${a} and ${b}`)
}
iterableObj = ['arg1', 'arg2']

myFunction(...iterableObj);

配列リテラル

…iterableObjを配列の中で展開することができる。

const iterableObj = [1, 2, 3]
[...iterableObj, 4, 5, 6]
// [1, 2, 3, 4, 5, 6]

配列の複製

var arr = [1, 2, 3];
var arr2 = [...arr];

配列のマージ

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr2, ...arr1];

Objectリテラル

継承元のプロパティを除いた浅いコピーの作成や、オブジェクトのマージがObject.assign()を使うよりも短く書ける

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

配列にオブジェクト展開はできない

ObjectにはObjectリテラルを使う

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable
var obj2 = {...obj}; // {'key1': 'value1'}

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax