JavaScript アロー関数についての備忘録

この記事は、JavaScriptのアロー関数について学習した内容をまとめた、自分用のメモです。誤りなどありましたら、ご指摘いただけますと幸いです。

アロー関数とは

アロー関数とは従来のfunctionキーワードを使った関数式をより短く、直感的に描くためのJavaScriptの構文である。ES2015(ES6)から導入された。
名前の通り、=>(アロー)記号を使って関数を定義するのが特徴

基本的な書き方

従来の書き方

const add = function(a, b) {
    return a + b;
};

アロー関数の書き方

const add = (a, b) => {
    return a + b;
};

省略ルール

アロー関数には、さらにコードを短くするための省略ルールがある。

1.処理が単一の式で、その結果を返すだけの場合{}とreturnを省略できる。

//上記のadd関数はここまで短くすることができる
const add = (a, b) => a + b;

2.引数が１つの場合()を省略できる

const double = (x) => x * 2;
//上のように()の引数が１つ場合以下のように省略できる
const double = x => x * 2;

3.引数がない場合は()を省略できない

const sayHello = () => 'Hello';

最大の特徴: thisの扱い

アロー関数のもっとも重要な特徴は、thisが指すものが従来の関数と異なる点
・従来
thisはその関数がどのように呼び出されたかによって決まる。これにより、意図しないものをthisが指してしまうことがある。
・アロー関数
thisは、その関数がどこで定義されたかによって静的にきまる。つまり、アロー関数が書かれた場所のthisをそのまま引き継ぐ(これをレキシカルスコープのthisと呼ぶらしい)

具体例

オブジェクトのメソッド内でsetTimeoutを使う場合によく違いが現れる.

const user = {
    name: '仙河',
    greetAfterWait: function() {
        // 従来のfunctionだと、一秒後には'this'が'user'オブジェクトを指さなくなる
        setTimeout(function() {
            // この中では、'this'は'window'オブジェクトを指すため、'this.name'はundefinedになる
            console.log(`従来の関数: こんにちは、${this.name}さん`);
        }, 1000);

        // アロー関数だと、外側のthis(userオブジェクト)を引き継ぐ
        setTime(() => {
            // この中のthisはuserオブジェクトを指す
            console.log(`アロー関数:　こんにちは、${this.name}さん`);
        }, 1000);
    }
};

user.greetAfterWait();
// 出力結果:
// 従来の関数: こんにちは、さん
// アロー関数: こんにちは、仙河さん

このようにアロー関数を使うとthisの挙動が直感的になり、const self = this;や.bind(this)のような工夫が不要になる。