【Javascript】Spread Operator（スプレッド構文）を試してみた

初めに

配列やオブジェクトで使うと便利なスプレッド構文について学習した内容をまとめてみました。

スプレッド構文とは

MDNの公式ドキュメントには以下のように解説されています。

スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

要するに配列や文字列を必要な場所にspread(展開する）する構文です。

なぜ使うのか

理由はシンプルで、コードを短く書けるからです。数字の配列numArrがあったとします。
これに1,2,3の数字が入っている配列に、numArrの数字を追加しnewNumArrを作るとします。

const numArr = [4, 5, 6];
const newNumArr = [1, 2, 3, numArr[0], numArr[1], numArr[2]];
// [1, 2, 3, 4, 5, 6]

numArrの中身を取り出すために、numArr[0]からnumArr[2]までをいちいち書かなければなりません。

スプレッド構文を使うと簡単で短く書けます。

const numArr = [4, 5, 6];
const newNumArr = [1, 2, 3, ...numArr];
// [1, 2, 3, 4, 5, 6]

#配列でスプレッド構文を使ってみる

parkというオブジェクトのflowersという配列を追加し、新たにnewFlowersという配列を生成します。

const park = {
  name: "flower park",
  location: "東京都新宿区高田馬場３丁目",
  trees: ["ヒノキ", "竹", "松", "杉", "イチョウ"],
  flowers: ["薔薇", "桜", "朝顔", "ひまわり"],
  facilities: ["すべり台", "ブランコ", "トイレ", "噴水"],
  people: ["安田", "上村", ["鈴木", "福岡"]],
};

const newFlowers = ["梅", "水仙", "紫陽花", ...park.flowers];
console.log(newFlowers);

parkからflowersの中身を簡単に追加できちゃいます。

今度はtreesのコピー配列を生成してみました。

const newTrees = [...park.trees];
console.log(newTrees);

配列treesのコピーができました。

２つの配列を結合してみます。

const plants = [...park.trees, ...park.flowers];
console.log(plants);

文字列でスプレッド構文を使ってみる

文字列が入っているlocationをスプレッドしてみると、一文字ずつ表示されました。配列として"2","番"を追加してみると結果は配列で各文字が配列の要素になっています。

const park = {
  name: "flower park",
  location: "東京都新宿区高田馬場３丁目",
   //中略
};

console.log(...park.location);     //一文字ずつ出力される
const letters = [...park.location, "2", "番"];   
console.log(letters);     //各文字が配列の要素として表示される

#関数の呼び出しでスプレッド構文を使う
parkオブジェクトに新たにsumPriceという関数を定義します。x,y,zという３つの引数を取り、合計をコンソールに表示します。

const park = {
 //中略
  sumPrice: function (x, y, z) {
    const sum = x + y + z;
    console.log(sum);
  },
};

スプレッドを使わないケースと使うケースを比べてみました。

park.sumPrice(prices[0], prices[1], prices[2]);
park.sumPrice(...prices);      //スプレッド構文を使った場合

結果は同じ4500。

スプレッドを使った場合、シンプルで分かりやすいです。

#オブジェクトでスプレッド構文を使ってみる
parkオブジェクトのコピーしたparkCopy作ってみます。

const park = {
  name: "flower park",
  location: "東京都新宿区高田馬場３丁目",
  trees: ["ヒノキ", "竹", "松", "杉", "イチョウ"],
  flowers: ["薔薇", "桜", "朝顔", "ひまわり"],
  facilities: ["すべり台", "ブランコ", "トイレ", "噴水"],
  people: ["安田", "上村", ["鈴木", "福岡"]],
  sumPrice: function (x, y, z) {
    const sum = x + y + z;
    console.log(sum);
  },
};

const parkCopy = { ...park };    //parkオブジェクトのスプレッド
console.log(parkCopy);

parkオブジェクトの中身がparkCopyの{ }内に展開されています。このようにしてコピーを簡単に作れます。

parkの中身を追加することもできます。

const newPark = { area: 4000, ...park, fee: "free" };   //parkオブジェクトにareaとfeeを追加
console.log(newPark);

#参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax