Funktionen in

Über Funktionen

Eine Funktion ist ein Block aus organisiertem, wiederverwendbarem Code, mit dem eine bestimmte Aktion ausgeführt wird. Es gibt mehrere Möglichkeiten, Funktionen in JavaScript zu definieren. Hier schauen wir uns Funktionsdeklarationen und Funktionsausdrücke an. Andere Möglichkeiten wie Arrow Functions werden in anderen Konzepten behandelt.

Funktionsdeklaration

Die Standardmethode, eine Funktion in JavaScript zu definieren, ist eine Funktionsdeklaration, auch Funktionsdefinition oder Funktionsanweisung genannt.

Sie besteht aus dem Schlüsselwort function, dem Namen der Funktion und einer durch Kommas getrennten Liste von Parametern in runden Klammern. Darauf folgt der Funktionskörper (eine Sammlung von Anweisungen, die festlegt, was eine Funktion tut), eingeschlossen in geschweifte Klammern.

function someName(param1, param2, param3) {
  // ...
}

Eine Funktion aufrufen

In JavaScript wird eine Funktion aufgerufen, indem man den Funktionsnamen gefolgt von runden Klammern mit den Argumenten angibt.

someName(arg1, arg2, arg3);

Allein den Funktionsnamen anzugeben, ruft die Funktion in JavaScript nicht auf.

function sayHello() {
  console.log('Hello, World!');
}

sayHello;
// => [Function: sayHello]
// The text representations varies between environments.

sayHello();
// => 'Hello, World!'

Parameter

Wenn du im Funktionskörper mit Parametern arbeitest, achte auf mögliche Nebenwirkungen auf den ursprünglichen Wert, der an die Funktion übergeben wurde. In JavaScript ist ein Argument eine Kopie einer Referenz auf den ursprünglichen Wert. Was das in der Praxis bedeutet, hängt vom Datentyp des Arguments ab.

• Werte primitiver Datentypen sind unveränderlich. Alle „Modifikationen" erzeugen immer einen neuen primitiven Wert. Deshalb wird der ursprüngliche Wert nie davon beeinflusst, was im Funktionskörper mit dem Argument passiert.

  const num = 0;
  
  function increase(number) {
    number = number + 1;
  }
  
  increase(num);
  num;
  // => 0
  

• Anders ist es bei Werten wie Objekten, Arrays, Funktionen. Da die Referenz kopiert wird, wirkt sich eine Neuzuweisung nicht auf den ursprünglichen Wert aus. Da du es jedoch mit einer flachen Kopie zu tun hast, verändert das Verändern des Arguments im Funktionskörper auch den ursprünglichen Wert, der übergeben wurde.

  const nums = [0, 1, 2, 3, 4];
  
  function pushFive(arr) {
    arr.push(5);
  }
  
  pushFive(nums);
  nums;
  // => [0, 1, 2, 3, 4, 5]
  

Standardmäßig sind alle in der Funktionsdeklaration definierten Parameter in JavaScript optional. Wenn eine Funktion mit weniger Argumenten aufgerufen wird, als es Parameter gibt, sind die fehlenden Argumente im Funktionskörper undefined; siehe Null und Undefined. In vielen Fällen ist es sinnvoller, einen Parameter mit einem Standardwert zu initialisieren, wenn kein Wert oder undefined übergeben wird. Das kannst du tun, indem du Standardparameter direkt in der Funktionsdefinition angibst.

function someName(param1 = defaultValue1, param2 = defaultValue2) {
  // ...
}

Eine Funktion kann mit mehr Argumenten aufgerufen werden, als es Parameter in der Funktionsdefinition gab. Alle Argumente, einschließlich dieser überschüssigen Argumente, findest du im arguments „Array".

Es ist auch möglich, Funktionen zu definieren, die eine beliebige Anzahl von Argumenten akzeptieren (variadische Funktionen). Weitere Details findest du unter Rest-Parameter in Rest und Spread Operators.

return-Anweisung

Eine return-Anweisung beendet die Ausführung der Funktion und gibt einen Wert an, der an den Aufrufer der Funktion zurückgegeben wird. Eine Funktion kann mehrere return-Anweisungen haben.

function checkNumber(num) {
  if (num === 0) {
    return 'You passed 0, please provide another number.';
  }

  return 'Thanks for passing such a nice number.';
}

Das Ergebnis einer Funktion, die keinen Wert zurückgibt oder keine return-Anweisung hat, ist undefined. In JavaScript gibt es keine impliziten return-Anweisungen.

function nakedReturn(a) {
  a * 2;
  return;
}

nakedReturn(1);
// => undefined

function noReturn(a) {
  a * 2;
}

noReturn(1);
// => undefined

In JavaScript kannst du immer nur genau einen Wert zurückgeben. Wenn du mehr Informationen übergeben möchtest, musst du sie zuerst in einer Einheit zusammenfassen, meist in einem Objekt oder einem Array.

function divide(a, b) {
  return {
    quotient: Math.floor(a / b),
    remainder: a % b,
  };
}

Funktionsausdruck

Eine Funktionsdeklaration ist eine eigenständige Anweisung. Aber manchmal ist es hilfreich, eine Funktion als Teil eines anderen Ausdrucks zu definieren, z. B. in einer Zuweisung, als Funktionsparameter (Callback) oder als Wert in einem Objekt. Das kannst du mit einem Funktionsausdruck machen. Er hat dieselbe Syntax wie eine Funktionsdeklaration, nur dass der Funktionsname weggelassen werden kann, um eine anonyme Funktion zu erstellen.

const someFunction = function (param) {
  // ...
};

someOtherFunction(function (param) {
  // ...
});

const obj = {
  someFunction: function (param) {
    // ...
  },
};

Gültigkeitsbereich

Eine Funktion führt in JavaScript einen neuen Ausführungskontext ein. Innerhalb einer Funktion definierte Variablen sind außerhalb dieser Funktion nicht zugänglich. Aber Variablen, die im übergeordneten Gültigkeitsbereich definiert sind (dem Gültigkeitsbereich, in dem die Funktion selbst definiert wurde), sind innerhalb der Funktion zugänglich. Die MDN-Dokumentation zum Gültigkeitsbereich zeigt Beispiele für dieses Verhalten.

Schau dir Closures an, um mehr über den Gültigkeitsbereich von Variablen in JavaScript zu lernen.