Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

関数式

BaselineWidely available

function キーワードは、式の中で関数を定義するために使用されます。

function 関数宣言アロー構文を用いて関数を定義することもできます。

試してみましょう

const getRectArea = function (width, height) {  return width * height;};console.log(getRectArea(3, 4));// Expected output: 12

構文

js
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 の関数式は、関数宣言と違って巻き上げられません。定義前に関数式を使用することはできません。

js
console.log(notHoisted); // undefined// 変数名は巻き上げが行われますが、定義は行われません。// そのため undefined になります。notHoisted(); // TypeError: notHoisted is not a functionvar notHoisted = function () {  console.log("bar");};

名前付き関数式

関数内でその関数自身を参照する必要がある場合は、名前付き関数式を作成する必要があります。この名前は関数本体(スコープ)に対してローカルです。これにより、再帰呼び出しを行う場合に非推奨のarguments.callee プロパティを使用せずに済みます。

js
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 プロパティには、構文から推測される暗黙の名前 (関数が割り当てられている変数など) ではなく、その名前が設定されます。

宣言とは異なり、関数式の名前は読み取り専用です。

js
function foo() {  foo = 1;}foo();console.log(foo); // 1(function foo() {  foo = 1; // TypeError: Assignment to constant variable.})();

無名関数の作成

次の例では、無名関数を定義してそれをx に割り当てます。 関数は引数の 2 乗を返します。

js
const 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® 2026 Language Specification
# sec-function-definitions

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp