Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【JavaScript ECMAScript】Spread syntax (...)演算子の使い方

Spread syntax (...)演算子の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

Spread syntax (...)関数は、配列やオブジェクトなどのイテラブルな要素を個別に展開し、新しい配列やオブジェクトの作成、関数の引数への渡し方などを簡潔に実行する構文的な機能です。この構文を使用することで、既存の配列やオブジェクトのすべての要素またはプロパティを、まるで手動で一つずつ記述したかのように展開し、別の場所で利用できます。

具体的には、配列リテラル内で使用すると、既存の配列の全要素を新しい配列にコピーしたり、他の配列と結合したりできます。これにより、元の配列を変更せずに新しい配列を生成する、いわゆる「シャローコピー」を容易に行えます。また、オブジェクトリテラル内で使用した場合は、既存のオブジェクトのプロパティを新しいオブジェクトにコピーし、結合したり上書きしたりすることが可能です。

さらに、関数呼び出し時に配列の前にスプレッド構文を置くことで、配列の各要素を関数の個別の引数として展開して渡すことができます。これにより、apply()メソッドを使うことなく、配列の要素を関数の引数として利用する場面でコードがより直感的になります。Spread syntaxは、コードの記述量を減らし、可読性を向上させるとともに、JavaScriptにおけるデータ操作をより柔軟かつ効率的に行うための重要なツールです。

公式リファレンス: Spread syntax (...)

構文(syntax)

1const existingArray = [1, 2, 3];
2const newArray = [...existingArray, 4, 5];

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ

関連プログラミング言語