【JavaScript備忘録】スプレッド構文

こんにちは！セミマサです。この記事はスプレッド構文の備忘録になります。スプレッド構文を使うと引数を展開して渡すことができます。

実際に書いてみよう
おわりに

実際に書いてみよう

展開したい要素の前に「…」をつけます。

配列で使う

const spread1 = [2, 3];
const array1 = [1, ...spread1, 4, 5];
console.log(array1);//[1, 2, 3, 4, 5]

const spread1 = [2, 3];

const array1 = [1, ...spread1, 4, 5];

console.log(array1);//[1, 2, 3, 4, 5]

配列array1に配列spread1を展開して渡しています。

オブジェクトに対して使う

const spread2 = {
    name: "Taro",
    age: 20
};
const spread3 = {
    name: "Ziro",
    location: "Kyoto"
};
console.log({
    ...spread2,
    ...spread3
});//{name: "Ziro", age: 20, location: "Kyoto"}

const spread2 = {

name: "Taro",

age: 20

};

const spread3 = {

name: "Ziro",

location: "Kyoto"

};

console.log({

...spread2,

...spread3

});//{name: "Ziro", age: 20, location: "Kyoto"}

オブジェクトspread2とオブジェクトspread3を展開して出力しています。被っているnameプロパティは後ろにあるspread3のものが優先されていますね。

関数に対して使う

const SpreadTest = (x, y, z) => [x, y, z];
const spread4 = [0, 1, 2];
console.log(SpreadTest(...spread4));//[0, 1, 2]

const SpreadTest = (x, y, z) => [x, y, z];

const spread4 = [0, 1, 2];

console.log(SpreadTest(...spread4));//[0, 1, 2]

関数に渡す引数に対してもスプレッド構文は使用可能です。

const SpreadTest2 = (v, w, x, y, z) => [v, w, x, y, z];
console.log(SpreadTest2(...spread4, 3, 4));//[0, 1, 2, 3, 4]

1 2	const SpreadTest2 = (v, w, x, y, z) => [v, w, x, y, z]; console.log(SpreadTest2(...spread4, 3, 4));//[0, 1, 2, 3, 4]

引数の一部だけスプレッド構文を使うこともできます。

おわりに

JavaScriptのスプレッド構文に関しての備忘録でした。新しい発見があったら追記していきます！