Skip to main content

無名関数

無名関数

イベントの節で、関数もオブジェクトの一種であることを説明しました。このため、関数は通常の値と同じように変数やプロパティに代入したり、関数の引数や戻り値になったりできます。

しかしながら、通常の記法で関数を記述することが煩わしい場合があります。イベントハンドラを登録する場合を考えてみましょう。

index.html
<button id="strange-button">Click me</button>
script.js
function onStrangeButtonClick() {
alert("こんにちは!"); // ダイアログボックスを表示
}

document.getElementById("strange-button").onclick = onStrangeButtonClick;

この場合、関数 onStrangeButtonClick は、イベントハンドラとして登録されるためだけに利用されており、onStrangeButtonClick という名前自体はあまり重要ではありません。こういった場合、関数オブジェクトの生成をするための式(関数式)を用いることができます。このようにして生成された関数は、名前を持たないため、無名関数と呼ばれます。

先ほどのプログラムを関数式を用いて書き換えると、次のようになります。

script.js
document.getElementById("strange-button").onclick = () => {
alert("こんにちは!");
};

JavaScript における関数式の構文は、次のとおりです。=> の記号が特徴的な構文となっています。

(引数1, 引数2) => {
処理;
};
無名関数を用いて関数定義を書き換える

通常の関数定義の構文は、ほとんど関数式を使用して書き換えることができます。次のプログラムにおいて、add1add2 はほとんど等価なものとみなすことができます。

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 rates = [3, 5, 1];
const stars = rates.map((rate) => {
return "★".repeat(rate);
});
document.write(stars); // ★★★,★★★★★,★
プリミティブ値のラッパーオブジェクト

数値や文字列、論理値には、それぞれ対応するクラスが存在し、そのクラスのメソッドが使用できます。クラスとインスタンスの節でこうしたプリミティブ値に対して toString メソッドが使用できたのは、これらのクラスが Object クラスを継承しているからです。

プリミティブ値対応するクラス
数値Number
文字列String
論理値Boolean

上のプログラムで使用されているのはString#repeat メソッドで、文字列を指定された回数繰り返した文字列を返すメソッドです。

アロー関数の省略形

アロー関数は、内部の処理が return 文のみの場合、波括弧を省略して式のみを記述できます。また、引数がひとつだけの場合、引数を囲む括弧を省略できます。前項のサンプルプログラムは、次のように省略可能です。本資料では、前者の省略記法のみを用いることにします。

const stars = rates.map((rate) => "★".repeat(rate));

アロー関数の省略形

課題

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
解答
const scores = [90, 65, 70, 55, 80]
const minScore = scores.reduce((previousValue, currentValue) => {
if (previousValue > currentValue) {
return currentValue;
};
return previousValue;
}
);
document.write(minScore); // 55