【Javascript】アロー関数

アロー関数は、Javascript における関数の一つです。

通常の function 式による関数の代替構文やシンタックスシュガーの側面を持ちますが、アロー関数と通常の関数では振る舞いが違うため、アロー関数と通常の関数は常に交換可能ではありません。

基本構文

const getArea = (width, height) => {
  return width * height;
}

console.log(getArea(10, 20));

アロー関数は状況に応じてさらに短く記述できます。

アロー関数の中身が return するだけの処理の場合

文ブロック {}や return を省略できます。

const getArea = (width, height) => width * height;

console.log(getArea(10, 20));

引数が1つしかない場合

丸括弧 () を省略できます。

const echo = message => console.log(message);

echo('Hello World.');

引数がない場合

ただし、引数がない場合は、丸括弧 () を省略することはできません。

const helloWorld = () => console.log('Hello World.');

helloWorld();

アロー関数と通常関数の違い

大きな違いは、以下の3つです。

• this の扱い
• アロー関数はコンストラクタとして使うことはできない
• アロー関数は関数リテラルのみ（関数の宣言はできない）

他にも違いはあるのですが、より本質的な違いは上記の3点です。

this の扱いが違う

通常の関数の場合、this は、関数の呼び出しコンテキストによって決まります。アロー関数の場合、this はアロー関数が定義されているスコープの this と同じになります。この違いが、アロー関数最大の違いと言っても良いでしょう。

詳しくは、this についてをご覧ください。

yayoi-tech.hatenablog.com

アロー関数はコンストラクタとして使うことはできない

const Rectangle = () => {
  console.log(this);
};

new Rectangle();
// エラーになる

アロー関数は関数リテラルのみ

そもそも、関数リテラルと関数の宣言の違いは、以下の違いです。

// 関数リテラル
const helloWorld = function () {
  console.log('Hello World.');
};

helloWorld();

// 関数宣言
function helloWorld() {
  console.log('Hello World.');
}

helloWorld();

通常の関数は、関数宣言と関数リテラルのどちらでも使用できますが、アロー関数は、関数リテラルとしてしか使用できません。

以上です。

developer.mozilla.org