Funktionen

Beschreibung

Funktionswerte sind typischerweise Instanzen von Function. Informationen zu Eigenschaften und Methoden von Function-Objekten finden Sie unter Function. Aufrufbare Werte fhren dazu, dass typeof statt "object" den Wert "function" zurckgibt.

Rckgabewert

Wenn die Ausfhrung einer Funktion nicht bei einer return-Anweisung endet oder wenn auf das Schlsselwort return kein Ausdruck folgt, ist der Rckgabewert standardmig undefined. Die return-Anweisung ermglicht es Ihnen, einen beliebigen Wert aus der Funktion zurckzugeben. Ein Funktionsaufruf kann nur einen Wert zurckgeben, aber Sie knnen den Effekt der Rckgabe mehrerer Werte simulieren, indem Sie ein Objekt oder Array zurckgeben und das Ergebnis destrukturieren.

bergabe von Argumenten

Parameter und Argumente haben leicht unterschiedliche Bedeutungen, aber in der MDN-Webdokumentation verwenden wir sie hufig austauschbar. Als Kurzreferenz:

function formatNumber(num) {
  return num.toFixed(2);
}

formatNumber(2);

In diesem Beispiel wird die Variable num als Parameter der Funktion bezeichnet: Sie wird in der von Klammern eingeschlossenen Liste der Funktionsdefinition deklariert. Die Funktion erwartet, dass der Parameter num eine Zahl ist obwohl dies in JavaScript ohne das Schreiben von Laufzeitvalidierungscode nicht durchsetzbar ist. Im Aufruf formatNumber(2) ist die Zahl 2 das Argument der Funktion: Sie ist der Wert, der beim Funktionsaufruf tatschlich an die Funktion bergeben wird. Auf den Argumentwert kann innerhalb des Funktionsrumpfs ber den entsprechenden Parameternamen oder das Objekt arguments zugegriffen werden.

Argumente werden immer per Wert bergeben und niemals per Referenz bergeben. Das bedeutet, dass sich der Wert auerhalb der Funktion nicht ndert, wenn eine Funktion einen Parameter neu zuweist. Genauer gesagt werden Objektargumente per Sharing bergeben, was bedeutet, dass sich nderungen an den Eigenschaften des Objekts auf den Bereich auerhalb der Funktion auswirken. Zum Beispiel:

function updateBrand(obj) {
  // Mutating the object is visible outside the function
  obj.brand = "Toyota";
  // Try to reassign the parameter, but this won't affect
  // the variable's value outside the function
  obj = null;
}

const car = {
  brand: "Honda",
  model: "Accord",
  year: 1998,
};

console.log(car.brand); // Honda

// Pass object reference to the function
updateBrand(car);

// updateBrand mutates car
console.log(car.brand); // Toyota

Das Schlsselwort this verweist auf das Objekt, ber das auf die Funktion zugegriffen wird es verweist nicht auf die aktuell ausgefhrte Funktion. Daher mssen Sie selbst innerhalb des Funktionsrumpfs ber den Namen auf den Funktionswert verweisen.

Definieren von Funktionen

Allgemein gesprochen gibt es in JavaScript vier Arten von Funktionen:

• Regulre Funktion: kann beliebige Werte zurckgeben; wird nach dem Aufruf immer vollstndig ausgefhrt.
• Generatorfunktion: gibt ein Generator-Objekt zurck; kann mit dem Operator yield angehalten und fortgesetzt werden.
• Asynchrone Funktion: gibt ein Promise zurck; kann mit dem Operator await angehalten und fortgesetzt werden.
• Asynchrone Generatorfunktion: gibt ein AsyncGenerator-Objekt zurck; sowohl die Operatoren await als auch yield knnen verwendet werden.

Fr jede Art von Funktion gibt es mehrere Mglichkeiten, sie zu definieren:

Deklaration

function, function*, async function, async function*

Ausdruck

function, function*, async function, async function*

Konstruktor

Function(), GeneratorFunction(), AsyncFunction(), AsyncGeneratorFunction()

Zustzlich gibt es spezielle Syntaxen zum Definieren von Arrow Functions und Methoden, die przisere Semantik fr ihre Verwendung bereitstellen. Klassen sind konzeptionell keine Funktionen (weil sie einen Fehler auslsen, wenn sie ohne new aufgerufen werden), aber sie erben ebenfalls von Function.prototype und haben typeof MyClass === "function".

