4.4 アロー関数

2015 年の ECMAScript 更新(ES6)で導入された「アロー関数」は、現在の開発において最も多用される書き方です。これまで学習してきた function キーワードさえ省略し、=> (矢印=アロー)を使うことで、関数をより短く記述できるようになりました。

特に前項では、function キーワードを用いた無名関数と関数式を学習しましたが、function キーワードを用いることなく、同じ動きを簡潔に実装することが可能になりました。

4.4.1 前項の無名関数をアロー関数で表現したプログラム

アロー関数の動作を実際に確認しましょう。

ソースフォルダ:public/ch04

ファイル名:arrow.js

➢ arrow.html

前項で作った ch04/anonymous.html をコピーし、ch04 にペーストしてください。
その際に、ファイル名を arrow.html に変更します。
ファイル内の anonymous.html や anonymous.js の記述も、arrow.html や arrow.js に修正します。

➢ arrow.js

// arrow.js

// アロー関数を変数 multiply に代入します
const multiply = (a, b) => a * b;

// 変数名を関数名のように使って呼び出します
let total = multiply(4, 6);

alert("4 * 6 の結果は: " + total);

実行結果

解説

4 行目以外は anonymous.js とまったく一緒です。アロー関数を使うことで、より簡潔な記述になっています。

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