結局スプレット演算子って何なのかを書いていきます。
スプレット演算子とは
スプレッド構文 - JavaScript | MDN
スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。
developer.mozilla.org
スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、
0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を
期待された場所で展開したり、オブジェクト式を、
0 個以上のキーと値の組 (オブジェクトリテラルの場合) を
期待された場所で展開したりすることができます。わかりづらいので例で見てみます。
スプレット演算子を使わない場合（配列）
See the Pen
Untitled by funclur (@funclur)
on CodePen.
let numberStore = [0, 1, 2];
let newNumber = 12;
numberStore = [numberStore, newNumber];
console.log(numberStore)
// > Array [Array [0, 1, 2], 12]まずはスプレット演算子を使わない例です。
そのまま配列の中に配列が入っています。
スプレット演算子を使う場合（配列）
スプレット演算子を使うとこの配列が消えます。
つまり[0,1,2,12]にしたい時に使います。
See the Pen
Untitled by funclur (@funclur)
on CodePen.
let numberStore = [0, 1, 2];
let newNumber = 12;
numberStore = [...numberStore, newNumber];
console.log(numberStore)
// [0,1,2,12]
配列が入れ子になることなく全てルートに配置されました。
スプレット演算子を使った場合（オブジェクト）
オブジェクトも同じようにオブジェクトを階層化することなく合わせることができます。
const objectA = {'a': 1, 'b': 2,'c': 3};
const objectB = {'d': 4};
const objectC = {...objectA, ...objectB};
console.log(objectC)
//{'a': 1, 'b': 2,'c': 3,'d': 4};
See the Pen
Untitled by funclur (@funclur)
on CodePen.
スプレット演算子を使わない場合（オブジェクト）
スプレット演算子を使わない場合下記のようになります。
const objectA = {'a': 1, 'b': 2,'c': 3};
const objectB = {'d': 4};
const objectC = {objectA, objectB};
console.log(objectC)
{
"objectA": {
"a": 1,
"b": 2,
"c": 3
},
"objectB": {
"d": 4
}スプレッド演算子を使う場面
どんな時に使うの？というとあるメソッドの引数に渡したい時やapiに渡す値の時にスプレッド演算子にして渡します。
受け取り側が指定する形にして渡す必要があるからですね。
コメント