👋

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

2021/10/09に公開約1,200字

アロー関数とは?

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

無名関数の場合

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

ログインするとコメントできます