JavaScript ES6のスプレッド演算子に関するメモ







変数名に…がついた


const c = {...a,b}

みたいなコードに遭遇することがあり、「スプレッド演算子」というらしいが長い間これを使わずに曖昧な理解のまま放置していたので一旦自分の理解をまとめておきます。

MDN web docによると

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

後述するObject.assignを使ったオブジェクトのマージをさらに短く書けるのが特に便利です。

オブジェクト

例えば今まで、オブジェクトとオブジェクトをマージしたオブジェクトを作るときに

// jQuery
var a = {b:'bbb',c:'ccc'};

var b = {...a,d:'ddd'};

var result = $.extend(a,b);

とか


const a = {b:'bbb',c:'ccc'}

const b = {d:'ddd'}

const result = Object.assign(a,b)

と書いていたものが、

const a = {b:'bbb',c:'ccc'}

const result = {...a,d:'ddd'}

と書けるようになります。

Object.assign⇔スプレッド演算子、の読み替え・書き換えができることが実用上大事だと思っています。

配列

スプレット演算子によって作られる配列はもとの配列を変更しません。

なので、以下のコードは厳密には挙動が異なるので注意


const a = [1,2,3,4]
// a自体を変更する
a.push(5)
const a = [1,2,3,4]
// a自体は変更されない
const b = [...a,5]

Array#pushを用いた処理をスプレッド演算子に何も考えずに書き換えようとすると事故る場合がある、というふうに頭に留めておきます。