関数式

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

function キーワードは、式の中で関数を定義するために使用されます。

function 関数宣言やアロー構文を用いて関数を定義することもできます。

試してみましょう

構文

js
function (param0) {
  statements
}
function (param0, param1) {
  statements
}
function (param0, param1, /* …, */ paramN) {
  statements
}

function name(param0) {
  statements
}
function name(param0, param1) {
  statements
}
function name(param0, param1, /* …, */ paramN) {
  statements
}

メモ: 式文はキーワード function から始めることができません。 function 宣言との曖昧さをさけるためです。 function キーワードは文を受け入れることができない文脈で現れた時だけ式を開始します。

引数

name 省略可

関数名。省略可能で、その場合は関数は無名になります。 name は関数本体のみのローカルです。

paramN 省略可

関数の正式な引数の名前。引数の構文については、関数リファレンスを参照してください。

statements 省略可

関数の本体を構成する文です。

解説

function 式は function 宣言とよく似ており、ほとんど同じ書式ですあります。 function 式と function 宣言の主な相違点は、関数名です。 function 式では、無名関数を生成するために、関数名を省略できます。 function 式は、定義するとすぐに実行する IIFE （即時実行関数）として使用できます。詳細については、関数の章を参照してください。

関数式の巻き上げ

JavaScript の関数式は、関数宣言と違って巻き上げられません。定義前に関数式を使用することはできません。

js
console.log(notHoisted); // undefined
// 変数名は巻き上げが行われますが、定義は行われません。
// そのため undefined になります。
notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function () {
  console.log("bar");
};

名前付き関数式

関数内でその関数自身を参照する必要がある場合は、名前付き関数式を作成する必要があります。この名前は関数本体（スコープ）に対してローカルです。これにより、再帰呼び出しを行う場合に非推奨の arguments.callee プロパティを使用せずに済みます。

js
const math = {
  factit: function factorial(n) {
    console.log(n);
    if (n <= 1) {
      return 1;
    }
    return n * factorial(n - 1);
  },
};

math.factit(3); //3;2;1;

関数式に名前が付けられている場合、関数の name プロパティには、構文から推測される暗黙の名前 (関数が割り当てられている変数など) ではなく、その名前が設定されます。

宣言とは異なり、関数式の名前は読み取り専用です。

js
function foo() {
  foo = 1;
}
foo();
console.log(foo); // 1
(function foo() {
  foo = 1; // TypeError: Assignment to constant variable.
})();

例

無名関数の作成

次の例では、無名関数を定義してそれを x に割り当てます。 関数は引数の 2 乗を返します。

js
const x = function (y) {
  return y * y;
};

関数をコールバックとして使用

コールバックとしてより頻繁に使われます。

js
button.addEventListener("click", function (event) {
  console.log("button is clicked!");
});

即時実行関数式 (IIFE) の使用

無名の関数が生成され、呼び出されます。

js
(function () {
  console.log("Code runs!");
})();

// または

!function () {
  console.log("Code runs!");
}();

仕様書

Specification
ECMAScript Language Specification
# sec-function-definitions

ブラウザーの互換性

BCD tables only load in the browser

関連情報