Funktionen

Eine Funktion ist ein wiederverwendbarer Codeblock, der eine bestimmte Aufgabe ausführt. Anstatt denselben Code mehrfach zu schreiben, kannst du ihn in einer Funktion speichern und beliebig oft aufrufen.

Allgemeiner Aufbau

Eine Funktion besteht aus dem Schlüsselwort function, einem Namen, runden Klammern () und einem Codeblock in geschweiften Klammern { }. Den Namen solltest du so wählen, dass er beschreibt, was die Funktion tut.

Syntax

1function funktionsName() {
2    // Code
3}

Beispiel

Wichtig: Eine Funktion führt ihren Code erst aus, wenn du sie aufrufst – also den Funktionsnamen mit Klammern schreibst.

1function begruessung() {
2    console.log("Hallo Welt!");
3}
4
5begruessung();

Zuerst wird die Funktion begruessung definiert. Erst durch den Aufruf begruessung(); wird console.log ausgeführt.

Funktionen mit Parametern

Parameter sind Platzhalter in den runden Klammern. Beim Aufruf übergibst du konkrete Werte (Argumente), mit denen die Funktion arbeitet. So wird eine Funktion flexibel und wiederverwendbar.

1function begruessung(name) {
2    console.log("Hallo " + name + "!");
3}
4
5begruessung("Anna");
6begruessung("Max");

Der Parameter name nimmt beim ersten Aufruf den Wert "Anna" und beim zweiten "Max" an – dieselbe Funktion, zwei verschiedene Ergebnisse.

Funktionen mit Rückgabewert (return)

Mit return gibst du ein Ergebnis aus der Funktion zurück. Der Aufrufer kann diesen Wert in einer Variable speichern oder direkt weiterverwenden. Ohne return liefert eine Funktion undefined zurück.

1function addiere(a, b) {
2    return a + b;
3}
4
5let ergebnis = addiere(3, 5);
6console.log(ergebnis);
7
8console.log(addiere(10, 20));

addiere(3, 5) berechnet 8 und gibt diesen Wert zurück. Du kannst das Ergebnis speichern (let ergebnis = ...) oder direkt in console.log() ausgeben.

Funktionen in Variablen speichern

Funktionen sind in JavaScript first-class citizens – du kannst sie wie jeden anderen Wert in einer Variable speichern. Dafür schreibst du nach dem Variablennamen das Schlüsselwort function und definierst die Funktion direkt bei der Zuweisung:

1const quadrat = function(zahl) {
2    return zahl * zahl;
3};
4
5console.log(quadrat(4));
6console.log(quadrat(7));

Du rufst die Funktion über den Variablennamen auf: quadrat(4) – genau wie bei einer normalen Funktionsdeklaration.

Arrow-Funktionen (Pfeilfunktionen)

Arrow-Funktionen sind eine kürzere, moderne Schreibweise für Funktionen. Statt function nutzt du einen Pfeil =>. Sie eignen sich besonders für kurze Funktionen und werden in modernem JavaScript sehr häufig verwendet.

1const sageHallo = () => {
2    console.log("Hallo!");
3};
4
5sageHallo();

Die Syntax lautet: const name = () => { ... }. Leere Klammern () bedeuten, dass die Funktion keine Parameter erwartet.

Arrow-Funktion mit Parametern

Parameter stehen in den runden Klammern vor dem Pfeil – genau wie bei einer normalen Funktion. Der Codeblock steht danach in geschweiften Klammern:

1const multipliziere = (a, b) => {
2    return a * b;
3};
4
5console.log(multipliziere(3, 4));
6console.log(multipliziere(5, 2));

Kurzschreibweise mit implizitem return

Besteht die Funktion nur aus einer einzigen Rückgabe, kannst du return und die geschweiften Klammern weglassen. JavaScript gibt den Ausdruck nach dem Pfeil automatisch zurück – der Fachbegriff dafür ist implizites return:

1const verdoppeln = (zahl) => zahl * 2;
2
3console.log(verdoppeln(5));
4console.log(verdoppeln(10));

zahl => zahl * 2 ist die Kurzform von zahl => { return zahl * 2; }. Bei nur einem Parameter kannst du die Klammern um den Parameter sogar weglassen: zahl => zahl * 2.