【初心者必見】JavaScriptのスプレッド構文について解説します

本日は


【初心者必見】JavaScriptのスプレッド構文について解説します



というテーマの記事となっています。



配列を使う際に覚えておくと便利な構文となっていますので是非ご覧ください♪


それではいってみましょう！

この記事を書いている人

スプレッド構文とは

スプレッド構文は配列の中に違う配列の要素を入れる場合に使う構文のことです。

実際にコードで見てみましょう。

例えば以下のように、otherNameの中に別の名前（要素）を入れてそれをnameという変数の配列に格納したとします。

const otherName =["Goro","Shirou"];

const name =["Taro","Hanako","Ayumu","Yoshiko",otherName];


console.log(name);

//結果
["Taro", "Hanako", "Ayumu", "Yoshiko", Array(2)]

すると結果は上記のようにArray(2)となってしまいました。

こういった場合に活躍するのがスプレッド構文です。


スプレッド構文自体の書き方は非常にシンプルです。

const otherName =["Goro","Shirou"];

const name =["Taro","Hanako","Ayumu","Yoshiko",...otherName];


console.log(name);

//結果
["Taro", "Hanako", "Ayumu", "Yoshiko", "Goro", "Shirou"]

と思われたかもしれません。


よく見ると、3行目の配列内のotherNameの前に「...」がついているのがわかると思います。


この書き方こそがスプレッド構文です。

非常にシンプルですよね。笑

ただ、スプレッド構文を使うことで配列の中に別の配列の要素を格納することが簡単に出来ます。

スプレッド構文は関数にも使えます

スプレッド構文は関数の引数にも使うことが出来ます。



実際にコードで見ていきましょう。

const num =[15,25];

function sum(num1,num2) {
  console.log(num1 + num2)
}

sum(...num);

上記は、numという変数に15と25という値が入った配列を代入し、

sumという関数でnum1とnum2を引数とし、num1とnum2を足し算しています。

通常であれば、以下のような書き方をしてもコードとしては同じ意味となります。

function sum(num1,num2) {
  console.log(num1 + num2)
}

sum(15,25);

つまりスプレッド構文を使えば、sum(15,25)の部分を宣言している配列の要素を引数として使えるということです。

あまりこういった使い方をしている人は最近見かけませんが、いざこういったコードに出くわしたときに「？」とならないように覚えておきましょう。

終わりに

いかがでしたでしょうか。

スプレッド構文は配列を使う際によく使う手法ですので是非この機会に覚えていただければと思います。

それではまた明日の記事でお会いしましょう。

おしまい✨