// Constructor
const multiply = new Function("x", "y", "return x * y");

// Declaration
function multiply(x, y) {
  return x * y;
} // No need for semicolon here

// Expression; the function is anonymous but assigned to a variable
const multiply = function (x, y) {
  return x * y;
};
// Expression; the function has its own name
const multiply = function funcName(x, y) {
  return x * y;
};

// Arrow function
const multiply = (x, y) => x * y;

// Method
const obj = {
  multiply(x, y) {
    return x * y;
  },
};

Alle Syntaxen bewirken ungefhr dasselbe, es gibt jedoch einige feine Unterschiede im Verhalten.

• Die Syntaxen fr den Function()-Konstruktor, den function-Ausdruck und die function-Deklaration erzeugen vollwertige Funktionsobjekte, die mit new konstruiert werden knnen. Arrow Functions und Methoden knnen jedoch nicht konstruiert werden. Asynchrone Funktionen, Generatorfunktionen und asynchrone Generatorfunktionen sind unabhngig von der Syntax nicht konstruierbar.
• Die function-Deklaration erzeugt Funktionen, die gehoistet werden. Andere Syntaxen hoisten die Funktion nicht, und der Funktionswert ist erst nach der Definition sichtbar.
• Die Arrow-Function-Syntax und der Function()-Konstruktor erzeugen immer anonyme Funktionen, was bedeutet, dass sie sich nicht einfach selbst rekursiv aufrufen knnen. Eine Mglichkeit, eine Arrow Function rekursiv aufzurufen, besteht darin, sie einer Variablen zuzuweisen.
• Die Arrow-Function-Syntax hat keinen Zugriff auf arguments oder this.
• Der Function()-Konstruktor kann auf keine lokalen Variablen zugreifen er hat nur Zugriff auf den globalen Gltigkeitsbereich.
• Der Function()-Konstruktor verursacht eine Kompilierung zur Laufzeit und ist hufig langsamer als andere Syntaxen.

Bei function-Ausdrcken wird zwischen dem Funktionsnamen und der Variablen unterschieden, der die Funktion zugewiesen ist. Der Funktionsname kann nicht gendert werden, whrend die Variable, der die Funktion zugewiesen ist, neu zugewiesen werden kann. Der Funktionsname kann sich von der Variablen unterscheiden, der die Funktion zugewiesen ist sie stehen in keiner Beziehung zueinander. Der Funktionsname kann nur innerhalb des Funktionsrumpfs verwendet werden. Der Versuch, ihn auerhalb des Funktionsrumpfs zu verwenden, fhrt zu einem Fehler (oder ergibt einen anderen Wert, wenn derselbe Name an anderer Stelle deklariert ist). Zum Beispiel:

const y = function x() {};
console.log(x); // ReferenceError: x is not defined

Andererseits ist die Variable, der die Funktion zugewiesen ist, nur durch ihren Gltigkeitsbereich eingeschrnkt, der garantiert den Bereich einschliet, in dem die Funktion deklariert wird.

Eine Funktionsdeklaration erstellt auch eine Variable mit demselben Namen wie der Funktionsname. Daher kann auf Funktionen, die durch Funktionsdeklarationen definiert werden, im Gegensatz zu solchen, die durch Funktionsausdrcke definiert werden, ber ihren Namen sowohl im Gltigkeitsbereich, in dem sie definiert wurden, als auch in ihrem eigenen Rumpf zugegriffen werden.

Bei einer durch new Function definierten Funktion wird ihr Quelltext dynamisch zusammengesetzt, was beim Serialisieren beobachtbar ist. Beispielsweise ergibt console.log(new Function().toString()):

function anonymous(
) {

}

Dies ist der tatschliche Quelltext, der zum Kompilieren der Funktion verwendet wird. Obwohl der Function()-Konstruktor die Funktion mit dem Namen anonymous erstellt, wird dieser Name jedoch nicht zum Gltigkeitsbereich des Rumpfs hinzugefgt. Der Rumpf hat ausschlielich Zugriff auf globale Variablen. Das Folgende wrde beispielsweise zu einem Fehler fhren:

new Function("alert(anonymous);")();

