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.

Die function-Deklaration erstellt eine Bindung einer neuen Funktion an einen gegebenen Namen.

Sie können Funktionen auch mit dem function Ausdruck definieren.

Probieren Sie es aus

function calcRectArea(width, height) {
  return width * height;
}

console.log(calcRectArea(5, 6));
// Expected output: 30

Syntax

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

Parameter

name

Der Name der Funktion.

param Optional

Der Name eines formalen Parameters für die Funktion. Die maximale Anzahl von Argumenten variiert in verschiedenen Engines. Für die Syntax der Parameter siehe die Funktionsreferenz.

statements Optional

Die Anweisungen, die den Funktionskörper bilden.

Beschreibung

Eine function-Deklaration erstellt ein Function-Objekt. Jedes Mal, wenn eine Funktion aufgerufen wird, gibt sie den Wert zurück, der durch die zuletzt ausgeführte return-Anweisung angegeben wird, oder undefined, wenn das Ende des Funktionskörpers erreicht wird. Detaillierte Informationen zu Funktionen finden Sie unter Funktionen.

function-Deklarationen verhalten sich wie eine Mischung aus var und let:

  • Ähnlich wie let sind Funktionserklärungen in strict mode auf den nächstgelegenen Block beschränkt.
  • Ähnlich wie let können Funktionsdeklarationen auf der obersten Ebene eines Moduls oder innerhalb von Blöcken im strict mode nicht durch eine andere Deklaration erneut deklariert werden.
  • Ähnlich wie var werden Funktionsdeklarationen auf der obersten Ebene eines Skripts (strict oder nicht-strict) zu Eigenschaften von globalThis. Funktionsdeklarationen auf der obersten Ebene eines Skripts oder Funktionskörpers (strict oder nicht-strict) können durch eine andere function oder var erneut deklariert werden.
  • Ähnlich wie bei beiden können Funktionsdeklarationen neu zugewiesen werden. Dies sollte jedoch vermieden werden.
  • Im Gegensatz zu beiden werden Funktionsdeklarationen zusammen mit ihrem Wert gehoben und können überall in ihrem Bereich aufgerufen werden.

Block-level Function Declaration

Warnung: Im nicht-strict mode verhalten sich Funktionsdeklarationen innerhalb von Blöcken merkwürdig. Deklarieren Sie Funktionen nur dann in Blöcken, wenn Sie sich im strict mode befinden.

Funktionen können bedingt deklariert werden – das heißt, eine Funktionsanweisung kann innerhalb einer if-Anweisung verschachtelt werden. Im nicht-strict mode sind die Ergebnisse jedoch zwischen Implementierungen inkonsistent.

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' name is global. typeof foo is undefined
//
// In Firefox:
// 'foo' name is global. typeof foo is undefined
//
// In Safari:
// 'foo' name is global. typeof foo is function

Die Auswirkungen auf den Scope und das Hoisting ändern sich nicht, unabhängig davon, ob der if-Block tatsächlich ausgeführt wird.

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' name is global. typeof foo is undefined
//
// In Firefox:
// 'foo' name is global. typeof foo is undefined
//
// In Safari:
// 'foo' name is global. typeof foo is function

Im strict mode werden block-level Funktionsdeklarationen auf diesen Block beschränkt und an die Spitze des Blocks gehoben.

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

Hoisting

Funktionsdeklarationen in JavaScript werden gehoben an die Spitze des umschließenden Funktions- oder globalen Scopes. Sie können die Funktion verwenden, bevor Sie sie deklarieren:

js
hoisted(); // Logs "foo"

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

Beachten Sie, dass Funktionsausdrücke nicht gehoben werden:

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

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

Redeclarations

Ob function-Deklarationen im gleichen Scope erneut deklariert werden können, hängt davon ab, in welchem Scope sie enthalten sind.

Auf der obersten Ebene eines Skripts verhalten sich function-Deklarationen wie var und können durch eine andere function oder var, jedoch nicht durch let, const oder class erneut deklariert werden.

js
function a(b) {}
function a(b, c) {}
console.log(a.length); // 2
let a = 2; // SyntaxError: Identifier 'a' has already been declared

Wenn function-Deklarationen durch var erneut deklariert werden, überschreibt der Initialisierer der var-Deklaration immer den Funktionswert, unabhängig von ihrer relativen Position. Dies liegt daran, dass Funktionsdeklarationen vor der Auswertung des Initialisierers gehoben werden. Der Initialisierer kommt später und überschreibt den Wert.

js
var a = 1;
function a() {}
console.log(a); // 1

Auf Ebene des Funktionskörpers verhalten sich function-Deklarationen ebenfalls wie var und können erneut deklariert oder denselben Namen wie ein Parameter haben.

js
function foo(a) {
  function a() {}
  console.log(typeof a);
}

foo(2); // Logs "function"

Auf der obersten Ebene eines Moduls oder Blocks im strict mode verhalten sich function-Deklarationen wie let und können von keiner anderen Deklaration erneut deklariert werden.

js
// Assuming current source is a module
function foo() {}
function foo() {} // SyntaxError: Identifier 'foo' has already been declared
js
"use strict";
{
  function foo() {}
  function foo() {} // SyntaxError: Identifier 'foo' has already been declared
}

Eine function-Deklaration innerhalb eines catch-Blocks darf nicht denselben Namen wie der im catch-Block gebundene Bezeichner haben, selbst im nicht-strict mode.

js
try {
} catch (e) {
  function e() {} // SyntaxError: Identifier 'e' has already been declared
}

Beispiele

Verwendung von function

Der folgende Code deklariert eine Funktion, die die Gesamtsumme der Verkäufe zurückgibt, wenn die Anzahl der verkauften Einheiten von drei Produkten angegeben wird.

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

Spezifikationen

Specification
ECMAScript® 2025 Language Specification
# sec-function-definitions

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch