javascriptのアロー関数とthisの挙動の違い

アロー関数は、より短く、簡潔に書ける関数の構文です。
javascriptは得意ではありませんが、いろいろと動的に動かして遊びたいので学習メモとしてまとめます。

関数をアロー関数に書き換える

例順を追って、関数のシンタックスを変換していきます。

例文は、引数iに2をかける関数です。

function timesTwo(i) {
    return i * 2;
}

const res = timesTwo(2);
console.log(res);

1.変数や定数に格納することで、下記のように書き直すことができます。

const timesTwo = function(i) {
    return i * 2;
}

2.functionを消して=>を付け足し、アロー関数に書き換えます。

const timesTwo = (i) => {
  return i * 2;
}

3.引数がひとつの場合は、( )を省略できます。

const timesTwo = i => {
  return i * 2;
}

4.関数の中身が1行しかない場合は、{ } と return を省略できます。

const timesTwo = i => i * 2;

アロー関数を使うことで、スッキリと書くことができました。

無名関数とアロー関数のthisの挙動の違い

無名関数の扱うthisと、アロー関数の扱うthisには注意が必要です。

let normalFn;
normalFn = {
    id: 43,
    counter: function() {
        console.log(this.id);
        
        // この場合の無名関数のthis.idはwindowオブジェクトを指す
        window.setTimeout(function() {
            console.log(this) // undefined
        }, 1000);
    }
};

normalFn.counter();

console.logの出力結果:

上記の例をconsole.log(this)で確認すると、windowオブジェクトを参照していることが分かります。

// thisをバインドする
let normalFn;
normalFn = {
    id: 43,
    counter: function() {
        console.log(this.id);
        
        // アロー関数はひとつ上のスコープのthisをバインドする
        window.setTimeout( () => {
            console.log(this) // {id: 43, counter: ƒ}
        }, 1000);
    }
};

normalFn.counter();

アロー関数に書き換えると、thisはアロー関数内で定義されず、
ひとつ上のスコープにthisを探しに行きます。
（スコープチェーンを辿って、ひとつずつ上のスコープでthisを検索します。）

参考

アロー関数/MDN
Udemy/Javascript中級者への道