[Javascript]アロー関数についてちょい調べる

はじめに

またも「アロー関数とは？？」という質問をもらったときに、よくわからなかったので 調べて理解を深めつつ、学んだことをアウトプットしてみる。✊

アロー関数 vs 関数　違いは?

ES6から導入された新しい関数の書き方。

前の関数と比べて、その特徴は....

1 functionより短く書ける

//関数
function test(x) {
}

//アロー関数
const arrowFunc = (x) => x + 1

2thisの扱い方に注意

this....オブジェクト。どのオブジェクトであるかは、関数の呼ばれ方によって変わる。

普通の関数

...thisの参照先が、呼び出した関数によって変わる

param = 'global param';

function testFunc(){
  console.log(this.param);
}

const test = {
  param: 'test param',
  func: testFunc
}
const test2 = {
  param: 'test2 param',
  func: testFunc
}

test.testFunc(); // 結果：test param
test.testFunc2(); //結果: test2 param

this.paramの値は、呼び出し元がtest or test2かで異なります。
関数が定義された地点では、thisが何者なのかは決まってなく、呼び出されたときに決定します。

アロー関数

同じ関数を、アロー関数で見てみます。

param = 'global param';

function testFunc(){
  console.log(this.param);
}

const test = {
  param: 'test param',
  func: testFunc
}
const test2 = {
  param: 'test2 param',
  func: testFunc
}

test.testFunc(); // 結果：global param
test.testFunc2(); //結果: global param

アロー関数ではどちらもgloval paramになります。
アロー関数では宣言された関数は、宣言された地点で"this"を確定するのです。
呼び出し元がtestFuncだろうと、testFunc2だろうと関係ありません。

アロー関数では定義してからのみ呼び出せる

普通の関数だと下記が可能になってします。

a() // 下で定義する前に呼び出しているが、エラーにならない
function a() {}