【Javascript】アロー関数について分かりやすく解説

Javascriptを学習し始めた方の多くが、『アロー関数』の壁にぶち当たるかと思います。本記事で分かりやすくまとめておきましたので参考にしてください。

『関数リテラル』を理解しよう

Javascriptには『リテラル』という言葉があります。この言葉を理解しておくことで、『アロー関数』について理解しやすくなるので説明していきます。

リテラルは文字列や、数値などで書かれた値のことを指します。言葉では分かりづらいので、コードを見ていきましょう。

const sayHello = "Hey guys!!";
const number = 100;

上のコードの「Hey guys!!」や「100」のことを『リテラル』と呼びます。実はリテラルは文字や数値だけでなく、「関数」を代入することが可能です。

下記コードはgetTriangleAreaという変数を関数で表現しています。heightやbottomに値を代入することで、三角形の面積が求められるようになっています。

const getTriangleArea = function (height ,bottom){
  return height * bottom / 2
}

console.log('三角形の面積は' + getTriangleArea(5,10))

#実行結果
#三角形の面積は25


このように変数に関数を代入したものを『関数リテラル』と呼んでいます。

関数リテラルは、関数を作成後に呼び出すことが可能です。
関数の呼び出し方は「関数名(引数)」となります。

const getTriangleArea = function (height ,bottom){
  return height * bottom / 2
}

getTriangleArea(5,10)
#実行結果
#25

アロー関数に書き換えよう

先程解説した『関数リテラル』をもう少し楽に書けるようにたのが、『アロー関数』です。「=>」を用いて書き、その形が矢(アロー)に似ていることから、アロー関数と呼ばれています。

では、先程の関数リテラルのコードをアロー関数に書き換えてみましょう。

【関数リテラル】

const getTriangleArea = function (height ,bottom){
  return height * bottom / 2
}

【アロー関数】

const getTriangleArea = (height,bottom) => {
  return height * bottom / 2
}
通常関数
(functionキーワード)
アロー関数
function(){処理内容} () => {処理内容}

functionを書く手間が減り、記述が簡潔になりました。
また、上のコードはもう少し省略して書くことができます。

【アロー関数 省略形】

処理内容が1行で済む場合は、returnを省略可能です。「=>」の後に関数の返り値を書きます。

const getTriangleArea = (height,bottom) => height * bottom /2

アロー関数の省略記法

アロー関数には省略記法が用意されています。コメントアウトで省略無しのパターンも書いておくので参考にしてください。

パターン① 処理内容が1行の場合

前章で紹介したパターンです。処理内容が1行で済む場合は、returnを省略できます。

const getTriangleArea = (height,bottom) => height * bottom /2

#省略無しで書いた場合
const getTriangleArea = (height,bottom) => {
  return height * bottom / 2
}

パターン② 引数が無い場合

先程までheightやbottomなどアロー関数に引数を持たせていましたが、引数が無い場合も別の書き方をすることができます。

const sayHello = () => console.log('Hello!!')

#省略無しで書いた場合
const sayHello = () => {
  console.log('Hello!')
}

パターン③ 引数が1つの場合

アロー関数の引数が1つの場合は、引数を囲む()を省略できます。

const getCircleArea = radius => radius * radius * 3.14 

#省略無しで書いた場合
const getCircleArea = (radius) => {
  return radius * radius * 3.14
}

補足 『関数』と『関数リテラル』の違い

『関数リテラル』と違いが分かりづらいのが、普通の『関数』です。コードを見ながら違いを確認してみましょう。

関数を実行する場所を変えてみよう

【関数】

function getTriangleArea(height,bottom){
  return height * bottom / 2
}

getTriangleArea(5,10)
#実行結果
#25

【関数リテラル】

const getTriangleArea = function (height ,bottom){
  return height * bottom / 2
}

#アロー関数で書いたパターン
const getTriangleArea = (height,bottom) => height * bottom /2

getTriangleArea(5,10)
#実行結果
#25

書き方は若干異なりますが、同じ実行結果が返ってきているので、どっちを使っても良さそうな気がしますよね?

しかし、関数の呼び出し方に違いがあります。試しに関数定義前に、関数を呼び出してみましょう。

【関数】

getTriangleArea(5,10)

function getTriangleArea(height,bottom){
  return height * bottom / 2
}

#実行結果
#問題なく実行可能!!
25

【関数リテラル】

getTriangleArea(5,10)

let getTriangleArea = function (height ,bottom){
  return height * bottom / 2
}

#実行結果
#エラーが発生!!
ReferenceError: Cannot access 
'getTriangleArea' before initialization

関数の場合、関数定義前に実行しても問題ありません。逆に関数リテラルで書いた場合は、関数定義前に実行すると怒られます。

これは、Javascriptの『巻き上げ(ホイスティング)』という概念が関係しています。

関数の場合は、関数実行後より下に関数の定義をしていても、あたかも先頭に関数の定義したかのように処理されます。これが『巻き上げ』です。

逆に関数リテラルの場合は巻き上げが起こりません。そのため、関数定義後に関数を実行しないと怒られます。