関数式 (function expression)

関数式はJavaScriptで関数を作る方法のひとつで、function式を用います。

関数式の構文

関数式の構文は、関数宣言と同じです。

js
function 関数名(引数) {
  // 処理内容
};

js
function 関数名(引数) {
  // 処理内容
};

関数宣言は文でしたが、関数式は式です。式とは、評価した結果が値になるものを言います。関数式は値になるので、変数に直接代入できます。

js
const 変数名 = function 関数名(引数) {
  // 処理内容
};

js
const 変数名 = function 関数名(引数) {
  // 処理内容
};

関数名の省略

関数式は、関数名を省略できます。名前がない関数なので、匿名関数や無名関数とも呼ばれます。

js
const 変数名 = function () {};
//                     ^関数名を省略

js
const 変数名 = function () {};
//                     ^関数名を省略

関数式を呼び出すには、変数名を使います。

js
変数名(); // 呼び出し

js
変数名(); // 呼び出し

たとえば、次の関数宣言で書かれたincrement関数を、

js
function increment(n) {
  return n + 1;
}

js
function increment(n) {
  return n + 1;
}

関数式に書き直すと次のようになります。

js
const increment = function (n) {
  return n + 1;
};

js
const increment = function (n) {
  return n + 1;
};

関数式は、オブジェクトのプロパティに直接代入することもできます。

ts
const オブジェクト = {
  メソッド名: function () {},
};

ts
const オブジェクト = {
  メソッド名: function () {},
};

関数式は、別の関数の引数に直接渡すこともできます。たとえば、ボタンがクリックされたときの処理を指定するときに関数式を用います。

js
button.addEventListener("click", function (event) {
  console.log("クリックされました");
});

js
button.addEventListener("click", function (event) {
  console.log("クリックされました");
});

関数式と型注釈

TypeScriptでは、関数宣言と同様に引数の型注釈が書けます。

ts
const increment = function (n: number) {
  //                         ^^^^^^^^引数の型注釈
  return n + 1;
};

ts
const increment = function (n: number) {
  //                         ^^^^^^^^引数の型注釈
  return n + 1;
};

引数の型注釈を省略した場合、その型はanyになります。

ts
const increment = function (n) {};
                           
(parameter) n: any

ts
const increment = function (n) {};
                           
(parameter) n: any

関数型の変数に関数式を代入する場合は、引数の型注釈を省略しても、型推論が効きます。変数の型情報から、引数の型がわかるからです。

ts
type UseString = (value: string) => void;
let useString: UseString; // 関数型の変数
useString = function (value) {}; // 関数型変数に関数式を代入
                       
(parameter) value: string

ts
type UseString = (value: string) => void;
let useString: UseString; // 関数型の変数
useString = function (value) {}; // 関数型変数に関数式を代入
                       
(parameter) value: string

TypeScriptの関数式では、戻り値の型注釈も書けます。

ts
const getZero = function (): number {
  //                         ^^^^^^戻り値の型注釈
  return 0;
};

ts
const getZero = function (): number {
  //                         ^^^^^^戻り値の型注釈
  return 0;
};

戻り値の型注釈を省略した場合、関数のロジックから型が推論されます。

ts
const getZero = function () {
  return 0;
};
const num = getZero();
      
const num: number

ts
const getZero = function () {
  return 0;
};
const num = getZero();
      
const num: number

関数式の関数名

JavaScriptでは、function式に関数名を書いた場合、その関数名は関数の処理内部からのみ参照できます。これは再帰関数を書くときに活用されます。次の例は、与えられた数値nの階乗を求める関数です。関数名のfactはその関数の中でのみ使えます。関数の外からはfactorialで呼び出す必要があります。

js
const factorial = function fact(n) {
  if (n <= 1) {
    return 1;
  }
  return n * fact(n - 1); // 関数名を使い再帰呼び出し
};

js
const factorial = function fact(n) {
  if (n <= 1) {
    return 1;
  }
  return n * fact(n - 1); // 関数名を使い再帰呼び出し
};

上の例は、次のように変数名を使った再帰呼び出しに書き換えることもできます。

js
//                        ↓関数名を省略
const factorial = function (n) {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1); // 変数名を使った再帰呼び出し
};

js
//                        ↓関数名を省略
const factorial = function (n) {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1); // 変数名を使った再帰呼び出し
};

学びをシェアする

・関数式はfunction式を使った関数
・関数式は関数名が省略可。匿名関数と呼ばれる。
・関数式は変数や引数などに直接代入できる
・型注釈の書き方は関数宣言と同じ
・関数式の関数名は、関数内部からのみ参照可

『サバイバルTypeScript』より

この内容をXにポストする

関連情報

📄️ 従来の関数とアロー関数の違い

JavaScriptの関数は、[関数宣言]、[関数式]、[アロー関数]の3通りの方法で作れます。

📄️ 関数宣言

関数宣言はJavaScriptで関数を定義する構文です。

📄️ アロー関数

アロー関数(arrow function)はJavaScriptの関数を作る方法のひとつです。