Funktionen deklarieren und aufrufen

Bis hierhin lief dein Code von oben nach unten durch, einmal, in genau einer Reihenfolge. Eine Funktion durchbricht das: Sie ist ein Stück Code, das einen Namen bekommt und darauf wartet, dass jemand es aufruft.

Das ist der Punkt, ab dem Programme aufhören, lange Listen zu sein.

01 / 04Die Deklaration tut nichts

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

console.log("Vor der Funktion");

// Das hier ist die Deklaration. Sie legt fest, was passieren soll,
// und tut selbst nichts.
function begruessen() {
  console.log("Hallo!");
}

console.log("Die Funktion steht jetzt da. Passiert ist nichts.");

// Und das ist der Aufruf. Erst hier läuft der Block oben.
begruessen();

console.log("Nach dem Aufruf");

Eine Funktion besteht aus vier Teilen: dem Wort function, einem Namen, einem Paar runder Klammern und einem Block in geschweiften Klammern.

Und sie läuft nicht, nur weil sie dasteht. Das ist die Sache, die am Anfang am meisten irritiert. Im Beispiel steht zwischen den beiden Ausgaben eine vollständige Funktion, und in der Console siehst du davon nichts. Erst die Zeile mit den Klammern lässt den Block laufen.

Das Bild, das dafür trägt: Die Deklaration ist ein Rezept. Es liegt in der Schublade, egal ob jemand kocht. Der Aufruf ist das Kochen. Und wie beim Rezept lohnt sich das Aufschreiben erst, wenn man es öfter als einmal braucht.

Praktisch heißt das auch: Wo du die Funktion hinschreibst, ist ziemlich egal, solange sie in derselben Datei steht. Aufrufen kannst du sie sogar oberhalb ihrer eigenen Zeilen. Warum das geht und wo die Grenze liegt, steht in Lektion 5.6.

02 / 04Die Klammern gehören dazu

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

function wuerfeln() {
  console.log("Gewürfelt!");
}

// Mit Klammern: die Funktion läuft.
wuerfeln();

// Ohne Klammern: nichts läuft. JavaScript liest die Zeile, findet
// die Funktion selbst und wirft sie weg. Kein Fehler, keine Ausgabe.
wuerfeln;

// Ausgegeben sieht man den Unterschied deutlich.
console.log("Mit Klammern ergibt:", wuerfeln());
console.log("Ohne Klammern ergibt:", wuerfeln);

wuerfeln und wuerfeln() sind zwei völlig verschiedene Dinge, und der Unterschied ist genau ein Klammerpaar.

Mit Klammern rufst du die Funktion auf, der Block läuft, du bekommst ihr Ergebnis. Ohne Klammern meinst du die Funktion selbst, so wie du mit preis die Zahl selbst meinst und nicht ihre Berechnung.

Der Ärger daran ist, dass das Vergessen keinen Fehler auslöst. Die Zeile ist gültig, JavaScript liest sie, findet dort eine Funktion und macht damit nichts weiter. Kein ReferenceError, kein TypeError, nur Stille. Wenn also etwas partout nicht passiert, obwohl der Code richtig aussieht: Schau als Erstes nach den Klammern.

Die letzten beiden Zeilen des Beispiels zeigen es. Hinter Mit Klammern ergibt: steht undefined, denn wuerfeln gibt nichts zurück, es gibt nur etwas aus. Hinter Ohne Klammern ergibt: steht ƒ wuerfeln(), mit einem geschwungenen f davor: Das ist die Funktion selbst, so wie eine Console sie schreibt.

Noch deutlicher wird es in der Eingabezeile der Console, weil dort beide Hälften untereinanderstehen. Tipp wuerfeln, und die Antwort ist ƒ wuerfeln(), sonst passiert nichts. Tipp wuerfeln(), und erst erscheint die Zeile Gewürfelt! und danach die Antwort undefined. Das ist die ganze Lektion in vier Zeilen: Einmal bekommst du die Funktion, einmal läuft sie.

Dass man eine Funktion überhaupt so weiterreichen kann, ohne sie aufzurufen, ist kein Unfall, sondern eine der nützlichsten Eigenschaften der Sprache. Lektion 5.7 lebt davon.

03 / 04Einmal schreiben statt dreimal

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

function trennlinie() {
  console.log("--------------------");
}

trennlinie();
console.log("Erster Abschnitt");
trennlinie();
console.log("Zweiter Abschnitt");
trennlinie();

// Soll die Linie länger werden, änderst du eine Zeile statt drei.

Eine Funktion darf beliebig oft aufgerufen werden, und das ist der eigentliche Grund, warum es sie gibt.

Der Gewinn zeigt sich nicht beim Schreiben, sondern beim Ändern. Steht die Trennlinie dreimal im Code, musst du sie dreimal anfassen, und beim dritten Mal vergisst du eine. Steht sie in einer Funktion, änderst du eine Zeile.

Das ist dieselbe Überlegung wie bei der Schleife in Abschnitt 4, nur eine Stufe darüber. Die Schleife wiederholt an einer Stelle, die Funktion an beliebig vielen.

04 / 04Namen sind Verben

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Der Name sagt nur, worum es geht. Beim Lesen der Aufrufzeile
// weiß man nicht, ob etwas passiert oder etwas geholt wird.
function begruessung() {
  console.log("Guten Morgen");
}

begruessung();

// Der Name sagt, was getan wird. Die Aufrufzeile liest sich wie
// eine Anweisung, und das ist sie ja auch.
function zeigeBegruessung() {
  console.log("Guten Morgen");
}

zeigeBegruessung();

Eine Variable trägt einen Wert, deshalb heißt sie wie eine Sache: preis, name, anzahl. Eine Funktion tut etwas, deshalb heißt sie wie eine Tätigkeit: berechneSumme, zeigeFehler, pruefeEingabe.

Der Test dafür ist die Aufrufzeile. zeigeBegruessung() liest sich wie eine Anweisung. begruessung() liest sich wie ein Substantiv mit Klammern dahinter, und beim Überfliegen ist nicht zu erkennen, ob dort etwas passiert.

Zwei gängige Vorsilben, die dir überall begegnen werden: hole... oder get... für etwas, das einen Wert liefert, und ist... oder hat... für etwas, das true oder false liefert. istGerade aus Lektion 2.3 war schon so einer.

In der Challenge weicht der Kurs von dieser Regel bewusst ab und nennt zwei Funktionen begruessung und abschied. Das ist der Fall, in dem eine Funktion wirklich nur einen Text liefert, und dann trägt der Name der Sache besser als der Name der Tätigkeit.