Zenn
👋

アロー関数と無名関数の違いまとめ

2021/10/09に公開
JavaScript
tech

アロー関数とは？

ES６から導入された無名関数を簡潔に書くための記法

無名関数の場合

const sample = function(fuga){
  // 処理
  return fuga; 
}

アロー関数の場合

const sample = (fuga) => {
  return fuga;
}

アロー関数の記述省略のルール

1,本体が一文である場合

本体が一文である場合、ブロックを表す{...}を省略できます。
また、文の戻り値がそのまま戻り値とみなされるので、return命令も省略できます。

2,引数がひとつの場合

引数がひとつの場合、引数をくくるカッコも省略できます。

3,引数がない場合

引数がない場合はカッコを省略せずに記述します。

上記の例はここまで省略可

const sample = fuga => fuga;

アロー関数の制約

const person = {
  name: 'Yudai'
  hello: () => {
    this.name;
  }
}

person.hello();

この時person.hello()で呼び出されるアロー関数はthisを持たないため、グローバルスコープのthisを指す。

const person = {
  name: 'Yudai'
  hello: function(){
    this.name;
  }
}

person.hello();

こうすると、無名関数はthisを持つのでthisはオブジェクトのthisを参照する

オブジェクトのメソッドとして呼び出される場合はthis = 呼び出し元のオブジェクト

関数として実行される場合はthis = グローバルオブジェクトを指す

おまけ

const person = {
  name: 'Yudai'
  hello: function(){
    this.name;
  }
}

↓ES6以降はこう書くことも可能

hello(){
  this.name;
}

参考

Discussion