JavaScript アロー関数式の使い方のサンプル

2024年7月5日

環境
Google Chrome 126.0.6478.127（Official Build）（64 ビット）

概要
アロー関数自身には this、arguments、super へのバインドがないので、メソッドとして使用することはできません。
アロー関数はコンストラクターとして使用することはできません。 new をつけて呼び出すと TypeError が発生します。
new.target キーワードにアクセスすることもできません。

構文
() => 式
引数 => 式

(引数) => 式
(引数1, 引数N) => 式

() => {
処理コード
}

引数 => {
処理コード
}

(引数1, 引数N) => {
処理コード
}

使用例

const materials = ['Hydrogen', 'Helium', 'Lithium', 'Beryllium'];

console.log(materials.map((material) => material.length));

結果
Array [8, 6, 7, 9]

使用例2
// 従来の無名関数

(function (a) {
  return a + 123;
});

// 1. “function" という語を削除し、引数と本体の開始中括弧の間に矢印を配置する
(a) => {
return a + 123;
};

// 2. 本体の中括弧を削除と “return" という語を削除 — return は既に含まれています。
(a) => a + 123;

// 3. 引数の括弧を削除
a => a + 123;

中括弧を省略できるのは、関数が直接式を返す場合だけです。本体に追加の処理がある場合は中括弧が必要となり、
return キーワードも必要となります。アロー関数はいつ何を返すかを推測することはできません。

// 従来の関数
(function (a, b) {
    const chuck = 59;
    return a + b + chuck;
});

// アロー関数

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

アロー関数は常に無名です。アロー関数自身を呼び出す必要がある場合は、代わりに名前付き関数式を使用します。
// 従来の関数

function bob(a) {
　　return a + 234;
}

// アロー関数
const bob2 = (a) => a + 234;

Posted by arkgame