バリエーションが多すぎる
アロー関数は括弧、return、代入がそれぞれあったりなかったりと、見るたびに書式が異なります。
この書式が毎回違う（ように見える）ことがわかりづらい理由の気がしたので、アロー関数を構成する要素を整理してみたいと思います。
//以下全部アロー関数 const add = (a ,b) => a + b + 100; // これもアロー関数 a => a + 100; // このイカみたいな=()=>は何？くコ:彡 const add = () =>{ let a = 100 + 2; console.log(a); }; // { }が増えてreturnも増えた？ const add = (a) => { let result = a + 100; console.log(result); return result; }; // ( )多すぎない？ ((a, b) => console.log(a + b))(100, 200);
そもそもアロー関数って何？
アロー関数は通常の関数式を簡潔に書く構文です。
以下がアロー関数の基本です。
アロー関数を代入する変数 = (仮引数) => {いろんな処理};
呼び出すときはこうなります。
アロー関数を代入した変数(引数);
実際に書いてみます。
// 通常の関数 function add(a, b) { return a + b + 100; } //add を呼び出して戻り値をconsole.logで出力する console.log(add(1, 2)); // 103 // アロー関数にするとこうなる const arrow_add = (a, b) => { a + b + 100; }; //arrow_add を呼び出して戻り値をconsole.logで出力する console.log(arrow_add (1, 2)); //103
()の有無について
アロー関数の引数の( )は、引数が１つの場合に限り省略できます。
引数がない、2個以上の場合は( )は必須になります。
// 通常の関数 function(a){ return a + 100; }; // ( )を付けたままのアロー関数 (a) => a + 100; // 引数が1個ならば( )を省略できる a => a + 100; //引数が0個なので( )が必須 () => 100 + 2; // 引数が2個以上でも( )は必須 (a, b)=> a + b; // 引数が0個で代入するとイカができる =()=> くコ:彡 const add = () => 100 + 2;
{ }の有無について
アロー関数が一つの式だけで構成されている場合、関数本体の{ }を省略することができます。
// 式が1つなので{ }を省略できる a => a + 100; // { }を書くこともできる a => { a + 100; }; // 式が複数なので{ }が必要 a => { let price = a + 100; console.log(price); };
returnの有無について
rerurnを省略すると最初の式の評価結果が戻り値として返ります。
アロー関数が一つの式だけで構成されている場合、returnを省略することが多いです。
// returnしないと最初の式が戻り値になる add = a => a + 100; console.log(add(100)); // 200 // returnした値が戻り値になる add = a => { let price = a + 100; price += 100 return price; }; console.log(add(100)); // 300
代入の有無について
アロー関数は式の代入をしない場合でも、コールバック関数や即時実行関数として使うことができます。
// 式をaddに代入している const add = a => a + 100; console.log(add(100)); // 200 // 即時実行するときは( )で囲んで、引数を入れた( )をつなげる (a => console.log(a + 100))(100); //200 // コールバック関数として使う setTimeout(() => console.log(a + "秒経過しました"), a * 1000);
以上です
アロー関数を構成する要素を一つずつまとめてみました。
最初に書いたバリエーションも一つ一つの要素を見れば意外と難しいことはないように思います。
