アロー関数は便利！

アロー関数って便利ですよね。functionっていちいち書かなくて済むし、なんたって通常の匿名関数と違ってthisがその都度定義されたりしませんから。例えば、

setTimeoutにおける匿名関数とアロー関数の違い

var value = 'GLOBAL';

const NotArrow = {
  value: 'LOCAL',
  timer: function() {
    setTimeout(function() {
      console.log('NotArrow: ' + this.value);
    }, 1000)
  },
};

const Arrow = {
  value: 'LOCAL',
  timer: function() {
    setTimeout(() => {
      console.log('Arrow: ' + this.value);
    }, 1000)
  },
};

NotArrow.timer(); // NotArrow: GLOBAL
Arrow.timer(); // Arrow: LOCAL

こうしたコールバックが存在するときは本当にアロー関数って重宝します。で、今回のお話ですがアロー関数を調子に乗って何でもかんでも使ってしまってえらい目を見たという話です。いや、すでにタイトルでオチてますが。

アロー関数も万能じゃない！

アホな実装の例

var value = 'foobar';

function Foo(value) {
  this.value = value;
}

Foo.prototype.printValue = () => {
  console.log(this.value);
};

const bar = new Foo('テスト');
bar.printValue(); // foobar

上の実装ではアロー関数を使ってしまっているためthisがセットされない、というかthisがグローバルオブジェクトに固定されてしまっているのですね。例えば、bar.printValue.call(bar);などとやっても無駄です。この辺りのことはMDNにも書かれていますね。アロー関数をfunctionに改めれば期待通りの動作になります。こんな馬鹿馬鹿しいことをしてしまうのは私だけかもしれませんが、アロー関数も万能じゃないし、使いすぎはよくないぞってことで。