Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

Schleifen in JavaScript

Schleifen in JavaScript

~12 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026

Um mehrere Transaktionen zu verarbeiten, braucht unser Haushaltsbuch Schleifen. Dieses Kapitel deckt alle vier Schleifenformen ab, die JavaScript kennt – Arrays selbst folgen erst in Kapitel 10, hier arbeiten wir vorerst mit einfachen Zahlenbereichen.

Die klassische for-Schleife

for (let monat = 1; monat <= 12; monat++) {
  console.log(`Monat ${monat}`);
}
// Gibt 'Monat 1' bis 'Monat 12' aus

Die drei Teile in den Klammern: Initialisierung (let monat = 1, läuft einmal vor der Schleife), Bedingung (monat <= 12, vor JEDEM Durchlauf geprüft), Update (monat++, nach JEDEM Durchlauf ausgeführt).

while: solange eine Bedingung gilt

let kontostand = 1500;
let monat = 0;

while (kontostand > 0 && monat < 24) {
  kontostand -= 200; // monatliche Fixkosten
  monat++;
}

console.log(`Reicht für ${monat} Monate.`);

do...while: mindestens ein Durchlauf garantiert

Der Unterschied zu while: Bei do...while wird der Schleifenkörper ZUERST ausgeführt und die Bedingung erst DANACH geprüft – der Körper läuft also garantiert mindestens einmal, selbst wenn die Bedingung von Anfang an falsch ist.

let versuch = 0;

do {
  versuch++;
  console.log(`Versuch ${versuch}`);
} while (versuch < 3);
// Gibt 'Versuch 1', 'Versuch 2', 'Versuch 3' aus

for...of und for...in: ein Vorgeschmack

Zwei weitere Schleifenformen sind speziell für ITERIERBARE Werte gemacht – Arrays und Objekte lernen wir erst in den Kapiteln 10-12 im Detail kennen, hier ein kurzer Vorgeschmack an einem einfachen Array von Kategorien:

const kategorien = ['Miete', 'Lebensmittel', 'Freizeit'];

for (const kategorie of kategorien) {
  console.log(kategorie); // iteriert über die WERTE des Arrays
}

for (const index in kategorien) {
  console.log(index); // iteriert über die INDIZES ('0', '1', '2') - als Strings!
}

Tipp: Faustregel für später: for...of für Arrays und andere iterierbare Werte (Werte selbst), for...in so gut wie NIE für Arrays verwenden (liefert Indizes als Strings und iteriert auch über geerbte Eigenschaften) – for...in ist fast ausschließlich für Objekt-Schlüssel gedacht, siehe Kapitel 12.

break und continue

for (let monat = 1; monat <= 12; monat++) {
  if (monat === 6) {
    continue; // überspringt Juni, macht mit Juli weiter
  }
  if (monat === 10) {
    break; // beendet die Schleife komplett ab Oktober
  }
  console.log(`Monat ${monat}`);
}
// Gibt Monat 1-5 und 7-9 aus

Verschachtelte Schleifen: eine Jahresübersicht

Zum Abschluss von Phase 1 kombinieren wir alles Gelernte zu einer kleinen Jahresübersicht-Simulation unseres Haushaltsbuchs:

src/index.js
const kategorien = ['Miete', 'Lebensmittel', 'Freizeit'];

for (let monat = 1; monat <= 3; monat++) {
  console.log(`--- Monat ${monat} ---`);
  for (const kategorie of kategorien) {
    const istTeuer = kategorie === 'Miete';
    const hinweis = istTeuer ? '(größter Posten)' : '';
    console.log(`  ${kategorie} ${hinweis}`);
  }
}

Damit ist Phase 1 (Grundlagen) abgeschlossen! In Phase 2 lernen wir Funktionen, Arrays und Objekte kennen – und bündeln unsere lose Transaktions-Variablen endlich zu einer echten Datenstruktur.