無名関数とアロー関数
こんにちは、kazutoです。以前、Javascriptでは関数を使用してプログラムを組んでいくと解説しました。今回は、関数について掘り下げて、無名関数とアロー関数について解説していきます。
※まだ関数の定義の仕方がわからない方は、下記の記事を参照してください。
無名関数
無名関数とは、関数自体に意味を持たない関数です。通常の関数定義の方法だと
function addHTML(){
・・・処理
};functionの後に関数名を命名するのが通常の関数定義の方法でした。一方、無名関数は、関数自体には名前がありません。少しややこしいと感じますが、構文を見てもらうと、「なるほど‼️」と思いますので、構文を確認してみましょう。
//変数に格納する場合
const html = function(){
console.log("無名関数です");
};
html()
//関数の引数として使う場合（コールバック関数）
fruits=["apple","orage","banana"]
fruits.forEach(function(fruit,index){
console.log(`${index+1}.${fruit}`)
})
無名関数を使用する主なシチュエーションとして
- 変数に関数の返り値を格納したい場合
- コールバック関数を使用するとき
などが上がります。
挙動としては、通常の関数とはあまり変わりません。しかし、スコープの範囲が若干違うという事は覚えておきましょう。
※コールバック関数については、他の記事で解説します。「関数の引数の中に関数が入っているな…」という認識で、現段階ではOKです。
アロー関数
アロー関数とは、無名関数の進化系みたいな物です。取り扱いについては、無名関数とは変わらないのですが、ある一定の条件を満たす事で、一部省略する事ができ、ワンライナー(１行)で記述する事ができます。
では、構文を確認してみましょう。
//通常
const arrow = (引数)=>{
処理・・
}
//省略1（波括弧の処理がワンライナー場合）
const arrow=()=>console.log("波括弧を省略できます");
//省略2 (引数が単数な場合)
const arrow = name=>console.log("括弧を省略できます.");
まとめると
- 波括弧内の処理がワンライナーな場合
→波括弧が省略可能 - 引数が単数な場合
→括弧を省略可能
となります。慣れていない場合は、省略しなくとも大丈夫です。正常に動くので。
アロー関数の構文を確認したところで、改めて無名関数を見てみましょう。
//変数に格納する場合
const html = function(){
console.log("無名関数です");
};
html()
//関数の引数として使う場合（コールバック関数）
fruits=["apple","orage","banana"]
fruits.forEach(function(fruit,index){
console.log(`${index+1}.${fruit}`)
})
上記の無名関数をアロー関数に書き換えてみます。
const html = ()=>console.log("無名関数です");
html()
fruits=["apple","orage","banana"]
fruits.forEach((fruit,index)=>console.log(`${index+1}.${fruit}`));アロー関数に書き換えてみました。無名関数と比べ、記述量が減り可読性が高いコードになりました。
※アロー関数は、ES6から導入された、新しい関数の定義の仕方です。基本は無名関数ではなく、アロー関数を使いましょう。
まとめ：無名関数とアロー関数
今回は、
- 無名関数
- アロー関数
について解説しました。
通常の関数と違う点は、
- 関数自体に名前を持たない
- スコープの範囲
上記の点を抑えれてもらえば、通常の関数定義と差別化をして使いこなせると思います。以上、kazutoでした。