関数式
function
キーワードは、式の中で関数を定義するために使用されます。
function
関数宣言やアロー構文を用いて関数を定義することもできます。
試してみましょう
構文
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 の関数式は、関数宣言と違って巻き上げられません。定義前に関数式を使用することはできません。
console.log(notHoisted); // undefined
// 変数名は巻き上げが行われますが、定義は行われません。
// そのため undefined になります。
notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function () {
console.log("bar");
};
名前付き関数式
関数内でその関数自身を参照する必要がある場合は、名前付き関数式を作成する必要があります。この名前は関数本体(スコープ)に対してローカルです。これにより、再帰呼び出しを行う場合に非推奨の arguments.callee
プロパティを使用せずに済みます。
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
プロパティには、構文から推測される暗黙の名前 (関数が割り当てられている変数など) ではなく、その名前が設定されます。
宣言とは異なり、関数式の名前は読み取り専用です。
function foo() {
foo = 1;
}
foo();
console.log(foo); // 1
(function foo() {
foo = 1; // TypeError: Assignment to constant variable.
})();
例
無名関数の作成
次の例では、無名関数を定義してそれを x
に割り当てます。 関数は引数の 2 乗を返します。
const x = function (y) {
return y * y;
};
関数をコールバックとして使用
コールバックとしてより頻繁に使われます。
button.addEventListener("click", function (event) {
console.log("button is clicked!");
});
即時実行関数式 (IIFE) の使用
無名の関数が生成され、呼び出されます。
(function () {
console.log("Code runs!");
})();
// または
!function () {
console.log("Code runs!");
}();
仕様書
Specification |
---|
ECMAScript Language Specification # sec-function-definitions |
ブラウザーの互換性
BCD tables only load in the browser