職案人

無名関数

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

  return 戻り値;
};

関数の宣言では function のあとに関数名を記述しましたが、関数リテラルを使用する場合は通常関数名は付けません。そのため、無名関数とも呼ばれる

引数が無い場合には
let 変数名 = function(){
実行される処理1;
実行される処理2;
...
return 戻り値;
};

サンプル

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

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

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


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

サンプル

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

dispHello();実行結果
 Hello
 JavaScript引数がある場合

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

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

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

【関数リテラルはどんな時に使うか】
一度しか使わない場合が、多い--イベント処理や、コールバックなど

サンプル

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