JavaScript
es6

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

More than 1 year has passed since last update.

アロー関数

  • いくつかハマりどころがあったのでメモっておく
  • 便利だけどスコープ関連ではまるので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: 
  ....
]