【JavaScript】spread syntax 点三つについて

1. 概要

Javascriptのコードを読み上げるとに”…”の三つの点が並んで書いてることを見かけると思いますがこれって何？と戸惑うことがあると思います、それは”Spread syntax”とよばれるものでJavaScriptのプログラミングでなかなか便利な表記方法のひとつです。以下で例を挙げながらみたいと思います。

2. 使用例

2.1 オブジェクトを纏める

例のように別々に持っているデーターを一つのオブジェクトに纏める処理が簡単に書けます。

const user_info = { "id": 1, "email": "user@example.com" };
const user_detail = { "first_name": "太郎", "last_name": "佐藤", "age": 35, "gender": "female" };

const user = { ...user_info, ...user_detail };
console.log(user)

2.2 配列を合体して纏める

複数の配列オブジェクトをを一つの配列オブジェクトに纏めるも可能です。

const arr1 = [ 1, 2, 3 ];
const arr2 = [ 4, 5, 6 ];

const arr3 = [ ...arr1, ...arr2 ];
console.log(arr3)

2.3 異型の配列を合体して纏める

異なる形式のオブジェクトと纏めることが出来ます。

const arr1 = [{ "id": 1, "email": "user@example.com" }];
const arr2 = [ 4, 5, 6 ];

const arr3 = [ ...arr1, ...arr2 ];
console.log(arr3)

3. 他の使用例

3.1 分解して使用

例のような使い方もあります。もっと実用てきな例も挙げてみたいと思います。

const sum = (arg1, arg2, arg3) => {
  return arg1 + arg2 + arg3;
}
const arr1 = [ 1, 5, 8 ];

const result = sum(...arr1);
console.log(result);