アロー関数の個人的なハマりどころまとめ

アロー関数

• いくつかハマりどころがあったのでメモっておく
• 便利だけどスコープ関連ではまるのでes5の構文と混ぜるな危険というのがわかった
• アロー関数使うときはes5を忘れましょう

構文例

es5

var f0 = function(x){ return x * 2 }

es6

const f1 = (x) => { return x * 2 }
const f2 = (x) => x * 2
const f3 = x => x * 2

thisスコープ

• クロージャではthisが呼び出し先のthisに切り替わる仕様だったが呼び出し元のthisであることが保証された

es5

var C = function(){
    this.flag = false
}
C.prototype.asyncGet = function(callback){
    var self = this
    setTimeout(function(){
      callback(self)
    }, 1000)
}
new C().asyncGet(console.log);

es6

var C = function(){
    this.flag = false
};
C.prototype.asyncGet = function(callback){
    setTimeout(()=>callback(this), 1000)
}
new C().asyncGet(console.log)

混ぜるな危険パターン

• プロトタイプベースのクラス定義のときにアロー関数使うとthisがグローバルを指します

es6

var C = function(){
    this.flag = false
};
C.prototype.asyncGet = (callback) => {
    setTimeout(()=>callback(this), 1000)
}
new C().asyncGet(console.log)

可変引数

es5

var f = function(){ return [].slice.call(arguments) }
f(1,2,3,4,5,6,7,8,9)

[1,2,3,4,5,6,7,8,9]

es6

const f = (...args) => args
f(1,2,3,4,5,6,7,8,9)

[1,2,3,4,5,6,7,8,9]

混ぜるな危険パターン

• argumentsがグローバルスコープを指しているため、かならず意図しない配列が返ってきます
• es5からes6へ書き換えるときにおきます

es6

const f = () => [].slice.call(arguments)
f(1,2,3,4,5,6,7,8,9)

[{},
{ [Function: require]
    resolve: [Function],
    main: 
  ....
]