Eine durch einen Funktionsausdruck oder eine Funktionsdeklaration definierte Funktion erbt den aktuellen Gltigkeitsbereich. Das heit, die Funktion bildet einen Closure. Andererseits erbt eine durch einen Function-Konstruktor definierte Funktion keinen anderen Gltigkeitsbereich als den globalen Gltigkeitsbereich, den alle Funktionen erben.

// p is a global variable
globalThis.p = 5;
function myFunc() {
  // p is a local variable
  const p = 9;

  function decl() {
    console.log(p);
  }
  const expr = function () {
    console.log(p);
  };
  const cons = new Function("\tconsole.log(p);");

  decl();
  expr();
  cons();
}
myFunc();

// Logs:
// 9 (for 'decl' by function declaration (current scope))
// 9 (for 'expr' by function expression (current scope))
// 5 (for 'cons' by Function constructor (global scope))

Durch Funktionsausdrcke und Funktionsdeklarationen definierte Funktionen werden nur einmal geparst, whrend eine durch den Function-Konstruktor definierte Funktion den ihr bergebenen String bei jedem Aufruf des Konstruktors erneut parst. Obwohl ein Funktionsausdruck jedes Mal einen Closure erstellt, wird der Funktionsrumpf nicht erneut geparst, sodass Funktionsausdrcke dennoch schneller sind als new Function(...). Daher sollte der Function-Konstruktor grundstzlich nach Mglichkeit vermieden werden.

Eine Funktionsdeklaration kann unbeabsichtigt in einen Funktionsausdruck umgewandelt werden, wenn sie in einem Ausdruckskontext erscheint.

// A function declaration
function foo() {
  console.log("FOO!");
}

doSomething(
  // A function expression passed as an argument
  function foo() {
    console.log("FOO!");
  },
);

Andererseits kann ein Funktionsausdruck auch in eine Funktionsdeklaration umgewandelt werden. Eine Ausdrucksanweisung kann nicht mit den Schlsselwrtern function oder async function beginnen, was ein hufiger Fehler bei der Implementierung von IIFEs (sofort aufgerufenen Funktionsausdrcken) ist.

function () { // SyntaxError: Function statements require a function name
  console.log("FOO!");
}();

function foo() {
  console.log("FOO!");
}(); // SyntaxError: Unexpected token ')'

Beginnen Sie die Ausdrucksanweisung stattdessen mit etwas anderem, sodass das Schlsselwort function eindeutig einen Funktionsausdruck einleitet. Hufige Optionen sind Gruppierung und die Verwendung von void.

(function () {
  console.log("FOO!");
})();

void function () {
  console.log("FOO!");
}();

Funktionsparameter

Jeder Funktionsparameter ist ein einfacher Bezeichner, auf den Sie im lokalen Gltigkeitsbereich zugreifen knnen.

function myFunc(a, b, c) {
  // You can access the values of a, b, and c here
}

Es gibt drei spezielle Parametersyntaxen:

• Standardparameter ermglichen die Initialisierung formaler Parameter mit Standardwerten, wenn kein Wert oder undefined bergeben wird.
• Der Rest-Parameter ermglicht es, eine unbestimmte Anzahl von Argumenten als Array darzustellen.
• Destrukturierung ermglicht das Entpacken von Elementen aus Arrays oder Eigenschaften aus Objekten in einzelne Variablen.

function myFunc({ a, b }, c = 1, ...rest) {
  // You can access the values of a, b, c, and rest here
}

Wenn eine der oben genannten nicht einfachen Parametersyntaxen verwendet wird, hat dies einige Folgen:

• Sie knnen "use strict" nicht auf den Funktionsrumpf anwenden dies verursacht einen Syntaxfehler.
• Selbst wenn die Funktion nicht im Strict Mode ausgefhrt wird, gelten bestimmte Funktionsmerkmale des Strict Mode, einschlielich der Tatsache, dass das Objekt arguments nicht mehr mit den benannten Parametern synchronisiert wird, arguments.callee beim Zugriff einen Fehler auslst und doppelte Parameternamen nicht zulssig sind.

Das arguments-Objekt

Sie knnen innerhalb einer Funktion mithilfe des Objekts arguments auf die Argumente der Funktion verweisen.

arguments

Ein Array-hnliches Objekt, das die an die aktuell ausgefhrte Funktion bergebenen Argumente enthlt.

