Funktionen

Schreib einmal function square(n) { return n * n; }, und square(4) ergibt 16, square(9) ergibt 81 und so weiter, für jede Zahl, die du übergibst.

Einer Arbeit einen Namen geben

Du hast schon Funktionen benutzt, die andere geschrieben haben: console.log, Math.round und toUpperCase sind alles Funktionen. Eine Funktion ist ein benannter Codeblock, der eine Aufgabe erledigt. Du definierst sie einmal und rufst sie dann mit ihrem Namen so oft auf, wie du willst. Mit Funktionen musst du nicht dieselben Zeilen herumkopieren, und du kannst in größeren Stücken über ein Programm nachdenken: „Trinkgeld berechnen, dann die Rechnung aufteilen“ statt einer langen Liste von Rechnungen.

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Ana"));   // Hello, Ana!
console.log(greet("Ji"));    // Hello, Ji!

Die Definition beginnt mit dem Schlüsselwort function, dann kommt der Name der Funktion, dann eine Liste von Parametern in runden Klammern. Ein Parameter ist eine Variable, die beim Aufruf der Funktion einen Wert bekommt, hier name. Der Rumpf in geschweiften Klammern erledigt die Arbeit. Rufst du greet("Ana") auf, wird der Wert "Ana", das sogenannte Argument, in den Parameter name gelegt, und der Rumpf läuft.

return gibt einen Wert zurück

Das Schlüsselwort return beendet die Funktion und schickt einen Wert dorthin zurück, wo die Funktion aufgerufen wurde. Der Aufruf greet("Ana") ist ein Ausdruck, und sein Wert ist das, was zurückgegeben wurde. Deshalb kann er in console.log stehen, in einer Rechnung oder in einer Variablen gespeichert werden: const msg = greet("Ana");.

Einen Wert zurückgeben und ihn ausgeben sind zwei verschiedene Dinge, und Anfänger verwechseln sie oft. Eine Funktion, die nur console.log aufruft, zeigt etwas auf dem Bildschirm, gibt aber nichts zurück. Ihr Aufruf ergibt undefined, also kannst du das Ergebnis nicht in einer Rechnung verwenden. Als Faustregel: Funktionen geben Ergebnisse zurück, und der Code, der sie aufruft, entscheidet, ob ausgegeben wird.

function addPrint(a, b) {
  console.log(a + b);
}
function add(a, b) {
  return a + b;
}

const x = add(2, 3) * 10;
console.log(x);      // 50
addPrint(2, 3);      // gibt 5 aus, liefert aber nichts Brauchbares zurück

return beendet die Funktion außerdem sofort. Zeilen danach im selben Weg laufen nicht mehr. So kannst du Sonderfälle früh behandeln: if (n < 0) return "negative"; am Anfang einer Funktion, mit dem Normalfall darunter.

Mehrere Parameter und Standardwerte

Eine Funktion kann mehrere Parameter nehmen, getrennt durch Kommas, und die Argumente werden der Reihe nach zugeordnet: In add(2, 3) ist a 2 und b 3. Lässt ein Aufruf ein Argument weg, ist dieser Parameter undefined. Du kannst einem Parameter einen Standardwert geben, der verwendet wird, wenn nichts übergeben wird: function tip(bill, rate = 0.15) nimmt 0.15, außer der Aufruf liefert einen anderen Satz.

Pfeilfunktionen

Modernes JavaScript hat auch eine kürzere Schreibweise für kleine Funktionen, die Pfeilfunktion. const square = (n) => n * n; bedeutet dasselbe wie die Funktion square vom Anfang. Besteht der Rumpf aus einem einzigen Ausdruck, wird sein Wert automatisch zurückgegeben, ohne geschweifte Klammern und ohne das Schlüsselwort return. Pfeilfunktionen siehst du in modernem Code überall.

Was drinnen ist, bleibt drinnen

Parameter und Variablen, die in einer Funktion deklariert werden, existieren nur in ihr. Das nennt man Gültigkeitsbereich (Scope). Zwei verschiedene Funktionen können jeweils eine Variable namens total haben, ohne sich zu stören, und Code außerhalb einer Funktion sieht ihre privaten Variablen nicht. Eine Funktion kann Variablen lesen, die außerhalb deklariert wurden, aber die saubersten Funktionen bekommen alles, was sie brauchen, über Parameter und geben alles über return zurück. So versteht man sie auch für sich allein.