JavaScript: Schleifen

Kurz: Eine Schleife wiederholt Code. JavaScript kennt for, while, do…while, for…of und for…in.

Teil des Kurses JavaScript

Kapitel 9 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Eine Schleife wiederholt Code. JavaScript kennt for, while, do...while, for...of und for...in.

for

for (let i = 1; i <= 5; i++) {
  console.log("Runde", i);
}

Ausgabe:

Runde 1
Runde 2
Runde 3
Runde 4
Runde 5

Im Kopf stehen drei Teile: Start (let i = 1), Bedingung (i <= 5), Schritt (i++).

let summe = 0;
for (let i = 1; i <= 100; i++) summe += i;
console.log(summe);
for (let i = 10; i > 0; i -= 3) console.log(i);

Ausgabe:

5050
10
7
4
1

while und do…while

while prüft die Bedingung vor jedem Durchlauf, do...while danach (läuft also mindestens einmal):

let n = 1;
while (n < 100) n *= 2;
console.log(n);
 
let versuche = 0;
do {
  versuche++;
} while (versuche < 3);
console.log(versuche);

Ausgabe:

128
3

Achtung

Vergisst du, die Schleifenvariable zu ändern, entsteht eine Endlosschleife. In “Probier es selbst” wird sie nach 3 Sekunden abgebrochen.

for…of: Werte durchlaufen

Für Arrays, Strings, Maps und Sets ist for...of die beste Wahl:

const farben = ["rot", "grün", "blau"];
for (const farbe of farben) console.log(farbe);
for (const [i, farbe] of farben.entries()) console.log(i, farbe);
for (const z of "abc") console.log(z);

Ausgabe:

rot
grün
blau
0 rot
1 grün
2 blau
a
b
c

for…in: Schlüssel von Objekten

const person = { name: "Mia", alter: 17 };
for (const schluessel in person) {
  console.log(schluessel, "=", person[schluessel]);
}
for (const [k, v] of Object.entries(person)) console.log(k, v);

Ausgabe:

name = Mia
alter = 17
name Mia
alter 17

Achtung

for...in bei Arrays vermeiden: Es liefert Indizes als Text und kann auch geerbte Eigenschaften enthalten. Für Arrays nimmst du for...of.

break und continue

break verlässt die Schleife, continue springt zum nächsten Durchlauf:

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) continue;   // gerade überspringen
  if (i > 7) break;            // bei 9 abbrechen
  console.log(i);
}

Ausgabe:

1
3
5
7

Mit Labels kannst du verschachtelte Schleifen auf einmal verlassen:

suche: for (let a = 1; a < 10; a++) {
  for (let b = 1; b < 10; b++) {
    if (a * b === 42) {
      console.log(a, b);
      break suche;
    }
  }
}

Ausgabe:

6 7

Verschachtelte Schleifen

for (let zeile = 1; zeile <= 3; zeile++) {
  let text = "";
  for (let spalte = 1; spalte <= 4; spalte++) text += zeile * spalte + "\t";
  console.log(text);
}

Ausgabe:

1	2	3	4
2	4	6	8
3	6	9	12

Schleifen vs. Array-Methoden

Für Listen sind map, filter, reduce und forEach (nächstes Kapitel) oft kürzer als eine Schleife. Schleifen sind aber ideal bei Abbruchbedingungen, Zählern und Schritten.

Merke

• for für feste Anzahl, while für Bedingungen, do...while läuft mindestens einmal
• for...of für Werte, for...in für Objektschlüssel
• break beendet, continue überspringt, Labels verlassen mehrere Ebenen
• Schleifenvariable ändern, sonst Endlosschleife

Übungsaufgabe

Gib die Zahlen von 1 bis 30 aus, aber “Fizz” für Vielfache von 3, “Buzz” für Vielfache von 5 und “FizzBuzz” für beides.

Quiz zur Selbstkontrolle

Welche Schleife läuft mindestens einmal?

• do…while (richtig)
• while
• for
• for…of

Was macht continue?

• Springt zum nächsten Durchlauf (richtig)
• Beendet die Schleife
• Startet das Programm neu
• Gibt einen Fehler aus

Welche Schleife nimmst du für die Werte eines Arrays?

• for…of (richtig)
• for…in
• while(true)
• do…while

Weiter im Kurs

Zurück: Bedingungen: if, else und switch

Weiter: Funktionen

Alle Kapitel: JavaScript im Überblick