arguments.callee

Die aktuell ausgefhrte Funktion.

arguments.length

Die Anzahl der an die Funktion bergebenen Argumente.

Getter- und Setter-Funktionen

Sie knnen Accessor-Eigenschaften auf jedem standardmigen eingebauten Objekt oder benutzerdefinierten Objekt definieren, das das Hinzufgen neuer Eigenschaften untersttzt. Innerhalb von Objektliteralen und Klassen knnen Sie spezielle Syntaxen verwenden, um den Getter und Setter einer Accessor-Eigenschaft zu definieren.

get

Bindet eine Objekteigenschaft an eine Funktion, die aufgerufen wird, wenn diese Eigenschaft abgefragt wird.

set

Bindet eine Objekteigenschaft an eine Funktion, die aufgerufen wird, wenn versucht wird, diese Eigenschaft festzulegen.

Beachten Sie, dass diese Syntaxen eine Objekteigenschaft und keine Methode erstellen. Auf die Getter- und Setter-Funktionen selbst kann nur ber reflektierende APIs wie Object.getOwnPropertyDescriptor() zugegriffen werden.

Funktionen auf Blockebene

Im Strict Mode sind Funktionen innerhalb von Blcken auf diesen Block beschrnkt. Vor ES2015 waren Funktionen auf Blockebene im Strict Mode verboten.

"use strict";

function f() {
  return 1;
}

{
  function f() {
    return 2;
  }
}

f() === 1; // true

// f() === 2 in non-strict mode

Funktionen auf Blockebene in nicht-striktem Code

Mit einem Wort: Nicht.

In nicht-striktem Code verhalten sich Funktionsdeklarationen innerhalb von Blcken seltsam. Zum Beispiel:

if (shouldDefineZero) {
  function zero() {
    // DANGER: compatibility risk
    console.log("This is zero.");
  }
}

Die Semantik hierfr ist im Strict Mode eindeutig spezifiziert zero existiert ausschlielich innerhalb dieses Gltigkeitsbereichs des if-Blocks. Wenn shouldDefineZero false ist, sollte zero niemals definiert werden, da der Block nie ausgefhrt wird. Historisch war dies jedoch nicht spezifiziert, sodass verschiedene Browser es im nicht-strikten Modus unterschiedlich implementierten. Weitere Informationen finden Sie in der Referenz zur function-Deklaration.

Eine sicherere Methode, Funktionen bedingt zu definieren, besteht darin, einen Funktionsausdruck einer Variablen zuzuweisen:

// Using a var makes it available as a global variable,
// with closer behavior to a top-level function declaration
var zero;
if (shouldDefineZero) {
  zero = function () {
    console.log("This is zero.");
  };
}

Beispiele

Eine formatierte Zahl zurckgeben

Die folgende Funktion gibt einen String zurck, der die formatierte Darstellung einer mit fhrenden Nullen aufgefllten Zahl enthlt.

// This function returns a string padded with leading zeros
function padZeros(num, totalLen) {
  let numStr = num.toString(); // Initialize return value as string
  const numZeros = totalLen - numStr.length; // Calculate no. of zeros
  for (let i = 1; i <= numZeros; i++) {
    numStr = `0${numStr}`;
  }
  return numStr;
}

Die folgenden Anweisungen rufen die Funktion padZeros auf.

let result;
result = padZeros(42, 4); // returns "0042"
result = padZeros(42, 2); // returns "42"
result = padZeros(5, 4); // returns "0005"

Bestimmen, ob eine Funktion existiert

Sie knnen mithilfe des Operators typeof bestimmen, ob eine Funktion existiert. Im folgenden Beispiel wird geprft, ob das Objekt window eine Eigenschaft namens noFunc besitzt, die eine Funktion ist. Falls ja, wird sie verwendet; andernfalls wird eine andere Aktion ausgefhrt.

if (typeof window.noFunc === "function") {
  // use noFunc()
} else {
  // do something else
}

Beachten Sie, dass im if-Test ein Verweis auf noFunc verwendet wird nach dem Funktionsnamen stehen keine Klammern (), sodass die eigentliche Funktion nicht aufgerufen wird.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Leitfaden zu Funktionen
• Klassen
• function
• function-Ausdruck
• Function