スプレッド演算子 ～{...object, key: value} ググラビリティの低いあいつ～

return [...array1, ...array2]; 何やこいつ…

JavaScriptを学習していたら、唐突にドットが3つ出てきました。

const array1 = [1,2,3];
const array2 = [4,5,6];

const arrayCombined = [...array1, ...array2, 7];
console.log(arrayCombined); //[1,2,3,4,5,6,7]

とか

const object1 = {"key1": 1, "key2": 2};
const object2 = {"key1": 2, "key3": 3};

const objectCombined = {...object1, ...object2, "key4": 4};
console.log(objectCombined); //{"key1": 2, "key2": 2, "key3": 3, "key4": 4}

めっちゃ調べにくかった…めっちゃ調べにくかったゾ…

スプレッド構文というらしい

3つのドットの正体は、スプレッド構文で利用するスプレッド演算子というやつでした。

MDN web docs スプレッド構文

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

スプレッド演算子を使うと、配列またはオブジェクトの要素を展開できます。
主な使いどころは、関数の引数、配列の定義、オブジェクトの定義の3つです。オブジェクトで使えるのはECMAScript2018からだそうです。
詳しい例はMDN様にお任せして、便利すぎてヤバい場面に遭遇したので書いておきます。

stateの更新をスプレッド構文でやる

ECMAScript2018からは、オブジェクトの展開にも利用できます。
あるいてっく ECMAScript 2018（ES2018）の新機能まとめ

オブジェクトを結合するとき、同じプロパティがある場合は、後ろにあるプロパティが採用されます。
これを使うと、ReduxのReducerで新しいstateを返す部分がおしゃれに書けますね。

const controlBob = (state={}, action) => {
    switch (action.type){
        "CREATE":
            return {"name": "Bob",
                    "tall":156,
                    "weight":54
                    "condition": "good"};
        "CHANGE_CONDITION":
            return {...state, "condition": action.newCondition};
}

レスト構文

JavaとかCの可変長引数みたいな使い方もできるらしいです。
[MDN web docs Rest Parameters]
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters)