スプレッド構文とは
JavaScriptでドットが3つ並んだコード「 … 」を見かけることがありますが、これをスプレッド構文と呼びます。
スプレッド構文を使用することで、オブジェクトを展開したり結合したりすることができます。
とは言っても、なかなか言葉だけでは理解が難しいと思いますので、実際にコードを見ながら理解を深めていきましょう。
スプレッド構文の基本構文
JavaScriptのスプレッド構文は以下のように記述します。
const array = [1, 2, 3, 4];
console.log(...array);
// 1, 2, 3, 4以下のような使い方はできないので注意しましょう。
const array = [1, 2, 3, 4];
const arrayClone = ...array;
// エラー関数の引数にスプレッド構文を使用する
まずは関数の引数にスプレッド構文を使用してみましょう。
function sum(a, b, c, d){
return a + b + c + d;
}
const array = [1, 2, 3, 4];
const result = sum(...array);
console.log(result);
// 8配列の [ ] が外され、sum関数の引数に渡されているのがわかるかと思います。
配列でスプレッド構文を使用する
配列でスプレッド構文を使用してみましょう。（先程の基本構文も配列を利用しています。）
const array = [1, 2, 3, 4];
console.log(array);
// [1, 2, 3, 4]
console.log(...array);
// 1, 2, 3, 4 （[]が外れて出力されます！）
const array2 = [...array, 5, 6];
console.log(array2);
// [1, 2, 3, 4, 5, 6]オブジェクトでスプレッド構文を使用する
オブジェクトに対してスプレッド構文を使用することができます。
const obj = {a: 10, b: 20};
const obj2 = {c: 30, d: 40};
const obj3 = {...obj, x: 100};
console.log(obj3);
// {a: 10, b: 20, x: 100}
const obj4 = {...obj, ...obj2};
console.log(obj4);
// {a: 10, b: 20, c: 30, d: 40}最後に
スプレッド構文は配列などを操作する上でとても便利です。
初心者のうちは、あまり見慣れない形かもしれませんが、ぜひこれを機にスプレッド構文を使いこなせるようにしておきましょう。
コメント