Funktionen schreiben – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

Funktionen schreiben

Mit Funk­tio­nen kön­nen meh­re­re An­wei­sun­gen mit ein­em Auf­ruf aus­ge­führt wer­den. Sie ent­fal­ten die Stär­ke der Pro­gram­mie­rung.

Funktionen sind ein Grundbaustein von JavaScript und kommen, zumindest konzeptionell gesehen, in jeder bekannten Programmiersprache vor. Mit ihnen wird eine beliebige Menge Code in einem einzelnen Aufruf gebündelt. Anders gesagt: Durch sie wird Funktionalität greifbar gemacht.
Diese Abstraktion führt dazu, dass einmal definierte Funktionalität wiederverwendet werden kann, verschachtelt und auf sie aufgebaut werden kann. Es ist der Antriebsmotor für die Stärke der Programmierung.

Funktionen schreiben

Öffnet eure Browser-Konsole und erstellt eine Variable, der ihr den Rückgabewert eines prompts zuweist. Führt das aus und gebt euren Namen ein. Anschließend verwendet ihr diesen Namen, um ihn in einem alert auszugeben.

var name = prompt("Wie heißt du?");
// => "Oli"
alert("Hey, " + name + "! Schön, dich zu sehen");

Wenn ihr den Code erneut ausführen möchtet, müsst ihr nochmal die erste Zeile wieder aufrufen und ausführen, bevor ihr das gleiche mit der zweiten Zeile macht.
Hier kommen die Vorzüge von Funktionen ins Spiel: Beide Zeilen können in einer einzelnen Funktion zusammengefasst werden. Funktionen werden folgendermaßen geschrieben:

function heyDu () {
  var name = prompt("Wie heißt du?");
  alert("Hey, " + name + "! Schön, dich zu sehen");
}

Nach dem Schlüsselwort function folgt ein beliebiger Name, anschließend runde Klammern und dahinter in geschweiften Klammern ein Code-Block, in dem jeder beliebige Code stehen kann. Selbst weitere Funktionen können darin definiert sein.

Wenn ihr die Funktion aufruft, die ihr nun geschrieben habt, werden die beiden Zeilen mit dem prompt und alert automatisiert nacheinander abgegangen.
Die Funktion ruft ihr auf, indem ihr ihren Namen schreibt (in diesem Fall heyDu) mit einer öffnenden und einer schließenden runden Klammer dahinter. Abschließend schreibt ihr ein Semikolon.

heyDu();

Nach dem Aufruf eurer Funktion öffnet sich selbstständig das Eingabe-
 und anschließend das Ausgabefenster

Funktionen als Datentyp

Funktionen sind in JavaScript ein eigener Datentyp. Das bedeutet, dass sie auch einer Variable zugeordnet werden können. Ist das der Fall, kann der Funktionsname, der hinter dem function-Schlüsselwort steht, weggelassen werden, da die Funktion über den Variablennamen aufgerufen werden kann.

var heyDu = function () {
  var name = prompt("Wie heißt du?");
  alert("Hey, " + name + "! Schön, dich zu sehen");
};

Aufgerufen wird die Funktion genauso wie vorher. Durch einen Unterschied in der Definition folgt kein Unterschied in der Ausführung.

Aufrufstapel (Callstack)

Funktionen können innerhalb von anderen Funktionen aufgerufen werden. Im folgenden sind die zwei Funktionen abc und def definiert, die nacheinander die ersten sechs Buchstaben des Alphabets in einem Dialogfenster ausgeben.

function abc() { // Leerraum zwischen dem Namen und den Klammern ist egal
  alert("a");
  alert("b");
  alert("c");
}

function def ()
{ // Leerzeilen zwischen den runden und geschweiften Klammern sind egal
  alert("d");
  alert("e");
  alert("f");
}

Werden die beiden Funktionen einzeln ausgeführt, geben sie nacheinander entsprechende Buchstaben aus. Sie können aber auch zusammen ausgeführt werden, indem sie in eine weitere Funktion geschrieben werden.

function abcdef() {
  abc();
  def();
}

Die Funktion abcdef ruft die Funktion abc auf, die wiederum alert aufruft. Wenn das alert ausgeführt wird, ist weder die abc- noch die abcdef-Funktion abgeschlossen – alle drei Funktionen sind gleichzeitig aktiv. Sie befinden sich im Aufrufstapel, im Englischen call stack.
Im Aufrufstapel sind alle aktiven Funktionsaufrufe gespeichert. Ruft eine Funktion eine weitere auf, wird diese auf den Stapel drauf geschoben, bis sie vollständig durchgeführt ist. Dann wird sie wieder vom Stapel entfernt und die Funktion darunter wird weiter ausgeführt.

Parameter (arguments)

