関数式
試してみましょう
構文
この式は文の先頭に置くことができません。
js
function [name]([param1[, param2[, ..., paramN]]]) {
statements
}
ES2015 からはアロー関数も使えます。
引数
name
省略可-
関数名。省略可能で、その場合は関数は無名になります。 name は関数本体のみのローカルです。
paramN
省略可-
関数に渡される引数の名前です。
statements
省略可-
関数の本体を構成する文です。
解説
関数式の巻き上げ
JavaScript の関数式は、関数宣言と違って巻き上げられません。定義前に関数式を使用することはできません。
js
console.log(notHoisted); // undefined
// 変数名は巻き上げが行われますが、定義は行われません。そのため undefined になります。
notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function () {
console.log("bar");
};
名前付き関数式
関数内でその関数自身を参照する必要がある場合は、名前付き関数式を作成する必要があります。この名前は関数本体 (スコープ) に対してローカルです。これにより標準外の arguments.callee
プロパティの使用も避けられます。
js
let 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
プロパティを持ちます。別の変数に代入しても name は変わりません。関数名が省略された場合、(暗黙的な名前が) 変数名になります。関数名が存在したら、それが関数名になります (明示的な名前)。これはアロー関数にもあてはまります (アロー関数は名前がないので変数名を暗黙的な名前として与えます)。
js
var foo = function () {};
foo.name; // "foo"
var foo2 = foo;
foo2.name; // "foo"
var bar = function baz() {};
bar.name; // "baz"
console.log(foo === foo2); // true
console.log(typeof baz); // undefined
console.log(bar === baz); // false (errors because baz == undefined)
例
無名関数の作成
次の例では、無名関数を定義してそれを x
に割り当てます。 関数は引数の 2 乗を返します。
js
var 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