JavaScriptのスプレッド構文でプログラムをシンプルにする方法

プログラムはできるだけシンプルに分かりやすく記述することで、バグや認識違いを少なくすることができます。

JavaScriptのスプレッド構文は、配列やオブジェクトの展開をシンプルに記述することができて、独自実装によるバグを少なくできる手法の1つです。

本記事では、JavaScriptのスプレッド構文について解説します。

記事内に記載しているプログラムは、Node.js14.14.0を使って動作確認をしています。

JavaScriptのスプレッド構文
まとめ

JavaScriptのスプレッド構文

JavaScriptのスプレッド構文について、以下の内容を解説します。

スプレッド構文とは
関数へのスプレッド構文の適用
配列へのスプレッド構文の適用
オブジェクトへのスプレッド構文の適用

スプレッド構文とは

スプレッド（spread）とは拡げる、展開するという意味で、スプレッド構文は配列やオブジェクトの中身を展開する文法になります。
スプレッド構文は、ピリオド3つ … で表します。

配列へのスプレッド構文はES2015で導入され、オブジェクトへのスプレッド構文はES2018で導入されました。

スプレッド構文を使用するメリットは、シンプルに記述出来ることです。
これまで独自実装などに対応していたロジックが、スプレッド構文を使うだけで実現出来ることもあります。

関数へのスプレッド構文の適用

スプレッド構文は、関数を呼び出す引数に使うことができます。
例えば以下のようにできます。

function func(n1, n2, n3) {
    return n1 + n2 + n3;
}

arr = [1, 2, 3];

// 従来の方法
result = func(arr[0], arr[1], arr[2]);
console.log(result); // 6

// スプレッド構文を使った方法
result = func(...arr);
console.log(result); // 6

上記のプログラムで、関数funcは3つの引数を加算して返す関数です。
この関数を呼び出す際に、従来の方法では配列に入った3つ値を、それぞれ引数に指定して呼び出します。
これに対してスプレッド構文を使うと、配列の中身を3つの引数として展開して渡すことができ、シンプルなプログラムとなります。

上記は独自に作成した関数ですが、標準で提供されている関数においても同じように使うことができます。

なお、呼び出される関数側では、引数をまとめて受け取るレスト構文や分割代入を使用することができます。
詳細は以下の記事をご参照ください。

JavaScriptの分割代入

プログラムはできるだけシンプルに分かりやすく記述することで、バグや認識違いを少なくすることができます。 JavaScriptの分割代入は、プログラムをシンプルに記述することができる手法の1つです。本記事では、JavaScriptの分割代入について解説します。

配列へのスプレッド構文の適用

スプレッド構文は、配列の操作においても強力な力を発揮します。

配列の複製

スプレッド構文を使って、既存の配列を複製して新たな配列を作成することができます。

arr = ["Hello", "JavaScript"];
result = [...arr];
console.log(result); // -> [ 'Hello', 'JavaScript' ]
console.log(arr === result); // false

上記のプログラムでは、arrの配列の中身をresultにコピーしています。
arrとresultは別オブジェクトとなります。
ただし、浅いコピー（シャローコピー）となるため、配列の中身がさらに配列やオブジェクトである場合は、arrとresultで参照を共有するので注意が必要です。

配列の要素を追加

新たな配列を作成する際に、要素を追加することも可能です。
スプレッド構文は、追加する配列要素の任意の位置に置くことができます。

arr = ["Hello", "JavaScript"];
result = ["###", ...arr, "###"];
console.log(result); // -> [ '###', 'Hello', 'JavaScript', '###' ]

配列同士をマージ

スプレッド構文を使うと、配列の要素を展開するので、配列同士をマージする操作にも使うことができます。

arr1 = ["Hello", "JavaScript"];
arr2 = [1, 2];
result = [...arr1, ...arr2];
console.log(result); // -> [ 'Hello', 'JavaScript', 1, 2 ]

文字列を配列にする

スプレッド構文によって文字列を1つの文字に展開することもできます。

str = "Hello";
result = [...str];
console.log(result); // -> [ 'H', 'e', 'l', 'l', 'o' ]

配列から重複を排除する

他の関数と組み合わせたりすることで、シンプルに実現することも出来るようになります。
例えば、重複を無視するSetと組み合わせて、重複を排除した配列を簡単に作成できたりします。

arr = ['H', 'e', 'l', 'l', 'o'];
result = [...(new Set(arr))];
console.log(result); // -> [ 'H', 'e', 'l', 'o' ]

オブジェクトへのスプレッド構文の適用

オブジェクトについても、スプレッド構文によりキーと値のペアに展開することができます。

オブジェクトの複製

既存のオブジェクトをコピーして新たなオブジェクトを作成することができます。

obj = {1: "Hello", 2: "JavaScript"};
result = {...obj};
console.log(result); // -> { '1': 'Hello', '2': 'JavaScript' }
console.log(obj === result); // -> false

こちらも配列と同じく、浅いコピー（シャローコピー）となりますので、注意が必要です。

オブジェクトのプロパティを追加

オブジェクトのキーと値を追加してコピーすることもできます。

obj = {1: "Hello", 2: "JavaScript"};
result = {0: "###", ...obj, 3: "###"};
console.log(result); // -> { '0': '###', '1': 'Hello', '2': 'JavaScript', '3': '###' }

オブジェクトのマージ

オブジェクト同士のマージも配列と同様に行うことができます。
重複するキーがある場合は、後に指定する値が最終的な値となります。

obj1 = {1: "Hello", 2: "JavaScript"};
obj2 = {1: "GoodMorning", 3: "Python"}
result = {...obj1, ...obj2};
console.log(result); // -> { '1': 'GoodMorning', '2': 'JavaScript', '3': 'Python' }