無名関数
無名関数
イベントの節で、関数も オブジェクトの一種であることを説明しました。このため、関数は通常の値と同じように変数やプロパティに代入したり、関数の引数や戻り値になったりできます。
しかしながら、通常の記法で関数を記述することが煩わしい場合があります。イベントハンドラを登録する場合を考えてみましょう。
<button id="greet-button">Click me</button>
function onGreetButtonClick() {
alert("こんにちは！"); // ダイアログボックスを表示
}
document.getElementById("greet-button").onclick = onGreetButtonClick;
この場合、関数 onGreetButtonClick は、イベントハンドラとして登録されるためだけに利用されており、onGreetButtonClick という名前自体はあまり重要ではありません。こういった場合、関数オブジェクトの生成をするための式（関数式）を用いることができます。このようにして生成された関数は、名前を持たないため、無名関数と呼ばれます。
先ほどのプログラムを関数式を用いて書き換えると、次のようになります。
document.getElementById("greet-button").onclick = () => {
alert("こんにちは！");
};
JavaScript における関数式の構文は、次のとおりです。=> の記号が特徴的な構文となっています。
(引数1, 引数2) => {
処理;
}
通常の関数定義の構文は、ほとんど関数式を使用して書き換えることができます。次のプログラムにおいて、add1 と add2 はほとんど等価なものとみなすことができます。
function add1(a, b) {
return a + b;
}
const add2 = (a, b) => {
return a + b;
};
この項で扱った無名関数式を、=> 記号が矢のように見えることから、アロー関数と呼ぶことがあります。JavaScript には、アロー関数の他にもう一つ、無名関数を記述する方法があります。
const add3 = function (a, b) {
return a + b;
};
古い文献ではこちらの記法が採用されている場合がありますが、現代ではほとんど用いられません。
無名関数を用いると便利な関数
Array#map メソッドは、関数オブジェクトの引数をひとつとり、配列の各要素に適用した上で、その戻り値からなる新しい配列を返します。
このように、他の関数の引数として呼び出される関数のことをコールバック関数と呼びます。
const pricesWithoutTax = [100, 200, 300, 400, 500];
const taxRate = 0.2;
const pricesWithTax = pricesWithoutTax.map((price) => {
return price * (1 + taxRate);
});
document.write(pricesWithTax); // 120,240,360,480,600
数値や文字列、論理値には、それぞれ対応するクラスが存在し、そのクラスのメソッドが使用できます。クラスとインスタンスの節でこうしたプリミティブ値に対して toString メソッドが使用できたのは、これらのクラスが Object クラスを継承しているからです。
| プリミティブ値 | 対応するクラス |
|---|---|
| 数値 | Number |
| 文字列 | String |
| 論理値 | Boolean |
上のプログラムで使用されているのはString#repeat メソッドで、文字列を指定された回数繰り返した文字列を返すメソッドです。
アロー関数の省略形
アロー関数は、内部の処理が return 文のみの場合、波括弧と return キーワードを省略して式のみを記述することもできます。前項のサンプルプログラムは、次のように省略可能です。
const pricesWithTax = pricesWithoutTax.map((price) => price * (1 + taxRate));
課題
先ほどのArray#map メソッドを用いてみましょう。students 変数に格納されている名前を箇条書きにしてください。
const students = ["Hazel", "Dorian", "Scarlett", "Daisy"];
// ここで HTML 要素を取得し、学生の名前を箇条書きとして表示
innerHTMLプロパティにより、HTML要素を取得・変更できます。- 箇条書きには
ulタグやliタグを使用します。 joinメソッドを配列要素を指定された文字列で連結するのに使います。
解答例: 箇条書き
const students = ["Hazel", "Dorian", "Scarlett", "Daisy"];
const studentList = document.getElementById("student-list");
studentList.innerHTML = students
.map((student) => `<li>${student}</li>`)
.join("");
scores 変数には、各必修科目の点数が格納されているとします。全ての要素が 50 点以上であることを確認するには、何というメソッドを使うのが適切か調べてみてください。また、実際にそのメソッドを用いて点数を確認してみてください。
const scores = [90, 65, 70, 55, 80];
if (/* すべての点数が 50 点以上なら */) {
document.write("進級できます");
}
「全ての要素が特定の条件を満たすかどうか」を調べるメソッドがあります。
解答例: 進級可能？
Array#every メソッドを使うと、配列の全要素が指定された関数でテストできます
const scores = [90, 65, 70, 55, 80];
if (scores.every((score) => score >= 50)) {
document.write("進級できます");
}
(発展) Array#reduce メソッドは、Array クラスのメソッドの中でも特に使い方の難しいメソッドです。ドキュメントをよく読み、このメソッドを用いて配列の最小値を求めてみましょう。
const scores = [90, 65, 70, 55, 80];
const minScore = scores.reduce(/* コールバック関数 */);
document.write(minScore); // 55
解答例: Array#reduce メソッドの使い方
const scores = [90, 65, 70, 55, 80];
const minScore = scores.reduce((previousValue, currentValue) => {
if (previousValue > currentValue) {
return currentValue;
}
return previousValue;
});
document.write(minScore); // 55