背景
JavaScript復習中に学んだことをアウトプット。
今回はスプレッド構文について。
スプレッド構文とは...
MDNを見ると、以下のように説明されています。
配列式や文字列などの反復可能オブジェクトを、0個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。
内容を完全に理解しようとすると少し難しいですが、ポイントとしては「展開する」というところになります。
実際に動作確認してみた方が分かりやすいと思うので、今回は以下の3パターンでスプレッド構文を活用してみます。
関数呼び出し
例えば、Math.min()で5つの値の最小値を求めようと思った場合、以下のような記述になります。
Math.min(1, 5, 10, 6, 9);
// => 1
ここで、引数に配列を渡してあげた場合、出力結果はどうなってしまうのか...。
const nums = [1, 5, 10, 6, 9];
Math.min(nums);
// => NaN
上記のように、NaNが返ってきてしまいます。
Math.min()は、数値そのものをカンマ区切りで渡してあげないと上手く機能してくれません。
では、どうすれば配列に格納されている数値を引数として渡してあげられるのか。
ここで登場するのがスプレッド構文です。
書き方としてはとてもシンプルで、先ほど引数として渡した配列numsの前に、...を付けてあげます。
const nums = [1, 5, 10, 6, 9];
Math.min(...nums);
// => 1
すると、関数が実行され、配列の中にある数値から最小値を求めてくれるようになります。
このように、配列にスプレッド構文を使うと、中身が展開されて関数の引数として用いることができるようになります。
配列リテラル
次に、既存の配列を使って新しい配列を作成する場合で考えてみます。
const nums1 = [1, 2, 3];
const nums2 = [4, 5, 6];
この2つの配列を合体させて、新しい配列を作成したいです。
ここでまた登場するのがスプレッド構文。
const allNums = [...nums1, ...nums2];
console.log(allNums);
// => [1, 2, 3, 4, 5, 6]
上記のように記述することで、一度nums1、nums2の中身をそれぞれ展開し、展開された値を新しい配列に格納することができます。
余談ですが、配列同士の合体はconcat()を使って実現することもできます。
ただ個人的にはスプレッド構文を使った書き方の方がシンプルで使いやすいですし、かなり応用も効くと思うので、この方法を活用していきたいと思ってます。
オブジェクトリテラル
最後に、オブジェクトをコピーして新しいオブジェクトを作成する場合で考えてみます。
例として、以下のようなオブジェクトがあったとします。
const yamada = {lastName: "yamada", country: "Japan", isHuman: true};
こちらのオブジェクトを用いて、新しいオブジェクトを生成してみましょう。
const yamadaTaro = {firstName: "taro", ...yamada};
console.log(yamadaTaro);
// => {firstName: 'taro', lastName: 'yamada', country: 'Japan', isHuman: true}
このように、オブジェクトの中身も展開することができます。
まとめ
- スプレッド構文（
...）を用いることで、配列やオブジェクトの中身を展開することができる - 展開した要素を、新しい配列やオブジェクトに格納することができる
感想
非常に便利な構文なので、いろんな場面でうまく活用していきたいです。