アロー関数について

アロー関数についてのメモ

アロー関数について

無名関数を記述しやすくした省略記法

//一般的な関数
function a(name){
    return 'hi ' + name;
}

//関数式の場合
//bに代入するのは無名関数 
const b = function(name){
    return 'hi ' + name;
}

console.log(a('tom'));
console.log(b('bob'))

hi tom
hi bob

無名関数をアロー関数にする

//1.functionを削除
//2.) と { の間に => をいれる
const b = (name) => {
    return 'hi ' + name;
}
console.log(b('bob'))

hi bob

さらに省略可

//・引数が一つの場合()を省略できる
//・実行行が一つの場合は{}とreturnが省略できる
const b = name => 'hi ' + name;
console.log(b('bob'))

hi bob

引数を２つ以上取りたいとき

const b = (name, name1) => 'hi ' + name + ' ' + name1;

console.log(b('bob','marley'))

hi bob marley

引数を取らないときは()は省略しない

const b = () => 'hello ';

()は_でも書ける
_でダミーの変数を定義したことになる

const b = _ => 'hi ';

注意

アロー関数は基本的に無名関数の省略記法になるが、厳密には機能が同じというわけではない。
特にthisは挙動がことなるので気をつける。

thisとアロー関数

下記のpersonオブジェクトはグローバルコンテキストに定義されている。
グローバルコンテキストのthisの参照先のオブジェクトはwindowオブジェクトになる。
ここでperson.helloを呼び出すと、アロー関数になるため、thisをとらない。
なのでthisはスコープチェーンをたどって、外側のレキシカルスコープに探しに行く。スコープについて
そこで見つかるのがwindowオブジェクトなのでperson.helloの中のthisはwindowオブジェクトとなる。

window.name = 'John';

const person = {
    name: 'Tom',
    hello: () => {
        console.log('Hello ' + this.name);
    }
}
person.hello();

Hello John

ちなみにこの無名関数は

const person = {
    name: 'Tom',
    hello: function() {
        console.log('Hello ' + this.name);
    }
}

下記のように省略できる。
無名関数がhelloプロパティに格納されているということになる。
hello: () => {} の意図では使用不可

const person = {
    name: 'Tom',
    hello() {
        console.log('Hello ' + this.name);
    }
}

下記、const a = () => console.log(‘bye ‘ + this.name);のthisはJohnをとる

window.name = 'John';

const a = () => console.log('bye ' + this.name);

const person = {
    name: 'Tom',
    hello(){
        console.log('Hello ' + this.name);
        a();
    }
}
person.hello();

Hello Tom
bye John

この
const a = () => console.log(‘bye ‘ + this.name);
をperson.helloの中に入れた場合は下記のようになる

window.name = 'John';

const person = {
    name: 'Tom',
    hello(){
        console.log('Hello ' + this.name);
        const a = () => console.log('bye ' + this.name);
        a();
    }
}
person.hello();

Hello Tom
bye Tom

ではこの場合のthisはどこをとるのか

window.name = 'John';

const person = {
    name: 'Tom',
    hello(){
        console.log('Hello ' + this.name);
        const a = () => console.log('bye ' + this.name);
        a();
    }
}
// person.hello();

function b(){
    const a = () => console.log('byebye ' + this.name);
    a();
}

b();

答えはJohn
この
() => console.log(‘byebye ‘ + this.name);
関数のレキシカルスコープはb()の関数スコープになるが、関数がただただ呼ばれた際には、この関数のthisはwindowオブジェクトを参照する。

byebye John