【JavaScript】アロー関数とは？基本的な書き方を紹介

2021年11月3日 2021年11月5日

こんにちは！CODE CLUB965のKです！

今回は、JavaScriptの基本であるアロー関数について書こうと思います。

アロー関数とは？

アロー関数とは、そのままですが矢印「=>」を使用して関数を記述することです。

分かりやすく具体例を見てみましょう。

例えば次のような関数があったとします。

let sum = function(a, b) {
  return a + b;
};

通常、上記のように関数を記述すると思います。

しかし、アロー関数では次の例のようにfunctionの代わりに矢印「=>」を使用して記述できます。

let sum = (a, b) => a + b;

関数式がすっきりしたかと思います。

アロー関数はこのように関数の作成をシンプルにしてくれるものです。

基本的な構文は以下の通りです。

let func = (引数,...)=>{...関数の中身...}

また、アロー関数の記述にはいくつかのパターンもあるので紹介します。

先程の構文の関数の中身が一文の場合は、{} を省略することができます。

最初に出した例でも、

let sum = (a, b) => a + b;

と {} を省略していましたね。

複数行の場合は、{} は必須なので省略しないように注意して下さい。

引数が一つの場合も、引数を囲っていた括弧 () を省略できます。

let multiplication = n => n * 4;

これは以下の記述と同じです。

let multiplication = function(n) { 
  return n * 4;
}

引数がない場合は、括弧 () は必須です。
空白にします。

let message = () => console.log("Hello World !!");

分かるかと思いますが、これは以下の記述と同じです。

let message = function() { 
  console.log("Hello World !!");
}

大体記述のパターンの基本はこんなところだと思います。

今回はアロー関数について説明しました。

最初は馴染みがないので読みにくと思うかもしれませんが、慣れると記述もシンプルですっきり書けるのでコードも見やすくなると思います。

どんどん使って慣れていきましょう！

それでは、また！

Follow me!