Rest演算子とSpread演算子～Spread演算子で配列を展開する～【JS】(２/２)

内容

前回は関数に渡される引数を可変長にすることができるRest演算子について説明しました。

今回は配列の値を展開するSpread演算子を説明します。

Spread演算子

Spread演算子は配列の値を展開して利用したい場合に役立ちます。

２つの配列の値を１つの配列に格納する処理を例にして説明します。

２つの配列の値を１つの配列に格納したい場合ですが、下記のメソッドのように単純に配列の中に配列を格納すると、配列「animalSeason」は配列の中に配列が格納された状態となります。

test() {
      const animal = ["cat","dog","lion"];
      const season = ["april","summer","fall"];
      const animalSeason = [animal,season];
      console.log(animalSeason);
}

ではSpread演算子を使用してみます。

Spread演算子はRest演算子と同様に、変数の先頭に”…”を加えることで実現できます。

配列「animal」と「season」の先頭に” …”を加えて「animalSeason」に格納しました。

メソッドを実行します。

test() {
      const animal = ["cat","dog","lion"];
      const season = ["april","summer","fall"];
      // Spread演算子を使用
      const animalSeason = [...animal,...season];
      console.log(animalSeason);
}

「animal」と「season」の値を「animalSeason」に入れることができました。

しかし、同じような処理はconcatを使用しても実現できてしまいます。

test() {
      const animal = ["cat","dog","lion"];
      const season = ["april","summer","fall"];
      // concatを使用
      const animalSeason = animal.concat(season);
      console.log(animalSeason);
}

では、Spread演算子を利用することで何が嬉しいのでしょうか。

Spread演算子では結合したい配列のほかに、任意の値も格納することができます。

下記では「animalSeason」に直接”apple”と”orange”を格納しています。

test() {
      const animal = ["cat","dog","lion"];
      const season = ["april","summer","fall"];
      // appleとorangeを格納
      const animalSeason = ["apple",...animal,"orange",...season];
      console.log(animalSeason);
}

このように、より柔軟に配列に値を格納することができます。