[JavaScript] Arrow Functionは普通のFunctionじゃない
という旨の悲しい出来事があった。
こんな悲しい思いを何度もするのは御免なので Arrow Functionについて調べてみた。
TL;DR
ArrowFunction == Function not === Function
普通のFunctionと異なるところ
- アロー関数のthisには関数が宣言された時のスコープのthisが束縛される
- アロー関数内でarguments変数は使えない
- アロー関数はコンストラクタとして使えない
- アロー関数をnewでコールすると
x => x is not a constructor
のようなエラーが起きる
- アロー関数をnewでコールすると
ちなみにtypeof (x => x)
は"function"
となりますので、コンストラクタを受け取ってよしなにする関数の使用・実装の際にはご注意ください。
以下のコードでアロー関数か通常の関数かが大雑把に推測できます。
(prototypeプロパティが削除された関数とprototypeプロパティが設定されたアロー関数の区別はつかない)
function isArrowFunction(fn) {
return typeof fn === "function" && fn.prototype === void 0;
}
これを読んだあなた。どうかこの罠にかからないでください。それだけが私の望みです。
発端
発端はテストツールとして使い始めたMochaだったかSinonだったかのコールバックにどんなパラメータが与えられるのか調べていた時に以下のコードをコールバックに渡した時に起きた。
() => console.log(arguments);
このコールバックが実行された時にUncaught ReferenceError: arguments is not definedというエラーが起きた。
そんなバカな、関数内でスペルミスもないのにargumentsが使えないなんて…と思い以下のツイートをした。
`() => console.log(arguments)`ってしたらarguments is not definedって言われたんすけど…
— ラグ (@_ragg_) 2015年10月25日
このツイートをみた @gaogao_9 さんから以下の様な情報が
@_ragg_ アロー関数はargumentsオブジェクトを持ちません(is not definedと言われているとおりです
— がお (@gaogao_9) 2015, 10月 25
ということで、アロー関数は通常の関数と違い、arguments
変数が使えないらしい。
(代わりにRestパラメータ使うといいよとも教えてくれた)
ニワカESer2015のメモでした。