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

応援クリックよろしくお願いします！

スプレッド構文（Spread syntax）とレスト構文（Rest syntax）は、JavaScriptのES6（ECMAScript 2015）以降で導入された構文で、両者とも「…」（三点リーダー）を使用しますが、目的と使用方法が異なります。

スプレッド構文

スプレッド構文は、配列やオブジェクトの要素を展開する際に使用されます。
配列や関数呼び出しの場所で使用できます。

例）配列の場合

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]

例）関数呼び出しの場合

function myFunction(x, y, z) {
  console.log(x, y, z);
}
let args = [0, 1, 2];
myFunction(...args);  // 0 1 2

例）オブジェクトの場合

let obj1 = {a: 1, b: 2};
let obj2 = {...obj1, c: 3};  // {a: 1, b: 2, c: 3}

レスト構文

レスト構文は、複数の要素を配列にまとめる際に使用される。
主に関数のパラメータとして使用される場面が多いです。

例）関数のパラメータの場合

function myFunction(a, ...args) {
  console.log(a);  // 1
  console.log(args);  // [2, 3, 4]
}
myFunction(1, 2, 3, 4);

この場合、args は 2, 3, 4 という3つの引数を持つ配列になります。

まとめ

スプレッド構文は「展開」するのに使用され、レスト構文は「まとめる」のに使用されます。
両方とも同じ記号「…」を使用しますが、その文脈に応じて意味が異なります。

応援クリックよろしくお願いします！