Die for-Schleife

Bisher lief jede Zeile deines Codes genau einmal. Das reicht für eine Rechnung und nicht für eine Liste, eine Tabelle oder alles, was mehr als einen Eintrag hat.

Eine Schleife wiederholt einen Block, bis eine Bedingung nicht mehr zutrifft.

01 / 05Die drei Teile

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

// Startwert: i = 1. Bedingung: solange i <= 5. Schritt: i um eins hoch.
for (let i = 1; i <= 5; i++) {
  console.log("Durchlauf", i);
}

console.log("---");

// Rückwärts geht genauso, man dreht Startwert, Bedingung und Schritt um.
for (let i = 3; i >= 1; i--) {
  console.log("Countdown", i);
}

console.log("---");

// Und in Zweierschritten.
for (let i = 0; i <= 10; i += 2) {
  console.log("Gerade Zahl", i);
}

In den runden Klammern stehen drei Angaben, getrennt durch Semikolons. Nicht durch Kommas, das ist der häufigste Tippfehler.

Der Startwert legt den Zähler an und gibt ihm seinen ersten Wert. let i = 1.

Die Bedingung wird vor jedem Durchlauf geprüft. Ist sie wahr, läuft der Block. Ist sie falsch, ist die Schleife zu Ende. i <= 5.

Der Schritt läuft nach jedem Durchlauf und verändert den Zähler. i++.

Die Reihenfolge in den Klammern ist auch die Reihenfolge im Ablauf: erst der Startwert, dann prüfen, dann der Block, dann der Schritt, dann wieder prüfen. Der Schritt kommt nach dem Block, nicht davor. Deshalb hat der erste Durchlauf noch den Startwert.

Der Zähler heißt traditionell i, für Index. Das ist so verbreitet, dass jeder es sofort liest. Bei zwei ineinanderliegenden Schleifen nimmt man i und j, und ab da wird es unübersichtlich. Ein sprechender Name wie zeile oder position ist fast immer besser, sobald die Schleife länger als drei Zeilen ist.

Der Zähler gehört übrigens der Schleife: Nach dem Ende gibt es ihn nicht mehr. Warum das so ist, klärt Abschnitt 5.

02 / 05Warum von null gezählt wird

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

const wort = "Kurs";

// Positionen beginnen bei 0. Deshalb zählt die Schleife von 0
// und läuft, solange i kleiner als die Länge ist.
for (let i = 0; i < wort.length; i++) {
  console.log(i, wort[i]);
}

console.log("Länge:", wort.length);
console.log("Letzte Position:", wort.length - 1);

Bisher haben wir bei 1 angefangen, weil wir Zahlen ausgegeben haben. Sobald es um Positionen geht, fängt man bei 0 an.

Der Grund ist eine Vereinbarung, die durch die ganze Sprache geht: Das erste Zeichen eines Textes steht an Position 0, das erste Element einer Liste ebenfalls. Ein Text mit vier Zeichen hat also die Positionen 0, 1, 2 und 3.

Daraus folgt die Standardform, die du ab Abschnitt 6 ständig schreiben wirst:

Startwert i = 0, Bedingung i < length, Schritt i++.

Beachte das kleiner als in der Bedingung. Mit <= liefe die Schleife einen Durchlauf zu weit und griffe auf eine Position zu, die es nicht gibt. Das ist wieder der Zaunpfahlfehler aus Lektion 3.5, und bei Schleifen ist er sein häufigster Aufenthaltsort. Merk dir das Paar: von 0 gezählt heißt <, von 1 gezählt heißt <=.

03 / 05Etwas aufsummieren

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

// Der Sammelbehälter steht AUSSERHALB der Schleife.
let summe = 0;

for (let i = 1; i <= 5; i++) {
  summe += i;
  console.log("Nach Durchlauf", i, "steht summe auf", summe);
}

console.log("Am Ende:", summe);

Das häufigste Muster überhaupt, und es hat eine Regel, an der jeder einmal scheitert.

Der Sammelbehälter steht außerhalb der Schleife. Legst du let summe = 0 in den Block hinein, wird er bei jedem Durchlauf neu angelegt und ist am Ende genau ein Wert und nicht die Summe.

Dasselbe gilt für alles andere, was sich über die Durchläufe hinweg aufbaut: ein Zähler, ein Text, der zusammenwächst, eine Liste, die sich füllt. Anlegen vor der Schleife, verändern in der Schleife, benutzen nach der Schleife.

04 / 05Beim Zusehen lernt man Schleifen

