Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【JavaScript ECMAScript】Arrow function expressions言語機能の使い方

Arrow function expressions言語機能の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

Arrow function expressions関数は、ECMAScript 2015 (ES6) で導入された、短く記述された構文を通じて匿名関数を生成し、その生成された関数が特定のコンテキストで動作を実行する機能を提供する関数です。この言語機能は、従来のfunctionキーワードを用いた関数定義に比べ、コードをより簡潔に記述できる点が特徴です。例えば、引数が一つのみで処理が単一の式で完結する場合、括弧やreturnキーワード、波括弧の記述を省略できます。

特に重要なのは、thisキーワードの挙動です。アロー関数は、自身が定義されたスコープのthisを継承し、固定します(レキシカルthis)。これにより、非同期処理のコールバック関数やイベントハンドラなど、thisの参照が変動しやすい場面で、意図しない挙動を防ぎ、コードの可読性と予測可能性を高めることが可能です。

一方で、アロー関数はコンストラクタとして使用できない点や、argumentsオブジェクトを持たないといった制約もあります。そのため、全ての関数定義にアロー関数を用いるのではなく、thisの振る舞いや関数の用途に応じて、従来の関数定義と適切に使い分けることが推奨されます。システムエンジニアを目指す上で、非同期処理やデータ操作で頻繁に利用されるアロー関数の理解は非常に重要です。

公式リファレンス: Arrow function expressions

構文(syntax)

1const functionName = (parameter1, parameter2) => {
2  // 関数本体
3  return parameter1 + parameter2;
4};

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