arrow function

ˈærəʊ ˌfʌŋkʃən アローファンクション

1. JavaScriptなどのプログラミング言語で、関数をより簡潔に定義するための構文。

ECMAScript 2015 (ES6) で導入された、`function`キーワードの代わりに`=>` (アロー) を用いて関数を記述する記法です。従来の関数とは異なり、自身の`this`を持たず、定義されたスコープの`this`を継承する（レキシカルスコープを持つ）特徴があります。これにより、特にコールバック関数において`this`のコンテキスト問題を解決するのに役立ち、コードの記述も短くなります。

const greet = () => "Hello!"; (const greetは、「Hello!」を返すアロー関数です。)

• const greet: greetという名前の定数を宣言しています。
• (): この関数が引数を受け取らないことを示します。
• =>: これがアロー関数であることを示し、左側が引数、右側が関数の本体であることを区別します。
• "Hello!": この文字列が関数の戻り値です。

const add = (a, b) => a + b; (const addは、二つの引数を足し合わせるアロー関数です。)

• const add: addという名前の定数を宣言しています。
• (a, b): aとbという二つの引数を受け取ることを示します。
• =>: アロー関数の構文です。
• a + b: aとbを足した結果が関数の戻り値となります。

const multiply = (x, y) => { const result = x * y; return result; }; (const multiplyは、二つの引数を掛け合わせ、結果を返すアロー関数です。)

• const multiply: multiplyという名前の定数を宣言しています。
• (x, y): xとyという二つの引数を受け取ることを示します。
• =>: アロー関数の構文です。
• { ... }: 関数本体が複数のステートメントを持つことを示し、明示的なreturnが必要です。
• const result = x * y;: xとyを掛けた結果をresultという定数に代入しています。
• return result;: resultの値を関数の戻り値として返します。

document.getElementById('myButton').addEventListener('click', () => { console.log(this); }); (ボタンがクリックされたとき、このアロー関数は定義時のthisコンテキストを表示します。)

• document.getElementById('myButton'): IDが'myButton'のHTML要素を取得します。
• .addEventListener('click', ...): その要素に'click'イベントのリスナーを追加します。
• () =>: イベントリスナーとして実行されるアロー関数です。
• console.log(this);: 現在のthisの値をコンソールに出力します。アロー関数では、thisは定義された時点のスコープに静的に束縛されます。

関連

• lambda function
• anonymous function
• ES6
• JavaScript
• callback function
• lexical this