JavaScriptのアロー関数の基礎と活用

—

by

ai
in
日々の備忘録 > web > JavaScriptのアロー関数の基礎と活用

アロー関数とは

アロー関数は ECMAScript 6 (ES6) で導入された、関数を簡潔に記述できる構文です。従来の function 宣言に比べてシンタックスが短く、this がレキシカルにバインドされる点が特徴です。

基本構文

(引数) => 式

引数が1つだけの場合は丸括弧を省略できます。

x => x * x

ブロック形式の関数

複数行の処理や return が必要な場合は波括弧でブロックを囲みます。

const sum = (a, b) => {
  const result = a + b;
  return result;
};

アロー関数と this の関係

通常の関数は呼び出し時のコンテキストに応じて this が決まりますが、アロー関数は宣言されたスコープの this をそのまま利用します。これによりコールバック内で this を保持したいケースで便利です。

function Counter() {
  this.count = 0;
  setInterval(() => {
    this.count++;
    console.log(this.count);
  }, 1000);
}
new Counter();

使いどころと注意点

  • 短い関数やコールバックではアロー関数が推奨されます。
  • メソッド定義やコンストラクタには不向きです。this が期待通りにバインドされないためです。
  • オブジェクトリテラルを返す場合は丸括弧で囲む必要があります。 
    const getObj = () => ({ id: 1, name: 'Alice' });

まとめ

アロー関数はコードを簡潔にし、this バインディングの罠を回避できる強力なツールです。ただし、すべての場面で万能というわけではなく、用途に応じて従来の関数宣言と使い分けることが重要です。

Views: 3