menu

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

2023年1月3日

CodeJavaScript

スプレッド構文(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つの引数を持つ配列になります。

まとめ

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

Follow Me!

Aji ろぐろぐみー筆者

フリーのWeb屋
詳しいプロフィールはこのページで色々書いてます。Twitterもやってます。コメント頂けると陸に上がった魚のようにピチピチ喜びます!

関連記事

コメントはこちらからどうぞ

プライバシーポリシーはこちら
また、コメントはこちらで承認の作業を行うまでは表示されません。ご了承ください。

CAPTCHA