何を勉強しようかなと
These JavaScript methods will boost your skills in just a few minutesという記事を読んでいたら１つめからさっそく知らない用語、スプレッド演算子（Spread Operator）が取り上げられていたので調べてみることにしました。
スプレッド演算子（Spread Operator）とは
スプレッド演算子（Spread Operator）はスプレッド構文ともよばれており、配列式や文字列などの反復可能オブジェクトに使われます。
配列の中身がいっぱいあるときに「…」をつけることで引数として例えば配列要素の中身を展開することができます。
メリット
記事ではメリットに以下が挙げられていました。
- 簡単に早く配列の中身を表示できる
- 配列とオブジェクトで使用できる
- 配列の中身を引数として素早く使用できる
- たった３つのドットで使用できる
スプレッド演算子の書き方例
let numbers = [1, 2, 3];
console.log(…numbers);
//結果は 1 2 3
配列の中身はこんなに簡単に表示できるなんて便利ですね。
なんとなくわかったもののどういうときに便利なのかもう少しサンプルコードを見ながら勉強していきましょう。
サンプルコード 配列に配列を追加する
Aの配列の中にBの配列の中身も加えたいときにスプレッド演算子を使って配列の中身を書き込みます。
let strs = [“さしすせそ”, “たちつてと”, “なにぬねの”];
let hiragana = [“あいうえお”, “かきくけこ”, …strs, “はひふへほ”];
console.log(…hiragana);
結果
あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ
一つずつ書き入れずに配列の中身を書き込めるので便利ですね。
サンプルコード 配列の中身を引数としてまとめて引きわたす
function sum(x, y, z, v) {
return x + y + z + v;
}
const numbers = [1, 2, 3, 4];
console.log(sum(…numbers));
結果
10
スプレッド演算子を利用して引数を受け渡すことができます。仮に配列の中身が4つ以上あったとしても初めの4つのみ受け渡されます。
他にもconsole.log(sum.apply(null, numbers));という方法で配列の中身を引数として受け渡す方法がありますが、スプレッド演算子を使った方がわかりやすいですね。
おわり
配列の中身を取り出したい時はスプレッド演算子が便利ですね。
