スプレット構文の挙動を理解する

スプレット構文は現代のモダンフロントエンドの現場にて非常によく使われまます。
これを使いこなすことが、モダンJSに入る第一歩です！！

スプレット構文とは？？

...hogehogeの形で記述され、配列やオブジェクトの要素を展開する構文です。
このようにスプレット構文はmdnの説明でも最初に聞くと何がなんだかよく分かりません、、、

例を使って覚えていきましょう！

配列を展開する

const numbers: number[] = [1,2,3]

console.log(...numbers) // 1, 2, 3
console.log([...numbers]) // [1, 2, 3] 

一例です。
このようにnumbersで配列を定義した場合、...numbersで配列の添字を展開しているわけです。
添字 ... 配列の中の要素を指す

[...numbers]とすることで、配列の中に新たに[1, 2, 3]と定義することができます。
つまり配列のコピーのようなイメージです。

const numbers: number[] = [1,2,3]
const numbers2: number[] = [ ...numbers ];

console.log(numbers);  // [1,2,3]
console.log(numbers2); // [1,2,3] 

なのでこうすると配列をコピーできます。

mdnには下記のような一例が記載されています。

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

const numbers = [1,2,3]
console.log(sum(...numbers)) // 6

これは想像しやすいかと思います！

配列に要素を追加する

スプレット構文は配列をコピーすることができるので、簡単に配列に要素を追加することができます。

const numbers: number[] = [1,2,3]; // 元の配列
const newNumber: number = 4;　　// 配列に追加したい要素

const newArray: number[] = [ ...numbers, newNumber ]; // 新しく生成する配列
console.log(newArray); // [1,2,3,4]

[ ...numbers ]で[1,2,3]になります。
[ ... numbers, 4]ということは[ 1,2,3,4 ]にとなります。

2つの配列を展開する

const numbers1: number[] = [1,2,3];
const numbers2: number[] = [4,5,6];

const newArray: number[] = [ ...numbers1, ...numbers2 ];
console.log(newArray) // [1, 2, 3, 4, 5, 6] 

オブジェクトを展開する

これを応用するとオブジェクトにも適用できます。

const object = {
    a: "A",
    b: "B",
    c: "C"
}

console.log(object);
//  {
//   "a": "A",
//   "b": "B",
//   "c": "C"
// } 



const newObject = {
    ...object,
    d: "d"
}


console.log(newObject);

// {
//   "a": "A",
//   "b": "B",
//   "c": "C",
//   "d": "d"
// } 

もちろん展開している状態なので、要素を書き換えることもできます。

const object = {
    a: "A",
    b: "B",
    c: "C"
}


const newObject = {
    ...object,
    c: "新しいvalue"
}

console.log(newObject);
// {
//   "a": "A",
//   "b": "B",
//   "c": "新しいvalue"
// } 

文字列分割もできる

あまり使ったことはないですが、こんなこともできます。

const str: string = "hoge"

const array = [...str]
console.log(array) // ["h", "o", "g", "e"]