【JavaScript】アロー関数に段階的に慣れる

【JavaScript】アロー関数に段階的に慣れる

はじめに

コジマです。

アロー関数って慣れないうちにパッと見た時に少し困惑してしまいますよね。

MDNのアロー関数の説明を基にfunction式から砕かれていく様子を見ていこうと思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

function式(関数式)のおさらい

JavaScriptでは関数を式の中に定義できます。

このfunction(hoge){ return hoge }を変数に代入する書き方がfunciton式(関数式)です。

アロー関数第一形態(functionの消失)

functionが消える代わりに=>を書きます。この部分がいわゆるアローです。

これにより、先ほどのサンプルは以下のように書き換わります。

アロー関数第二形態({}・returnの消失)

{}(中カッコ)とreturnを省略する書き方もあります。

これにより、先ほどのサンプルは以下のように書き換わります。

アロー関数最終形態(()の消失)

引数が1つの場合に限り()(カッコ)も省略することができます。

2つ以上あると以下のようにエラーが出てしまいます。

配列を操作する関数とかでよくお世話になってます。
配列操作する関数は引数に関数式を使用するものが多いので、アロー関数を使うことで
スッキリして読みやすくなるんですよね。

以下にサンプルを載せます。

こちらが関数式をそのままつかったパターンになります。
アロー関数の方がスッキリ書けているのがわかるかと思います。

さいごに

アロー関数ってJavaScript学びたての時見づらくて仕方なかったのですが、今ではアロー関数のスッキリした書き方の恩恵をたくさん受けています。
一気に理解するのが難しくてもこうやって段階的に理解していけば問題ないと思いますよ!

アロー関数に慣れてよりJavaScriptと仲良くなりましょう!

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです!

以上、コジマでした。


javascriptカテゴリの最新記事