アロー関数の基本
① 前提：JavaScriptにおいて関数(関数リテラル)はデータ型として扱うことが可能
→変数への代入や引数/戻り値として使用することが可能
//関数を変数へ格納 (例は二つの数値引数を加算して返却する関数)
let add = function(num1,num2){ //変数へ格納する関数に関数名は無い(=匿名/無名関数)
return num1+num2;
};
//変数名で呼び出しが可能
add(10,5);② =>(アロー関数)は上記のような記述をシンプルにするための方法
//アロー関数を使って関数を変数へ格納 <変数名> = (<引数>) =>{<関数処理>};
let add = (num1,num2) => {
return num1+num2;
};
//変数名で呼び出しが可能
add(10,5);アロー関数の簡素化ルールと読み取り方
アロー関数は定義される関数の条件によってさらに簡素な表現が可能になります。
この「簡素化」が、覚えれば便利な反面初学者には意味が推測しにくく、最も躓きやすい部分です(体験談)。
＊有用なツール類では最も簡素化されたコンパクトな書き方がされることが多いため、なんとなく意味だけでも押さえておきましょう。
関数の処理が一文で完結する → 関数を括る {} とreturn文を省略
省略なし：
//アロー関数を使って関数を変数へ格納 <変数名> = (<引数>) =>{<関数処理>};
let add = (num1,num2) => {
return num1+num2; //関数内の処理が一文
};
//変数名で呼び出しが可能
add(10,5);省略後：
//アロー関数を使って関数を変数へ格納 <変数名> = (<引数>) =>{<関数処理>};
let add = (num1,num2) => num1+num2; //｛｝とreturn文を省略
//変数名で呼び出しが可能
add(10,5);関数の引数が一つだけ → 引数を括る () を省略
省略なし：
//アロー関数を使って関数を変数へ格納 <変数名> = (<引数>) =>{<関数処理>};
let pulsOne = (num) => {
num += 1;
return num;
};
//変数名で呼び出しが可能
plusOne(10);省略後：
//アロー関数を使って関数を変数へ格納 <変数名> = (<引数>) =>{<関数処理>};
let pulsOne = num => { //引数を括る()を省略
num += 1;
return num;
};
//変数名で呼び出しが可能
plusOne(10);引数がない → 省略不可。()で記述
既存のユーティリティなどを利用するときに最もよく見るのがこの形です。ソースコードのトレースをするときは格納されている変数名に注目しましょう。
//アロー関数を使って関数を変数へ格納 <変数名> = (<引数>) =>{<関数処理>};
let getmsg = () => {
const str = 'AAA' + 'BBB'
return str;
};
//変数名で呼び出しが可能
getmsg();その他、よく見る記述の仕方
最後に既存ユーティリティ等でよく見かける記述方法についてまとめておきます。
関数の引数としてアロー関数を定義 → 変数への格納無し
ある関数Aの引数として別の関数Bを与えたい場合、関数Bを変数へ格納することは省略されることが多いです。
原型(いったん変数へ格納する書き方)：
let funcB = () => {
console.log('TESTMSG');
}
//関数リテラルを引数とする関数funcA
funcA(funcB);簡略化した書き方：
funcA(() =>{
console.log('TESTMSG');
});
一言コメント
↑はイベント関数の引数として簡単な処理(関数)を指定したい場合などによく見られます。
トレースをするときは引数指定部分と関数本体を分けて考えるとミスが防げますね。
コメント