アロー関数の構文 | アロー関数 | JavaScript 超完全入門 基本から発展までのすべて

現在作成中です。今後加筆修正してまいります。
スポンサーリンク
スポンサーリンク

アロー関数とは?

アロー関数(Arrow Function)は、ES6(ECMAScript 2015)で導入された新しい関数定義の構文です。従来の関数に比べて簡潔に書けるだけでなく、thisの挙動が異なるため、特定の状況で便利に使える特徴があります。

アロー関数の基本構文

アロー関数は、通常の関数に比べてシンプルに記述できます。基本的な構文は次の通りです。

アロー関数の基本構造

const 関数名 = (引数) => {
    // 関数の処理
};

アロー関数は、関数名の代わりに変数に代入され、引数リストと関数の処理を=>記号でつなぎます。

引数が1つのアロー関数

const greet = name => {
    console.log("Hello, " + name + "!");
};

greet("Taro");  // "Hello, Taro!" を出力

引数が1つの場合、丸括弧()を省略することができます。この例では、greetというアロー関数が定義されており、引数として名前を受け取って挨拶を出力します。

引数が複数のアロー関数

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

console.log(add(3, 5));  // 8 を出力

引数が複数ある場合は、通常の関数と同じように、丸括弧で引数を囲みます。この例では、2つの引数abを受け取り、その合計を返すアロー関数が定義されています。

短縮形アロー関数

アロー関数では、1行で処理を記述する場合に{}returnを省略できます。戻り値が自動的に返されるため、短く書けます。

短縮形の例

const multiply = (a, b) => a * b;

console.log(multiply(4, 5));  // 20 を出力

この例では、multiply関数が1行で記述されており、{}returnを使わずに戻り値を返しています。

アロー関数とthisの違い

アロー関数は、通常の関数とは異なり、thisの参照が関数のスコープに束縛されず、外側のスコープのthisをそのまま保持します。これは、コールバック関数やイベント処理の際に便利です。

thisの違いを示す例

const person = {
    name: "Taro",
    greet: function() {
        setTimeout(() => {
            console.log("Hello, " + this.name);
        }, 1000);
    }
};

person.greet();  // "Hello, Taro" を1秒後に出力

この例では、setTimeout内でアロー関数を使うことで、外側のスコープのthisを保持し、正しくpersonオブジェクトのnameプロパティにアクセスできます。従来の関数では、thisが異なるスコープを指してしまうため、このような場合にはアロー関数が便利です。

まとめ

アロー関数は、通常の関数に比べてシンプルで読みやすい構文を提供し、thisの扱いも異なるため、特定の状況で有効に使えます。引数の数や処理内容に応じて柔軟に使い分けることができ、短縮形やthisの挙動がポイントです。特にコールバック関数やイベント処理で、その利便性を発揮します。

Amazonロゴ
   
ad.価格範囲を指定して商品を探せます。セールで助かる便利ツール
超完全入門
スポンサーリンク
このページをメモ、または、シェア