アロー関数 | WebworksTips

(引数,…) => {…関数の本体…}

アロー関数とは、その名の通り =>(矢) を使って関数リテラルを記述する。

let getTriangle = (base, height) => {
  return base * height / 2;
};
console.log('三角形の面積は' + getTriangle(10,2)); // 三角形の面積は10

アロー関数は条件によってさらに簡素化できる。

1. 本体が一文である場合

本体が一文である場合、ブロックを表す{…}を省略できる。また、文の戻り値がそのまま戻り値とみなされるので、return命令も省略できる。

let getTriangle = (base, height) => base * height / 2;
console.log(getTriangle(10,2)); // 10

引数がひとつの場合、引数をくくるカッコも省略できる。

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; を書く必要がなくなる。