Einer Funktion werden Werte übergeben, indem diese durch Kommas getrennt zwischen die runden Klammern beim Aufruf geschrieben werden.
Wie können diese Werte innerhalb einer Funktion angenommen werden? Sehr ähnlich: Zwischen die runden Klammern einer Funktionsdefinition werden durch Kommas getrennt Namen für die Parameter geschrieben. Ein Wert, der der Funktion beim Aufruf übergeben wird, kann anschließend innerhalb der Funktion unter dem Namen verwendet werden, der an der Stelle des übergebenen Parameters angegeben ist.
Das klingt kompliziert, ist aber ganz einfach.

function meineFunktion(a, b, c) {
  // Die Funktion heißt meineFunktion und nimmt drei Parameter an
  // Der 1. Parameter heißt a, der 2. b und der 3. c
  // Statt a, b, c könnten die Parameter auch beliebig anders benannt werden
  alert(c); // Der 3. Parameter wird ausgegeben, denn c ist der Name des 3. Parameters
}

// Die Funktion wird aufgerufen
meineFunktion("foo", "bar", "baz"); // Das "baz" wird ausgegeben

Der gesamte Satz an Parametern bilden die Argumente der Funktion, im Englischen arguments.

Im folgenden Beispiel wird eine Funktion geschrieben, die einen String als Parameter annimmt und dessen erstes Zeichen ausgibt.

function zeigeZeichen(str) {
  if (str) { // Prüfen, dass str nicht falsy ist (bspw. ein leerer String)
    alert("Das 1. Zeichen ist ein " + str[0]);
  }
}

zeigeZeichen("Ukulele");
// Das 1. Zeichen ist ein U

Ein Wert wurde übergeben, in diesem Fall der String "Ukulele", in der Funktion unter dem Namen str referenziert und weiterverarbeitet.
Das funktioniert so weit sehr gut. Als nächstes soll die Funktion verändert werden. Statt nur das erste Zeichen auszugeben, soll nun mit einem zweiten Parameter die Stelle im String mitgeteilt werden, die ausgegeben werden soll.
Dieser zweite Parameter ist optional. Das heißt, dass er übergeben werden kann, aber nicht muss.

function zeigeZeichen(str, i) { // Der 2. Parameter wird i benannt
  if (isNaN(i)) { // Wenn i keine Zahl ist, z.B. nicht übergeben wurde
    i = 0; // soll i auf 0 gesetzt werden
  }
  if (str) {
    alert("Das " + (i+1) + ". Zeichen ist ein " + str[i]);
  }
}

Ruft ihr nun zeigeZeichen("Ukulele") auf, wird wie bisher das erste Zeichen U ausgegeben. Gebt ihr aber stattdessen eine Zahl als zweiten Parameter an, wird stattdessen der Buchstabe von diesem Index ausgegeben.

zeigeZeichen("Ukulele", 5);
// Das 6. Zeichen ist ein l

Rekursion

Die Funktion soll verändert werden: Statt nur Informationen über eine Stelle auszugeben, soll sie die Zeichen des Strings nacheinander abgehen und für jedes Zeichen ein alert ausführen.
Das Problem: Der übergebene String kann eine beliebige Länge haben. Wie soll festgelegt werden, wie oft alert aufgerufen werden soll, wenn die Anzahl an Zeichen unbekannt ist?
Auch hier ist die Macht der Funktionen die Lösung des Problems. Statt eine bestimmte Anzahl an alert-Aufrufen fest in die Funktion zu schreiben, ruft einfach die Funktion sich selbst erneut auf und übergibt dabei das nächste Zeichen als Parameter.

// ACHTUNG: Probiert diesen Code nicht selbst aus!

function zeigeZeichen(str, i) {
  if (isNaN(i)) {
    i = 0;
  }
  if (str) {
    alert("Das " + (i+1) + ". Zeichen ist ein " + str[i]);
    // Hier liegt die Lösung:
    zeigeZeichen(str, i + 1); // Die Funktion ruft sich selbst mit dem nächsten Zeichen auf
  }
}

Wenn die Funktion aufgerufen wird, scheint anfangs alles korrekt zu sein. Die einzelnen Zeichen des Strings werden nacheinander ausgegeben.
Das Problem beginnt, nachdem das letzte Zeichen des Strings durchgelaufen ist. Statt dass die Funktion beendet wird, läuft sie weiter.

"Das 8. Zeichen ist ein undefined", wird im Dialogfenster ausgegeben.

Drückt ihr hier Enter oder auf OK, folgt das nächste Dialogfenster und darauf das nächste. Die Funktion hört nicht auf, sich selbst aufzurufen und dadurch Dialogfenster zu öffnen. Das ist nicht das Ziel, das erreicht werden sollte.
Ihr könnt das ganze nur beenden, indem ihr entweder tausende Dialogfenster wegklickt oder das Fenster / den Tab schließt, in dem ihr den Code ausführt, oder die Möglichkeit nutzt, »Diese Webseite am Erstellen zusätzlicher Dialoge zu hindern«, falls euer Browser euch diese Funktion anbietet.

Was hier falsch gelaufen ist, erfahrt ihr im nächsten Artikel der Serie.