HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
View in English Always switch to English
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
function 宣言は、新しい関数と指定された名前のバインドを作成します。
function
関数は function 式を使用して定義することもできます。
function calcRectArea(width, height) { return width * height; } console.log(calcRectArea(5, 6)); // 予想される結果: 30
function name(param0) { statements } function name(param0, param1) { statements } function name(param0, param1, /* …, */ paramN) { statements }
name
関数の名前です。
param
この関数の公式な引数の名前です。引数の最大数はエンジンによって異なります。引数の構文については、関数リファレンスを参照してください。
statements
関数の本体を構成する文です。
関数宣言は Function オブジェクトを生成します。関数が呼び出されるたびに、最後に実行された return 文で指定された値を返します。関数本体の末尾に到達した場合はundefinedを返します。関数の詳細については、関数を参照してください。
Function
return
undefined
function 宣言は、var と let を併せたような動作をします。
var
let
globalThis
警告: 厳格モードではない場合、ブロック内での関数宣言は奇妙な動きをします。ブロック内での関数宣言は、厳格モード時のみ行ってください。
関数は条件付きで宣言できます。つまり、関数文を if 文の中に入れ子にすることができます。ただし、厳格モードでない場合、実装によって結果に一貫性がありません。
if
console.log( `'foo' の名前はグローバル${ "foo" in globalThis ? "です" : "ではありません" }。 typeof foo は ${typeof foo} です。`, ); if (false) { function foo() { return 1; } } // Chrome では: // 'foo' の名前はグローバルです。 typeof foo は undefined です。 // // Firefox では: // 'foo' の名前はグローバルです。 typeof foo は undefined です。 // // Safari では: // 'foo' の名前はグローバルです。 typeof foo は function です。
if 本体が実際に実行されるかどうかにかかわらず、スコープと巻き上げの効果は変わりません。
console.log( `'foo' の名前はグローバル${ "foo" in globalThis ? "です" : "ではありません" }。 typeof foo は ${typeof foo} です。`, ); if (true) { function foo() { return 1; } } // In Chrome: // 'foo' の名前はグローバルです。 typeof foo は undefined です。 // // In Firefox: // 'foo' の名前はグローバルです。 typeof foo は undefined です。 // // In Safari: // 'foo' の名前はグローバルです。 typeof foo は function です。
厳格モードでは、ブロックレベルの関数宣言はそのブロックのスコープとなり、そのブロックの先頭に巻き上げられます。
"use strict"; { foo(); // "foo" をログ出力 function foo() { console.log("foo"); } } console.log( `'foo' の名前はグローバル${ "foo" in globalThis ? "です" : "ではありません" }。 typeof foo は ${typeof foo} です。`, ); // 'foo' の名前はグローバルではありません。 typeof foo は undefined です。
JavaScript の関数宣言は、それを囲む関数やグローバルスコープの先頭に巻き上げられます。関数を宣言する前に使うことができます。
hoisted(); // "foo" とログ出力 function hoisted() { console.log("foo"); }
関数式は巻き上げられないことに注意してください。
notHoisted(); // TypeError: notHoisted is not a function var notHoisted = function () { console.log("bar"); };
function 宣言が同じスコープ内で再宣言できるかどうかは、それが含まれているスコープによって決まります。
スクリプトの最上位レベルでは、function 宣言は var と同様に振る舞い、別の function または var によって再宣言可能ですが、let、const、class によって再宣言することはできません。
const
class
function a(b) {} function a(b, c) {} console.log(a.length); // 2 let a = 2; // SyntaxError: Identifier 'a' has already been declared
function 宣言が var によって再宣言される場合、var 宣言の初期化子は、両者の相対的な位置に関係なく、常にその関数の値を上書きします。これは、関数宣言が初期化子の評価より前に巻き上げられるためであり、初期化子は後から実行され、値を上書きするからです。
var a = 1; function a() {} console.log(a); // 1
関数本体の最上位レベルでは、function も var と同様に振る舞い、再宣言したり引数と同じ名前を持ったりすることが可能です。
function foo(a) { function a() {} console.log(typeof a); } foo(2); // ログ出力: "function"
厳格モードでは、モジュールまたはブロックの最上位レベルにおける function 宣言は let と同様に動作し、それ以外のいかなる宣言によっても再宣言することはできません。
// 現在のソースがモジュールである場合 function foo() {} function foo() {} // SyntaxError: Identifier 'foo' has already been declared
"use strict"; { function foo() {} function foo() {} // SyntaxError: Identifier 'foo' has already been declared }
catch ブロック内の function 宣言は、厳格モードでなくても、catch にバインドされた識別子と同じ名前を持つことはできません。
catch
try { } catch (e) { function e() {} // SyntaxError: Identifier 'e' has already been declared }
以下のコードは、3 つの商品の販売個数が指定されたときに、売上の合計額を返す関数を宣言しています。
function calcSales(unitsA, unitsB, unitsC) { return unitsA * 79 + unitsB * 129 + unitsC * 699; }
Enable JavaScript to view this browser compatibility table.
function*
async function
async function*