JavaScript, プログラミング

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

JavaScriptの無名関数とアロー関数を説明します。

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

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

  • 無名関数は、関数名がいらない
  • アロー関数は、”function“を省略して、代わりに矢印=>を書く
  • アロー関数は、処理が一文なら{}を省略して書ける

順番に解説します。

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

子猫の画像でいったん落ち着きましょう!笑

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

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

無名関数はこうします。

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

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

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

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

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

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

アロー関数は”function”を省略して変わりに矢印(=>)を書く

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

先程の無名関数

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

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

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

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

アロー関数は処理が一文なら括弧({})を省略して書ける

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

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

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

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

(引数) => 処理:

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

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

②は{}も省略します。

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

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

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

作成者: マイヒロ

サラリーマンをしながら2011年頃から投資を始め、Amazon、Google(Alphabet)、Netflix、Tesla等の米国株を中心に投資してきました。 最近はプログラミングについて勉強しています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です