Funktionen definieren

In dieser Lektion lernst du, eigene Funktionen zu schreiben. Beginnen wir mit einem Problem: Wir brauchen die Flächen von drei Rechtecken. Die Fläche eines Rechtecks ist seine Breite mal seine Höhe, also könnten wir schreiben:

const breite1 = 5;
const hoehe1 = 6;
const flaeche1 = breite1 * hoehe1;
console.log(flaeche1);

const breite2 = 10;
const hoehe2 = 5;
const flaeche2 = breite2 * hoehe2;
console.log(flaeche2);

const breite3 = 1;
const hoehe3 = 5;
const flaeche3 = breite3 * hoehe3;
console.log(flaeche3);

Das gibt aus:

30
50
5

Das funktioniert, aber wir haben dieselben drei Zeilen dreimal geschrieben, und nur die Zahlen haben sich geändert. Stell dir hundert Rechtecke vor! Und wenn wir einen Fehler in der Berechnung fänden, müssten wir ihn an hundert Stellen korrigieren.

Programmierer versuchen, Code nicht zu wiederholen. Stattdessen schreiben sie den wiederholten Teil einmal, geben ihm einen Namen und benutzen ihn dann überall dort, wo sie ihn brauchen. Ein solches benanntes Stück Code heißt Funktion.

Du hast schon Funktionen benutzt, die zu JavaScript gehören: Methoden wie console.log() und .push() sind ebenfalls Funktionen. Jetzt schreibst du deine eigenen. Das Erstellen einer Funktion nennt man sie definieren:

function sageHallo() {
    console.log("Hallo!");
    console.log("Einen schönen Tag noch!");
}

Eine Funktionsdefinition besteht aus vier Teilen:

• Das Schlüsselwort function, das JavaScript mitteilt, dass jetzt eine Funktion folgt.
• Der Name der Funktion, hier sageHallo. Für ihn gelten dieselben Regeln wie für Variablennamen: keine Leerzeichen, und Namen aus mehreren Wörtern schreibt man in camelCase. Eine Funktion tut etwas, deshalb beginnt ihr Name meistens mit einem Verb, wie sageHallo oder gibFlaecheAus.
• Runde Klammern (). Sie sind vorerst leer; bald erfährst du, was dort hineinkommt.
• Ein Codeblock in geschweiften Klammern { }, der Rumpf der Funktion. Er enthält die Befehle, die die Funktion ausführt. Wir rücken sie um 4 Leerzeichen ein, damit man leicht sieht, dass sie zur Funktion gehören. Wie bei if steht nach der schließenden } kein Semikolon.

Wenn du diesen Code ausführst, wird nichts ausgegeben. Das ist kein Fehler! Eine Definition teilt JavaScript nur mit, was die Funktion tun soll, wie ein Rezept in einem Kochbuch: Gekocht hat noch niemand etwas. In der nächsten Übung bringst du die Funktion zum Laufen.

Ein häufiger Fehler ist, die Klammern nach dem Namen zu vergessen. function sageHallo { endet mit dem Fehler SyntaxError: Unexpected token '{': JavaScript hat nach dem Namen ein ( erwartet, aber ein { gefunden.