関数リテラルを使って関数を定義する(無名関数)

JavaScript では関数を定義するための方法として関数リテラルを使って定義することができます。関数リテラルを使って定義した関数は、変数に代入したり関数を呼びだす時の引数として指定することができます。また関数リテラルを使う場合は、名前のない関数である無名関数(匿名関数)を作成することもできます。ここでは JavaScript にて関数リテラルを使った関数の定義を行う方法について解説します。

(Last modified: )

※ 関数リテラルを使って関数を定義する代わりにアロー関数式を使って同じように関数を定義することができます。詳しくは「アロー関数式を使って関数を定義する」を参照されてください。

関数リテラルを使って関数を定義する

関数を定義する方法のひとつである関数リテラルを使って関数を定義する方法について解説します。書式は次の通りです。 

let 変数名 = function(引数1, 引数2, ...){
  実行される処理1;
  実行される処理2;
  ...

  return 戻り値;
};

関数の宣言では function のあとに関数名を記述しましたが、関数リテラルを使用する場合は通常関数名は付けません(付けることもできますが、関数の外から関数名を使って関数を呼びだすことはできません)。名前のない関数は無名関数や匿名関数などと呼ばれます。

function のあとの ( から ) の中に引数を指定します。複数の引数がある場合にはカンマ(,)で区切って記述して下さい。この引数を仮引数とも呼びます。引数が無い場合には何も記述しなくてもいいのですがその場合でも ( と ) は記述する必要があります。 

let 変数名 = function(){
  実行される処理1;
  実行される処理2;
  ...

  return 戻り値;
};

関数が呼び出された時に実行される処理を { から } のブロック内に記述してください。処理は一つでも複数でも記述できますが、関数の場合は処理が一つであってもブロックを表す { と } を省略することはできません。

関数の呼び出し元に値を返す場合には return 文を使用します。 retrun 文のあとに記述した値が関数の呼び出し元に返されます。 return 文が実行されると、関数内での処理は終了となります。必要なければ return 文は省略可能です。

このように定義した関数リテラルは数値や文字列などと同じように変数に代入して利用します。

次のサンプルを見てください。 

let dispMessage = function(msg){
  console.log(msg);
};

関数リテラルを定義し、変数 dispMessage に代入しています。この関数リテラルでは引数を一つ受け取り、関数のブロックの中で引数に格納された値をコンソールに出力します。

関数リテラルを使って定義した関数を呼び出す

関数リテラルを使って定義した関数を呼び出すには次のように記述します。 

let 変数名 = function(引数, ...){
  実行される処理;
  ...
};


変数名(引数, ...);

関数を呼び出すには関数を代入した変数名を記述したあとで ( と ) の間に関数に渡す引数を記述します。複数の引数がある場合にはカンマ(,)で区切って記述して下さい。引数が無い場合には何も記述しなくてもいいのですがその場合でも ( と ) は記述する必要があります。 

変数名();

関数からの戻り値を変数に格納する場合には、次のように = 演算子の左側に変数、右側に関数の呼び出しを記述してください。関数を呼び出したあと、関数から戻された値が変数に格納されます。 

let 戻り値を格納する変数 = 変数名(引数, ...);

次のサンプルを見てください。 

let dispHello = function(){
  console.log('Hello');
  console.log('JavaScript');
};

dispHello();
>> Hello
>> JavaScript

関数を定義したあと変数 dispHello に代入しています。そのあとで関数を呼び出しています。関数は引数がなく、また戻り値もないので return 文も省略してあります。そして関数内ではコンソールに対して文字列を出力する処理が記述されています。

関数を定義したあとで関数を呼び出しています。呼び出された関数はブロック内の処理を順に実行するため、結果としてコンソールに対して Hello と JavaScript が出力されます。

今度は引数がある場合のサンプルを見てください。 

let dispTotal = function(x, y){
  let sum = x + y;
  return sum;
};

let result = dispTotal(3, 4);
console.log(result);
>> 7

今回のサンプルでは関数は 2 つの引数を受け取り、 2 つの引数を加算した結果を関数の呼び出し元に返しています。関数を呼び出す側は 2 つの値を指定して関数を呼び出し、その結果を受け取ります。

関数を呼び出すときに変数を使って呼び出す点を除けば関数を宣言して関数を定義した場合と基本的に使い方は同じです。

関数リテラルはどのような時に使用されるのか

関数リテラルでは関数名を付ける必要がありません。例えば一度しか使われないような関数を一つ一つ関数宣言をして定義していくと、関数名が他の関数や変数名とかぶっていないかどうかを気にしなくてはなりません。関数リテラルであれば関数名を使用しませんのでその心配が不要となります。

一度しか利用されない関数というのはイベント処理やコールバック関数などといった用途で使用されます。具体的な例は実際に使う時に記述したいと思います。

また関数リテラルは変数に代入することができるように、関数呼び出しの引数として関数リテラルを指定することもできます。次のサンプルをみてください。 

function dispNum(x, y, func){
  console.log(func(x, y));
}

let calcAverage = function(x, y){
  return (x + y) / 2;
};

dispNum(10, 8, calcAverage);
>> 9

このサンプルでは関数リテラルを使って定義した関数を別の関数を呼びだす時の引数として記述しています。呼び出された関数では、ブロック内で引数として渡されてきた関数を実行しています。

また先ほどのサンプルではいったん関数リテラルを変数に代入してから関数を呼び出す時の引数に記述していますが、関数リテラルを直接引数に記述することもできます。 

function dispNum(x, y, func){
  console.log(func(x, y));
}

dispNum(10, 8, function(x, y){
  return (x + y) / 2;
});
>> 9

引数に関数リテラル(無名関数)を直接記述する方法はよく使われるものなので、覚えておかれてください。

関数と関数の呼び出しを記述する位置について

関数リテラルを使って関数を定義する場合、関数が呼び出される前に定義されていなければなりません。次のサンプルをみてください。 

dispHello();

let dispHello = function(){
  console.log('Hello');
  console.log('JavaScript');
};

>> Uncaught ReferenceError: dispHello is not defined

今回のサンプルでは関数リテラルを使った関数の定義が行われる前に関数を呼びだしているためエラーとなります。

-- --

JavaScript にて関数リテラルを使った関数の定義を行う方法について解説します。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。