function 宣言

function 宣言は、指定された引数を使用して関数を定義します。

また、 Function のコンストラクターと関数式を使用して関数を定義することもできます。

試してみましょう

構文

js

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

関数の名前です。

param 省略可

関数に渡す引数の名前です。引数の最大数はエンジンによって異なります。

statements 省略可

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

解説

関数宣言で作成された関数は Function オブジェクトであり、Function オブジェクトのすべてのプロパティ、メソッド、動作を備えています。関数の詳細については Function を参照してください。

関数は式を使用して作成することもできます (関数式を参照)。

既定では、関数は undefined を返します。他の値を返すには、関数に返す値を指定する return 文が必要です。

条件付きで作成される関数

警告: 厳格モードではない場合、ブロック内での関数宣言は奇妙な動きをします。ブロック内での関数宣言は、厳格モード時のみ行ってください。

関数は条件付きで宣言できます。つまり、関数文を if 文の中に入れ子にすることができますが、結果は実装によって一貫性がないので、このパターンを本番コードでは使用すべきではありません。条件付きの関数の作成には、代わりに関数式を使用してください。

js

console.log(
  `'foo' name ${
    "foo" in globalThis ? "is" : "is not"
  } global. typeof foo is ${typeof foo}`,
);
if (false) {
  function foo() {
    return 1;
  }
}

// In Chrome:
// 'foo' の名前はグローバル。typeof foo は undefined
//
// In Firefox:
// 'foo' の名前はグローバル。typeof foo は undefined
//
// In Safari:
// 'foo' の名前はグローバル。typeof foo は function

if 本体が実際に実行されるかどうかにかかわらず、スコープと巻き上げの効果は変わりません。

js

console.log(
  `'foo' name ${
    "foo" in globalThis ? "is" : "is not"
  } global. typeof foo is ${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

厳格モードでは、ブロックレベルの関数宣言はそのブロックのスコープとなり、そのブロックの先頭に巻き上げられます。

js

"use strict";

{
  foo(); // Logs "foo"
  function foo() {
    console.log("foo");
  }
}

console.log(
  `'foo' name ${
    "foo" in globalThis ? "is" : "is not"
  } global. typeof foo is ${typeof foo}`,
);
// 'foo' name is not global. typeof foo is undefined

関数宣言の巻き上げ

JavaScript の関数宣言は、それを囲む関数やグローバルスコープの先頭に巻き上げられ、関数を宣言する前に使うことができます。

js

hoisted(); // "foo" とログ出力

function hoisted() {
  console.log("foo");
}

関数式は巻き上げられないことに注意してください。

js

notHoisted(); // TypeError: notHoisted is not a function

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

例

function の使用

以下のコードは、3 つの商品の販売個数が指定されたときに、売上の合計額を返す関数を宣言しています。

js

function calcSales(unitsA, unitsB, unitsC) {
  return unitsA * 79 + unitsB * 129 + unitsC * 699;
}

仕様書

Specification
ECMAScript Language Specification
# sec-function-definitions

ブラウザーの互換性

BCD tables only load in the browser

関連情報