JavaScriptの「分割代入」とは?

ジャバスクリプト-分割代入

こんにちは!開発部の上條です🔋
今回の記事ではJavaScriptの「分割代入」についてご紹介いたします。
なるべく分かり易く、記事にまとめたいと思います。それでは、本稿もどうぞよろしくお願いいたします。

目次はこちら

  • 1. 分割代入とは
  • 2. スプレッド構文とは
  • 3. レスト構文とは
  • 4. まとめ

はじめに

今回説明する二つの構文には共通点があります。その共通点とは、どちらも「…」演算子を利用する点です。この二つの構文、演算子は同じですが使い方は真逆で、

スプレッド構文」 ⇒ 「展開

レスト構文」 ⇒ 「集約

のために使用します。

スプレッド構文とは

スプレッド構文を使うと、関数呼び出しの場合、 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。
MDN -スプレッド構文-

つまり「引数、 配列リテラル、 オブジェクトリテラル」に対してオブジェクトを「展開」出来ると言う事です。

引数に展開

例:配列から最大値を取得

See the Pen
GRJYpmX
by kamijodev (@kamijodev)
on CodePen.

例:複数の配列や数値から最大値を取得

See the Pen
スプレッド例2
by kamijodev (@kamijodev)
on CodePen.

例:インスタンス生成時の引数

See the Pen
ZEGqbXW
by kamijodev (@kamijodev)
on CodePen.

配列リテラルに展開

例:配列の複製

See the Pen
スプレッド例4
by kamijodev (@kamijodev)
on CodePen.

例:配列の結合

See the Pen
スプレッド例5
by kamijodev (@kamijodev)
on CodePen.

オブジェクトリテラルに展開

例:オブジェクトの複製

See the Pen
スプレッド例6
by kamijodev (@kamijodev)
on CodePen.

ここまで見ていただければスプレッド構文について大体は理解できたのではないかと思います。
次はレスト構文です。冒頭でも述べましたが、レスト構文は「集約」です。

レスト構文(残余構文)とは

複数の要素を「集約」して 1 つのオブジェクトにまとめることが出来ます。
関数の引数(残余引数構文・Rest Parameters)や、次回記事予定の「分割代入構文」に使用することが出来ます。

残余引数構文

例:不定数の引数を配列として受け取る

See the Pen
レスト例1
by kamijodev (@kamijodev)
on CodePen.

まとめ

今回はスプレッド構文とレスト構文について説明させていただきました。
レスト構文には「残余引数構文」だけでなく、「分割代入構文」でも使用することがあります。
次回は「分割代入構文」を紹介したいと思います。

Related post

  1. TinyMCE

    TinyMCEを使おう

  2. ssd

    PC容量をSSD交換で快適ライフにする方法

  3. git-command

    プログラマーにオススメ!開発中に使えるgitコマンドをご紹介!!

  4. SSL

    無料SSL証明書 Let’s Encryptのススメ

  5. Windowsで英語キーボードから日本語キーボードに戻す方法

  6. Android Studio 2.1.1 実機(Nexus7)とつなぐ…

Comment

  1. No comments yet.

  1. No trackbacks yet.

CAPTCHA