JavaScriptのスプレッド構文の使い方

2022.02.08 2023.05.16

JavaScriptのスプレッド構文は、配列やオブジェクトなどの要素を展開して、別の配列やオブジェクトに挿入するための構文です。スプレッド構文は、「...」(三点リーダー)で表されます。

配列に適用

配列の要素を展開して別の配列に挿入する場合は、以下のように書くことができます。

const arr = [10,20,30,40,50];
console.log(...arr); // 10 20 30 40 50

const arr2 = [0, ...arr];
console.log(arr2); // Array [0, 10, 20, 30, 40, 50]

const arr3 = ['moewe-net', 'com'];
console.log(...arr3); // "moewe-net" "com"

次のような使い方はできません。

const a = ...arr;

関数の引数に適用

配列の要素を関数の引数として渡す場合は、以下のように書くことができます。

function sum(x, y, z) {
  return x + y + z;
}

const params = [10, 20, 30];

console.log(sum(...params)); // 60

オブジェクトに適用

オブジェクトのプロパティを展開して別のオブジェクトに挿入する場合は、以下のように書くことができます。

const obj1 = { a: 10, b: 20 };
const obj2 = { x: "X", y: "Y" };

const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // Object { a: 10, b: 20, x: "X", y: "Y" }