マイヒロです。僕がJavaScriptについて勉強した時、ぼんやりと流した「無名関数」と「アロー関数」について説明します。
結論からいうと、僕はこう覚えました。
- 無名関数は、関数名がいらない
- アロー関数は、”
function
“を省略して、代わりに矢印=>
を書く - アロー関数は、処理が一文なら
{}
を省略して書ける
順番に解説します。
無名関数は関数名がいらない
![可愛い子猫の画像です。](https://maihiroblog.com/wp-content/uploads/2021/05/cat-gb4593573e_1920.jpg)
普通の関数はこんな感じに書きますよね。
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("君の名は");
このようになりました。コードがかなりスッキリしましたね!
以上が無名関数、アロー関数の説明です!わかりやすかったでしょうか?
それではまた!