関数式の使い方

関数を変数に代入して使うこともできます。

本ページでは、関数式の使い方を説明します。

関数式

関数式の利用例は、以下のとおりです。

【関数式の利用例】
let x = function func1() {
  処理を記述する
};

赤字のfunctionから右中括弧(})までは、関数宣言と同じです。ただし、関数式の場合、functionは演算子として使われています。また、変数宣言のため、最後にセミコロン(;)があります。

以下のように、引数や戻り値なども使えます。

【関数式で引数や戻り値などを使う例】
let z = function func1(x,y) {
  return x + y;
};

let a = z(1,2);

上記では、xに1、yに2が渡されます。また、戻り値は3(= 1 + 2)になるため、aは3になります。

関数宣言と同じように使えますが、関数宣言と違って変数宣言のため、使う前に宣言しておかないとエラーになります。

無名関数

関数式の場合、関数名を省略できます。これを、無名関数と言います。

先ほどのスクリプトを、無名関数で書き換えてみます。

【無名関数の例】
let z = function(x,y) {
  return x + y;
};

let a = z(1,2);

先ほどは、func1という関数名が付いていましたが、上記では関数名が省略されています。

この結果は、関数名がある時と同じです。

無名関数のメリット

無名関数は関数名が省略できるため、使う名前を少なくできるというメリットがあります。例えば、一切名前を使わずに関数を使うこともできます。

例を挙げます。先に、関数宣言を使った場合です。

【関数宣言を使ったイベントリスナーの例】
function func1() {
  let x = 1;
}
addEventListener("click", func1);

addEventListenerでclickを指定しているため、ページ上でマウスをクリックすると、func1が呼び出されます。結果として、xに1が代入されます。

これを、addEventListener("click", "let x =1;")などと記述すると、エラーになります。関数などで指定する必要があるためです。

このため、無名関数で書き換えてみます。

【無名関数を使ったイベントリスナーの例】
addEventListener("click", function(){let x = 1;});

function(){let x = 1;}部分は無名関数なので、エラーにはなりません。つまり、一切名前を使わずに関数を実行しています。