【初学者向け】JavaScriptのスプレッド構文「...」について

今回はスプレッド構文(スプレッド演算子)について解説していきます。

①スプレッド構文とは

ドット３つ("..."こんな感じ)をつけることで配列などを展開することができるようになるというものです。
展開というと少し難しいイメージですが
要は配列の中身を「バラバラにするイメージ」で大丈夫です！

(※今回は配列の展開についてのみ解説していきます。)

②コードで確認してみよう

①配列の展開

const arry = [1, 3];
// 配列をそのままconsole.log
console.log(arry);          //  [1, 3]

// スプレッド構文を使ってconsole.log
console.log(...arry);       //  1 3 

☆スプレッド構文を使ってconsole.logした方は配列の中身のみになってるのがわかると思います。

②配列を使って新しい配列を作成

const arry = [1, 2, 3, 4, 5];

// arryにスプレッド構文を使用し、その前後に新しい値を追加
const arry2 = [0, ...arry, 6];  

console.log(arry2);   // [0, 1, 2, 3, 4, 5, 6]

スプレッド構文を使用してarryの中身が展開され、前後に"0"と"6"が追加された新しい配列ができました。

③配列のコピーと結合

// まずは配列を2つ用意
const arry = [1, 2];
const arry2 = [3, 4];

// (1)配列のコピー(arry → arry3)
const arry3 = [...arry];  
console.log(arry3);       /// [1, 2]　中身は同じだが別の配列(それぞれ変化を与えても影響を受けない)

// (2)配列の結合(arryとarryを結合 → arry4)
const arry4 = [...arry, ...arry2]; 
console.log(arry4);              //[1, 2, 3, 4]

(1)(2)も [ ] の中で配列が展開されて、新たな配列になっています。

補足説明

配列のコピーに関してですが、スプレッド演算子を使用せずに

const arry3 = arry

とすると、arryの値が修正されるとarry3の要素も修正されることになります。

④まとめる
ある配列の一部を分割代入
し、残りをスプレッド演算子を使用してまとめる

const arry = [1, 2, 3, 4, 5];
const [num1, num2, ...arry2] = arry;
console.log(num1);   // 1
console.log(num2);   // 2
console.log(arry2);  // [3, 4, 5]  　１つの配列として取り出せる

// ちなみにですがこちらは
console.log(...arry2);  // 3, 4, 5 

⑤関数の引数に渡す

const arry = [1, 2];

// 2つの引数を足し合わせたものをconsole.logする関数
const sum = (num1, num2) => console.log(num1 + num2);

// スプレッド演算子を使用しないパターン
sum(arry[0], arry[1]);    ///  3

// スプレッド構文を使用したパターン
sum(...arry);              ///  3

これを応用すれば足し合わせるものの長さが変わってもOKな関数を作ることができます

// 引数で渡されたものを足し合わせていく関数
function sum(...args) {

   // 一旦、戻り値を定義
   let ret = 0;

   // 引数が順番にvに入っていきます
   for(let v of args){
   //vがどんどん足されていく処理(ret = ret + v)
      ret += v ;
   }

   // 最後まで足し合わされたretを返す
   return ret;
}

const result = sum(1,2,3,4);
console.log(result);      // 10

const result2 = sum(1,2,3,4,5,6);
console.log(result2);     // 21

このようにスプレッド構文を使用すれば引数が増えても対応できる関数が作れます

最後に

今回の投稿が少しでも皆様の力になれたら幸いです。