アロー関数

アロー関数(=>)について

アロー関数とは

　「アロー関数」は、ES6(ES2015) の新構文の一つで、無名関数を省略記述できる方法です。

下記のように function の代わりに => を記述すると同じ意味になります。ただし、無名関数とアロー関数とは完全に等価というわけではありません。

ES6～

var func = (arg1, arg2) => { console.log(arg1, arg2); }

従来

var func = function(arg1, arg2) { console.log(arg1, arg2); }

　下記の様な書き方ができます。

// 一般的な書き方
(arg1, arg2) => { return arg1 + arg2; }

// { } を省略すると return 文とみなされる
(arg1, arg2) => arg1 + arg2

// { } 省略でオブジェクトリテラルを返す場合は () でくくる
(arg1, arg2) => ({"x": arg1, "y": arg2})　　　// (arg1, arg2) => {"x": arg1, "y": arg2}　はエラーになる

// 関数が１つのreturn文のみの場合は波括弧とreturn を省略可能
var fn = (x, y) => x + y;

// 引数が0個の場合は ( ) が必須
() => { return 10; }

// 可変引数をサポート
(x, y, z, ...rest) => { ... }

// デフォルト引数をサポート
(file, mode = "r") => { ... }

　function と => で this の扱いが異なります。function の場合は関数が呼ばれる対象のオブジェクトとなるのに対し、=> の場合は関数を呼び出す側の this となります。

function MyClass() {
  window.setTimeout(function() { console.log(this) }, 1000); // Window オブジェクト
  window.setTimeout(() => { console.log(this) }, 1000);      // MyClass オブジェクト
}
new MyClass();

無名
関数

// 無名関数でのコンストラクタ定義
var Person = function (name, age) {
    this.name = name;
    this.age = age;
};
var taro = new Person('Taro', 16);
console.log(taro.age); //16

アロー
関数

// アロー関数でのコンストラクタ定義（※間違った例）
var Person = (name, age) => {
    this.name = name;
    this.age = age;
};
// コンストラクタとして呼び出した時点でエラーが発生
var taro = new Person('Taro', 16); //Error: not a constructor

　arguments の扱いも異なる。function の場合は関数の引数を示すが、=> の場合は関数を呼び出す側の引数を示します。

function func(a, b) {
  var func1 = function(a, b) { console.log(arguments); }
  func1(1, 2);    // [1, 2]
  var func2 = (a, b) => { console.log(arguments); }
  func2(3, 4);    // [3, 4]でなく[5, 6]となる
}
func(5, 6);

アロー関数の利用例

　アロー関数を使うと便利な例を幾つか示します。　参考

map
で
利用１

const materials = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ];
  console.log(materials.map((material) => { return element.length; }); // 出力: Array [8, 6, 7, 9]
  console.log( materials.map( ({ length }) => length ) );     // 上の場合の短縮表現 1
  console.log( materials.map( material => material.length) ); // 上の場合の短縮表現 2

map
で
利用２

const price = [100,500,2000];
tax_price = price.map( (value,index) => value*1.1*index )
console.log(tax_price);  // [ 0, 550, 4400 ]

forEach
で
利用

const price = [100,500,2000];
price.forEach((value,index) => console.log(value + price[index])); // [ 200, 1000, 4000 ]

*[配列].forEach( (value[, index[, thisArray]]) => ････は、value: 要素の値、index: インデックス番号、thisArray: 元の配列。参考1　参考2

find
で
利用

const price = [100, 500 ,1000];
over_400 = price.find(value => value > 400);
console.log(over_400); // 500

filter
で
利用

const price = [100, 500 ,1000];
over_400 = price.filter(value => value > 400);
console.log(over_400); // > [500, 1000]

reduce
で
実行

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(array1.reduce(reducer)); // 出力: 10 ← 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5)); // 出力: 15 ← 5 + 1 + 2 + 3 + 4

　アロー関数　関数の違い　 Arrow 　構文　ゼロから　 (=>) 　１分で理解　アロー関数+