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

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

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

実際に書いてみよう

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

配列で使う

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

constspread1=[2,3];

constarray1=[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"}

constspread2={

name:"Taro",

age:20

};

constspread3={

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]

constSpreadTest=(x,y,z)=>[x,y,z];

constspread4=[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	constSpreadTest2=(v,w,x,y,z)=>[v,w,x,y,z]; console.log(SpreadTest2(...spread4,3,4));//[0, 1, 2, 3, 4]

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

おわりに

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