JavaScriptのレスト構文とスプレッド構文の使い方

2021年1月24日JavaScript

JavaScriptのレスト構文とスプレッド構文の使い方をまとめました。

レスト構文とスプレッド構文の違い

レスト構文は、スプレッド構文と同じく…を使いますが、反対の挙動をします。スプレッド構文は新しい配列をつくるときか、関数に複数の値を渡すときに使います。
レスト構文は「…」を使って一つの配列を作ります。
スプレッド構文はunpackするのに対し、レスト構文はpackするというイメージです。


//スプレッド構文は=の右側
const arr = [4, 5, ...[6, 7]];

//レスト構文は=の左側
const [a, b, ...others] = [4, 5, 6, 7, 8];
console.log(a,b,others);

このように、スプレッド構文は=の右側、レスト構文は=の左側で使います。
レスト構文とスプレッド構文を同時に使う具体例を紹介します。

レスト構文とスプレッド構文を同時に使う具体例

{
  const restaurantS = {
    name: 'レストランsakaso',
    location: '京都、日本',
    categories: ['中華', '和食', 'フレンチ', 'イタリアン'],
    starterMenu: ['シーザーサラダ', '大根サラダ', '青じそサラダ', 'チキンサラダ'],
    mainMenu: ['カレー', 'ハンバーグ', 'スパゲッティ'],
};

const [,daikonSalad, , ...otherFood] = [...restaurantS.starterMenu, ...restaurantS.mainMenu];
console.log(daikonSalad, otherFood);
//大根サラダ (4) ["チキンサラダ", "カレー", "ハンバーグ", "スパゲッティ"]
}

このように、指定してるもの以外はすべてレスト構文に配列としてまとめることができます。このチキンサラダがotherfoodに含まれているように、残りすべてを配列にまとめるため、レスト構文は一番最後に書く必要があります。

レスト構文とオブジェクト

オブジェクトでも利用可能です。
たとえば、土曜日以外をウィークデイにまとめたいとします。

{
  const restaurantS = {
  name: 'レストランsakaso',
  location: '尼崎、日本',
  categories: ['中華', '和食', 'フレンチ', 'イタリアン'],
  starterMenu: ['シーザーサラダ', '大根サラダ', '青じそサラダ', 'チキンサラダ'],
  mainMenu: ['カレー', 'ハンバーグ', 'スパゲッティ'],

  openingHours: {
    thu: {
      open: 12,
      close: 22,
    },
    fri: {
      open: 11,
      close: 23,
    },
    sat: {
      open: 0, // Open 24 hours
      close: 24,
    },
  }
}
const {sat, ...weekdays} = restaurantS.openingHours;
console.log(weekdays);
//{thu: {…}, fri: {…}}
}

レストパラメータと関数

スプレッド構文は関数に複数の値を渡すときに使いますが、レスト構文は反対の動作をします。仮引数としてレスト構文を使うとき、「レストパラメータ」と呼ばれます。具体例をみてみましょう。

{
  const add = function(...numbers) {
    console.log(numbers);

    let sum = 0;
    for(let i = 0; i < numbers.length; i++) {
      sum += numbers[i];
    }
    console.log(sum);//それぞれの配列合計を算出できる
  };
  add(1,2);  //(2) [1, 2]
  add(3,4,5,6);// (4) [3, 4, 5, 6]
  add(7,8,9,10);// (4) [7, 8, 9, 10]

  //配列を用意してレスとパラメーターに渡せる。
  const y = [10, 20, 30];
  add(...y); //60が返される

  //レストパラメータを使わない場合、
  const add2 = function(a,b,c,d) {
    console.log(a,b,c,d);
  };
  add2(1,2);  //1, 2,undefined,undefined
  add2(3,4,5,6);// 3, 4, 5, 6
  add2(7,8,9,10);// 7, 8, 9, 10

}

このように、レストパラメータを使うと、複数の独立した値を一つの配列にパックすることができます。

より具体的な使われ方をみてみましょう。

レストパラメーターで自由に配列にまとめる

{
  const restaurantS = {
  name: 'レストランsakaso',
  location: '尼崎、日本',
  categories: ['中華', '和食', 'フレンチ', 'イタリアン'],
  starterMenu: ['シーザーサラダ', '大根サラダ', '青じそサラダ', 'チキンサラダ'],
  mainMenu: ['カレー', 'ハンバーグ', 'スパゲッティ'],

    orderSupagetti: function(mainIngredient, ...otherIngredients) {
      console.log(mainIngredient);
      console.log(otherIngredients);
    }
}
restaurantS.orderSupagetti('エビ', 'たまねぎ', 'マッシュルーム', 'いくら');
//エビだけ独立して出力される
//その他はまとめられる
}

このようにレストパラメーターを使うことで、最初のメインの食材と、その他の食材を切り分けることも簡単にできます。また、引数の数も気にする必要がありません。
orderSupagettiの仮引数を増やせば、簡単にメインの食材を増やすこともできます。

JavaScript

Posted by devsakaso