【JavaScript】普通の関数と無名関数、アロー関数の違いを解説【初心者向け】

マイヒロです。僕がJavaScriptについて勉強した時、ぼんやりと流した「無名関数」と「アロー関数」について説明します。

結論からいうと、僕はこう覚えました。

順番に解説します。

無名関数は関数名がいらない

普通の関数はこんな感じに書きますよね。

function 関数名(引数){
  処理
  return 戻り値
};

無名関数はこうします。

function 引数）{
  処理
return 戻り値
};

最初のコードと１行目を見比べてみてください。そうです。無名関数は、関数名が無いだけです。
ただ、関数は関数名がないと呼び出せないので、このままでは呼び出すことができません。
そこで、無名関数を変数に代入します。

const yourName = function (){
  console.log("君の名は");
};

yourNameという変数に、先程の無名関数を代入しました。
呼び出すときは、普通の関数にならい、関数名()と記述します。
では出力してみます。

yourName ();
//コンソールに君の名はと表示されます

ここまでが無名関数の説明となります。

無名関数を簡単に書けるのがアロー関数です。

先程の無名関数

function（引数）{
  処理
return 戻り値
};

こちらをアロー関数にします。

(引数) => {
  処理
  return 戻り値
};

どうでしょうか？違いがわかりますか？　
function を消して、引数の後にアロー（=>）をつけるだけです。

先述したアロー関数には、更に省略した書き方ができる場合があります。
それは、次の条件①、②にあてはまる場合です。

条件①処理が一文で戻り値を返すだけの場合

(引数) => {処理 return 戻り値};

条件②引数が1つだけの場合

(引数) => 処理:

実際にそれぞれの書き方で書いてみます。
①は先程と同じですね。

yourName() => { console.log("君の名は"); };

②は{}も省略します。

yourName() => console.log("君の名は");

このようになりました。コードがかなりスッキリしましたね！

以上が無名関数、アロー関数の説明です！わかりやすかったでしょうか？
それではまた！