JavaScriptのスプレッド構文

2022.02.08 2022.02.08

スプレッド構文(...)は配列やオブジェクトを展開したり、結合を容易にします。

配列に適用

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" }