こんにちは!セミマサです。この記事はスプレッド構文の備忘録になります。スプレッド構文を使うと引数を展開して渡すことができます。
実際に書いてみよう
展開したい要素の前に「…」をつけます。
配列で使う
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"}
オブジェクト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 SpreadTest2 = (v, w, x, y, z) => [v, w, x, y, z];
console.log(SpreadTest2(...spread4, 3, 4));//[0, 1, 2, 3, 4]
引数の一部だけスプレッド構文を使うこともできます。
おわりに
JavaScriptのスプレッド構文に関しての備忘録でした。新しい発見があったら追記していきます!