こんにちは!ケインコスゲです。
今回は、JavaScriptの分割代入についてのブログ記事になります。
最近のJavaScriptで使えるようになった分割代入、僕もよく使うことがあるのですが、正直に言うと、結構調べ直すことがあって、それだと効率が悪い!と思ったので、自分用にブログ記事に残すことにしました。
出来るだけ具体的な事例を交えた方が定着もしやすいと思うので、そこを意識してブログを書いてみたいと思います。
JavaScriptの分割代入とは??
JavaScriptの分割代入とは、ES2015から使用できるようになった新しめの手法です。
(もう3−4年も経てば新しいと言わないのでしょうか・・・)
MDN内の分割代入を説明するページに掲載されている言葉を借りるならば、「配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です」というのが分割代入です。
しかーし!
僕のようなおばかさんには、この言葉では理解が及ばないので、具体的にこんなときに使うと良い!という事例を次から紹介していき、分割代入に関する理解を深めて行きたいと思います。
JavaScriptの分割代入・使用事例その1ー日付を取得するとき
JavaScriptに限らずですが、日時を取得したいときって良くありますよね。
このとき、こんなコードを書く方も多いのではないかと思います。以下は、現在の日にちを取得したいというときのJavaScriptのサンプルコードです。
上記コードの「result」の部分を見ていただくと、みなさんがこのブログをご覧いただいている日の日付が表示されているのではないかと思います。
これでも普通に日付はとれるので問題はないのですが、JavaScriptの分割代入を使用すると、次のような書き方をすることができます。
同じ結果が表示されるのですが、少しすっきりとした書き方をすることができますよね!
この事例のように、配列の形をうまく使うことで、複数の変数に対して、複数のデータを同時に代入・保存することができる、分割代入の使い方の1つにはこんなものがあったりします。
(後から出したサンプルの方では、同じくES2015から使用できるようになったテンプレートリテラルというものを用いています)
今回の事例、図にすると以下のようになります。
ちょっと図が汚いですが笑
配列の中でいうと変数currentYearに対して、date.getFullYear()の計算結果を代入している、という意味になります。
具体的に使いそうな事例を交えることで、少しでも覚えやすくなるのではないでしょうか・・・(と自分にも言いたいです)
まとめ
ということで、今回のブログでは、JavaScriptの分割代入を具体的事例を交えてしっかりと覚えるというテーマのブログ記事をかかせていただきました!
この記事は随時新しい事例が出たら更新していきたいと思います!
自分のインプットのためにも。。。。