/ #JavaScript #ECMA Script 2015 

ES6のアロー関数を簡単解説

アロー関数とは

アロー関数はES6(ECMA Script 2015)で導入された、関数リテラルを短く書くことができる構文です。
書き方の違いだけかと思いきや、挙動の違いもあるので要注意です。

とりあえず使いたい人向けの基本的な書き方

とりあえずES6成分を増やしたい。

// function を使った構文
const sum = function(x, y) {
  return x + y;
}

// アロー関数にすると
const sum = (x, y) => {
  return x + y;
}

function がなくなり => になっています。 基本的にはこれだけです。

また、条件によっては、いくつかの省略した記法が利用できるようになっています。

// 関数の中身が1文のみの場合 {} と return が省略できます。
const sum = (x, y) => x + y;

// 引数がひとつの場合、() が省略できます。
const twice = x => x * 2;

// 引数がない場合は () は省略できません。
const one = () => 1;

いかしてますね。

this の固定

function が => になっただけかと思いきや、どうやら違うようです。
代表的なものに、this の挙動の違いがあります。

function 関数内での this は実行時点で決まるという、何だかフワフワした存在です。
しかし、アロー関数ではレキシカルスコープの this を参照します。これは宣言時に固定されています。

this.jiru = 'Yodare'

// function
const regularFunc = function() {
  return this.jiru
}

// アロー関数
const arrowFunc () => {
  return this.jiru
}

const kao = {
  jiru: 'Hanamizu',
  regular: regularFunc,
  arrow: arrowFunc
}

kao.regular() // => Hanamizu
kao.arrow() // => Yodare

ざっくり言うと

  • function の代わりに => で書ける
  • this の挙動が違うから、書き換えるときは気をつけよう

これであなたも今日からES6使いです。