function 宣言

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 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

関連情報