Eine Schleife ist die erste Sache in diesem Kurs, bei der die Ausgabe nicht mehr die ganze Geschichte erzählt. Du siehst fünf Zeilen und musst dir denken, was zwischen ihnen passiert ist.

Dafür gibt es rechts einen vierten Reiter, Debug. Drück dort auf Aufzeichnen: Dein Code läuft noch einmal, und diesmal meldet er vor jeder Zeile, was gerade in deinen Variablen steht. Danach steht dort eine Liste, durch die du mit den Pfeilen blätterst, und der Editor springt jeweils in die Zeile mit.

Zeichne das Beispiel von oben einmal auf. Es sind dreizehn Schritte, und sie lesen sich wie ein Zickzack: i=1, dann summe=1, dann i=2, dann summe=3, dann i=3, dann summe=6. An jeder Zeile steht, was sich dort geändert hat, und am Schritt, den du angeklickt hast, stehen alle Werte untereinander.

Das beantwortet die Frage, die man sich bei jeder Schleife stellt: Was ist im dritten Durchlauf passiert. Genau die kann console.log auch beantworten, nur musst du dafür eine Zeile einbauen, die du hinterher wieder herausnimmst.

Zwei Sachen dazu. Aufgezeichnet wird die Datei, an der du gerade arbeitest, und der Knopf tut nichts, solange dein Code einen Syntaxfehler hat: Dann steht die Meldung in der Console, und die liest du zuerst. Und bei einer sehr langen Schleife hört die Aufzeichnung nach zweitausend Schritten auf und sagt es dir. Zum Verstehen reichen die ersten zweitausend allemal.

Ab hier ist der Reiter für den Rest des Kurses da. In Abschnitt 14 wird er noch einmal wichtig, dann als Werkzeug beim Fehlersuchen.

05 / 05Die Endlosschleife

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

let i = 0;

// Der Zähler i wird hier absichtlich nie erhöht, die Bedingung
// i < 3 bleibt also für immer wahr. Nur die zweite Zählung
// (versuche) bricht das Ganze ab. Ohne sie wäre der Browser weg.
for (let versuche = 0; i < 3 && versuche < 5; versuche++) {
  console.log("Durchlauf", versuche, "und i steht immer noch auf", i);
}

console.log("Abgebrochen, weil die Sicherheitsgrenze griff.");

Was passiert, wenn die Bedingung nie falsch wird?

Der Browser arbeitet die Schleife ab, so schnell er kann, und tut in der Zwischenzeit nichts anderes. Die Seite reagiert nicht mehr auf Klicks, nichts wird neu gezeichnet, der Lüfter geht an. Nach einigen Sekunden bietet der Browser an, die Seite anzuhalten.

Die häufigste Ursache ist banal: Der Schritt fehlt oder verändert den falschen Wert. Im Beispiel wird i nie erhöht, deshalb bleibt i < 3 für immer wahr. Nur die zweite Zählung sorgt dafür, dass hier überhaupt etwas endet.

Zeichne auch dieses Beispiel einmal auf. Acht Schritte, und in jedem einzelnen steht i=0, während versuche von 0 bis 4 hochzählt. Da steht der Fehler als Liste: Ein Wert, der sich in einer Schleife nie ändert, obwohl die Bedingung ihn prüft.

Das geht allerdings nur, weil die zweite Zählung da ist. Bei einer Schleife, die wirklich nie endet, hilft der Reiter nicht: Der Browser kommt gar nicht mehr dazu, irgendetwas anzuzeigen, und das gilt für die ganze Seite. Nachgemessen hängt sie dann auch nach einer Minute noch.

Zweithäufigste Ursache ist ein Schritt in die falsche Richtung: i-- bei einer Bedingung i < 10.

Genau deshalb ist eine Sicherheitsgrenze in Übungscode nicht albern, sondern vernünftig, sobald die Abbruchbedingung nicht auf den ersten Blick zwingend ist. In der nächsten Lektion, in der die Anzahl der Durchläufe gar nicht feststeht, kommt das noch einmal.

Und falls es dich doch erwischt: Neuladen bringt nichts, denn dein Code steht danach wieder da und die Schleife läuft noch einmal los. Bleibt der Tab schließen. Kaputt geht dabei nichts, dein Fortschritt ist gespeichert; weg ist nur, was du seit dem letzten Bestehen getippt hast, denn den Zwischenstand merkt sich der Editor nur, solange der Tab offen ist. Ein Grund mehr für die Sicherheitsgrenze, bevor du auf Verdacht ausprobierst.