[JavaScript] Arrow Functionは普通のFunctionじゃない

という旨の悲しい出来事があった。
こんな悲しい思いを何度もするのは御免なので Arrow Functionについて調べてみた。

TL;DR

ArrowFunction == Function not === Function
普通のFunctionと異なるところ

  • アロー関数のthisには関数が宣言された時のスコープのthisが束縛される
  • アロー関数内でarguments変数は使えない
  • アロー関数はコンストラクタとして使えない
    • アロー関数をnewでコールするとx => x is not a constructorのようなエラーが起きる

ちなみにtypeof (x => x)"function"となりますので、コンストラクタを受け取ってよしなにする関数の使用・実装の際にはご注意ください。

以下のコードでアロー関数か通常の関数かが大雑把に推測できます。
(prototypeプロパティが削除された関数とprototypeプロパティが設定されたアロー関数の区別はつかない)

function isArrowFunction(fn) {
    return typeof fn === "function" && fn.prototype === void 0;
}

isArrowFunction result

これを読んだあなた。どうかこの罠にかからないでください。それだけが私の望みです。

発端

発端はテストツールとして使い始めたMochaだったかSinonだったかのコールバックにどんなパラメータが与えられるのか調べていた時に以下のコードをコールバックに渡した時に起きた。

() => console.log(arguments);

このコールバックが実行された時にUncaught ReferenceError: arguments is not definedというエラーが起きた。
そんなバカな、関数内でスペルミスもないのにargumentsが使えないなんて…と思い以下のツイートをした。

このツイートをみた @gaogao_9 さんから以下の様な情報が

ということで、アロー関数は通常の関数と違い、arguments変数が使えないらしい。
(代わりにRestパラメータ使うといいよとも教えてくれた)

ニワカESer2015のメモでした。

参考

アロー関数が実装された – JS.next