JavaScript arrow function.
アロー関数式(Arrow function)とはその名の通り、=> (矢)を使って関数リテラルをより短く記述することができる通常の function式の代替構文です。また、this, arguments, super, new.targetを束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。
リテラルとはソースコードに直接べた書きした文字や数字のことです。
const name = "taro";
const age = 18;
この例では、「"taro"」と「18」がリテラルとなります。
つまり関数リテラルとはソースコードに直接べた書きされた関数のこと。
JavaScriptでは関数はデータ型のひとつなので、変数に代入したり、関数の引数として渡したり、戻り値として関数を返すことが可能です。
関数リテラルの例
let normalFunc = function(base,height){
return base * height / 2;
};
console.log('三角形の面積は' + normalFunc(10,2));
//三角形の面積は10
関数リテラルは宣言した時点では名前を持たないことから 匿名関数 無名関数 と呼ばれます。 上記の例ではfunction(base,height){...};と名前のない関数を定義した上で変数normalFuncに格納しています。
以上が関数リテラルの説明になります。
ここでなぜ関数リテラルの説明をしたかというと、アロー関数は関数リテラルをシンプルに記述する方法だからです。
関数リテラルの例
let arrowFunc = (base,height) => {
return base * height / 2;
};
console.log('三角形の面積は' + arrowFunc(10,2));
//三角形の面積は10
上記の例ではfunctionの代わりに=>が使われていますね。
アロー関数は基本的に以下の様に書きます。
(引数,...)=>{...関数の本体...}
function を使った場合と並べて再掲しますので、見比べてみてください。
// 今までの関数
let normalFunc = function(base,height){
return base * height / 2;
};
// アロー関数式
let arrowFunc = (base,height) => {
return base * height / 2;
};
console.log('三角形の面積は' + normalFunc(10,2));
// 今までの関数での処理結果：三角形の面積は10
console.log('三角形の面積は' + arrowFunc(10,2));
// アロー関数式での処理結果：三角形の面積は10
アロー関数は条件によってさらに簡素化できます。
本体が一文である場合、ブロックを表す{...}を省略できます。
また、文の戻り値がそのまま戻り値とみなされるので、return命令も省略できます。
let getTriangle = (base, height) => base * height / 2;
console.log(getTriangle(10,2));
引数がひとつの場合、引数をくくるカッコも省略できます。
let getCircle = radius => radius * radius * Math.PI;
console.log(getCircle(10));
//314.1592653589793
引数がない場合はカッコを省略せずに記述します。
let show =()=> console.log('Hello, world!');
show();
//Hello, world!
アロー関数では、thisはアロー関数が宣言された場所によって決まります。つまり定義したコンテキストでthisを固定します。これによって var self = this; を書かなくてよくなったりします。