スプレッド構文とは何か？

• スプレッド構文とは、配列やオブジェクトの展開を行う構文。

単純な例

const arr = ['a', 'b' , 'c'];
console.log(arr); // ['a', 'b', 'c']
console.log(...arr); // a b c

使い所（配列編）

配列同士を結合する

const arr1 = ['a', 'b' , 'c'];
const arr2 = ['d', 'e'];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // ['a', 'b', 'c', 'd', 'e']

配列に要素を追加する

const arr1 = ['a', 'b' , 'c'];
const arr2 = [...arr1, 'd', 'e'];
console.log(arr2); // ['a', 'b', 'c', 'd', 'e']

配列をシャローコピーする

/**
 * 前提
 * Javascriptの代入は単純代入になる
 */
let arr1 = ['a', 'b', 'c'];

// これは単純代入になる
let arr2 = arr1;

// arr1のみに要素を追加
arr1.push('d');
arr1.push('e');

// 配列の中身は同一になる
console.log(arr1); // ['a', 'b', 'c', 'd', 'e']
console.log(arr2); // ['a', 'b', 'c', 'd', 'e']

/**
 * スプレッド構文で代入はシャローコピーになる
 */
let arr3 = ['a', 'b', 'c'];

// これだとシャローコピー！
let arr4 = [...arr3];

// arr3のみに要素を追加
arr3.push('d');
arr3.push('e');

// 配列の中身は独立している
console.log(arr3); // ['a', 'b', 'c', 'd', 'e']
console.log(arr4); // ['a', 'b', 'c']

使い所（オブジェクト編）

オブジェクト同士を結合する

const obj1 = {
    a: 1,
    b: 2,
    c: 3
};
const obj2 = {
    d: 4,
    e: 5,
};

const obj3 = {...obj1, ...obj2};
console.log(obj3); // {a: 1, b: 2, c: 3, d: 4, e: 5}

オブジェクト同士を結合する（同一のプロパティ名の場合は上書きされる）

const obj1 = {
    a: 1,
    b: 2,
    c: 3
};
const obj2 = {
    ...obj1,
    b: 4,
    c: 5
};
console.log(obj2); // {a: 1, b: 4, c: 5}

オブジェクトにプロパティを追加する

const obj1 = {
    a: 1,
    b: 2,
    c: 3
};
const obj2 = {
    ...obj1,
    d: 4,
    e: 5,
};
console.log(obj2); // {a: 1, b: 2, c: 3, d: 4, e: 5}

オブジェクトをシャローコピーする

/**
 * 前提
 * Javascriptの代入は単純代入になる
 */
let obj1 = {
    a: 1,
    b: 2,
    c: 3
};

// これも単純代入になる
let obj2 = obj1;

// arr1のみにプロパティを追加
obj1.d = 4;
obj1.e = 5;

// オブジェクトの中身は同一になる
console.log(obj1); // {a: 1, b: 2, c: 3, d: 4, e: 5}
console.log(obj2); // {a: 1, b: 2, c: 3, d: 4, e: 5}

/**
 * スプレッド構文で代入を行うとシャローコピーになる
 */
let obj3 = {
    a: 1,
    b: 2,
    c: 3
};

// これだとシャローコピー！
let obj4 = {...obj3};

// obj3のみにプロパティを追加
obj3.d = 4;
obj3.e = 5;

// オブジェクトの中身は独立している
console.log(obj3); // {a: 1, b: 2, c: 3, d: 4, e: 5}
console.log(obj4); // {a: 1, b: 2, c: 3}