アロー関数
アロー関数
functionと何度も書くのは面倒。
functionはアロー関数に変更できる。(今の主流はこちらだと思う)
アロー関数の基本的な文法
(引数,...) => {処理...}
重要
code:allow1.js
const fun1 = function(a) {
return a*a;
}
console.log('fun1');
console.log(fun1(2));
console.log('--------');
const allow1 = (a) => {
return a*a;
}
console.log('allow1');
console.log(allow1(2));
console.log('--------');
// 1、処理が複数なければ(一行だけなら)、「{}」と「return」を削除できる。
// 戻り値は処理結果
const allow2 = (a) => a*a;
console.log('allow2');
console.log(allow2(2));
console.log('--------');
// 2、引数が一つだけなら、「()」を削除できる。
// 戻り値は処理結果
const allow3 = a => a*a;
console.log('allow3');
console.log(allow3(2));
console.log('--------');
逆にいうと・・
複数の引数や引数なしの場合、引数の周りの括弧を入れなおす必要がある。
同様に、処理に追加の行が必要な場合は、中括弧に加えて "return" を入れなおす必要があります
(アロー関数は return する場所や返値を魔法のように推測できるわけではありません)。
code:allow2.js
const fun2 = function(a, b) {
return a + b;
}
console.log('fun2');
console.log(fun2(2, 3));
console.log('--------');
// 引数が複数ある場合、「()」を省略できない。
const allow4 = (a, b) => a + b;
console.log('allow4');
console.log(allow4(2,3));
console.log('--------');
// 引数なしの場合も「()」を省略できない。
const x = 2;
const y = 3;
const allow5 = () => x + y;
console.log('allow5');
console.log(allow5());
console.log('--------');
// 処理が複数行の場合は(どこが戻り値になるかわからないので)「{}」と「return」が必要
const fun3 = function(a, b) {
const surplus = 10;
return a + b + surplus;
}
console.log('fun3');
console.log(fun3(2, 3));
console.log('--------');
const allow6 = (a, b) => {
const surplus = 10;
return a + b + surplus;
}
console.log('allow6');
console.log(allow6(2, 3));
console.log('--------');
オブジェクトを返すとき、「{}」がアロー関数の記号と判断されてしまうので、「()」で囲む。
code:allow3.js
// オブジェクトを返すとき
// 「{}」がアロー関数の記号と判断されてしまうので、「()」で囲む。
// undifindになる
const allow7 = () => {
bar: 123
};
console.log('allow7');
console.log(allow7());
console.log('--------');
// 意図した挙動
const allow8 = () => ({
bar: 123
});
console.log('allow8');
console.log(allow8());
console.log('--------');