Java Scriptの基礎その14　JavaScriptのSpread演算子とRESTパラメータの基礎

2024年7月24日 12:41

イントロダクション

JavaScriptには、配列やオブジェクトを操作するための便利な機能としてSpread演算子とRESTパラメータがあります。これらの機能を活用することで、コードの可読性が向上し、効率的にデータを処理できます。この記事では、具体的なコード例を通じて、Spread演算子とRESTパラメータの基本的な使い方とそのメリットを解説します。

配列の操作

配列の作成と展開

まずは、配列の基本的な操作について説明します。以下のコードでは、配列の作成と展開について示しています。

//基本的な話
const arraySample = [4, 5, 6];
//悪い例
const bad_arraySample = [
  1,
  2,
  3,
  arraySample[0],
  arraySample[1],
  arraySample[2],
];
console.log(bad_arraySample);

このコードでは、bad_arraySampleという配列に、arraySampleの要素を手動で追加しています。これは冗長で、可読性が低いです。結果は以下のようになります：

[1, 2, 3, 4, 5, 6]

Spread演算子を使った良い例

次に、Spread演算子を使用した例を見てみましょう。

//良い例
const good_arraySample = [1, 2, 3, ...arraySample];
console.log(good_arraySample);

Spread演算子（...）を使うことで、配列を簡単に展開して追加できます。これにより、コードが簡潔で読みやすくなります。結果は以下の通りです：

[1, 2, 3, 4, 5, 6]

Spread演算子の応用

配列のネストと展開

Spread演算子は、配列のネストにも使用できます。

const arraySpread = [1, 2, 3, [4, 5, 6]];
console.log(arraySpread);

結果は次のようになります：

[1, 2, 3, [4, 5, 6]]

複数の配列の結合

複数の配列を結合する場合にも、Spread演算子が役立ちます。

const newMainMenu = [...ramenShop.mainMenu, "塩ラーメン"];
console.log(newMainMenu);

このコードでは、ramenShop.mainMenuの要素に新しい要素「塩ラーメン」を追加しています。結果は以下の通りです：

["醤油ラーメン", "味噌ラーメン", "豚骨ラーメン", "塩ラーメン"]

また、複数の配列を結合する例も見てみましょう。

const allMenu = [...ramenShop.mainMenu, ...ramenShop.sideMenu];
console.log(allMenu);

このコードでは、mainMenuとsideMenuを結合しています。結果は以下のようになります：

["醤油ラーメン", "味噌ラーメン", "豚骨ラーメン", "餃子", "唐揚げ", "搾菜"]

RESTパラメータの使用

配列から値を抽出

RESTパラメータを使用すると、配列から特定の値を抽出し、残りの値を別の配列にまとめることができます。

const [a, b, ...otherNumber] = [1, 2, 3, 4, 5, 6];
console.log(a, b, otherNumber);

この例では、aとbにそれぞれ1と2が代入され、残りの値がotherNumberに配列として格納されます。結果は以下の通りです：

1 2 [3, 4, 5, 6]

関数への適用

RESTパラメータは関数にも適用できます。

const showNumbers = function (...numbers) {
  console.log(numbers);
};

showNumbers(2, 3);
showNumbers(1, 2, 3, 4, 5);

showNumbers関数は、引数を配列として受け取るため、どんな数の引数でも処理できます。結果は以下の通りです：

[2, 3]
[1, 2, 3, 4, 5]

関数内での計算

RESTパラメータを使った関数内での計算も簡単です。

const sumNumbers = function (...numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) sum += numbers[i];
  console.log(sum);
};

const arrayToSum = [23, 5, 6];
sumNumbers(...arrayToSum);

この関数では、任意の数の引数を受け取り、それらを合計して出力します。結果は以下の通りです：

オブジェクトの操作

オブジェクトの結合

Spread演算子はオブジェクトの結合にも使用できます。

const addDataRamenShop = {
  foundIn: 1970,
  ...ramenShop,
  founder: "ラーメンマン",
};
console.log(addDataRamenShop);

新しいプロパティを追加しつつ、既存のオブジェクトを結合できます。結果は以下の通りです：

{
  foundIn: 1970,
  shopName: "リアルラーメンマン",
  mainMenu: ["醤油ラーメン", "味噌ラーメン", "豚骨ラーメン"],
  sideMenu: ["餃子", "唐揚げ", "搾菜"],
  otsumami: [],
  orderOtsumami: function (snack_1, snack_2, snack_3) { ... },
  orderRamen: function (main, ...toping) { ... },
  founder: "ラーメンマン"
}

オブジェクトの更新

オブジェクトのプロパティを簡単に更新することもできます。

console.log(ramenShop.shopName);
ramenShop.shopName = "復刻リアルラーメンマン";
console.log(ramenShop.shopName);

このコードでは、shopNameプロパティを更新しています。結果は以下の通りです：

リアルラーメンマン
復刻リアルラーメンマン

RESTバージョンの関数

RESTパラメータを使って、トッピングのリストを受け取る関数も作成できます。

ramenShop.orderRamen("塩ラーメン", "ねぎ", "ゆで卵", "チャーシュー");