Schleifen in JavaScript

Schleifen ermöglichen es, Code wiederholt auszuführen. Statt denselben Code 100 Mal zu schreiben, schreibst du ihn einmal und lässt ihn 100 Mal laufen.

Warum Schleifen?

// Ohne Schleife - Wahnsinn! 😱
console.log("Hallo 1");
console.log("Hallo 2");
console.log("Hallo 3");
console.log("Hallo 4");
console.log("Hallo 5");
// ... und so weiter bis 100?

// Mit Schleife - Elegant! ✨
for (let i = 1; i <= 100; i++) {
    console.log("Hallo " + i);
}

Die for-Schleife

Die for-Schleife ist die häufigste Schleife. Perfekt, wenn du weißt, wie oft etwas wiederholt werden soll.

Syntax

for (initialisierung; bedingung; update) {
    // Code der wiederholt wird
}

Die drei Teile erklärt

for (let i = 0; i < 5; i++) {
    console.log(i);
}

// Teil 1: let i = 0       → Initialisierung (einmal am Anfang)
// Teil 2: i < 5           → Bedingung (vor jedem Durchlauf geprüft)
// Teil 3: i++             → Update (nach jedem Durchlauf)

Ablauf einer for-Schleife

1. Initialisierung: let i = 0
2. Bedingung prüfen: 0 < 5? ✓ Ja
3. Code ausführen: console.log(0)
4. Update: i++ → i = 1
5. Bedingung prüfen: 1 < 5? ✓ Ja
6. Code ausführen: console.log(1)
7. Update: i++ → i = 2
... (weiter bis i = 5)
8. Bedingung prüfen: 5 < 5? ✗ Nein → Schleife beendet

Praktische Beispiele

// Von 1 bis 10 zählen
for (let i = 1; i <= 10; i++) {
    console.log(i);
}
// Ausgabe: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

// Rückwärts zählen
for (let i = 10; i >= 1; i--) {
    console.log(i);
}
// Ausgabe: 10, 9, 8, 7, 6, 5, 4, 3, 2, 1

// In 2er-Schritten
for (let i = 0; i <= 20; i += 2) {
    console.log(i);
}
// Ausgabe: 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20

// In 5er-Schritten rückwärts
for (let i = 100; i >= 0; i -= 5) {
    console.log(i);
}
// Ausgabe: 100, 95, 90, 85, ...

Summe berechnen

// Summe von 1 bis 100
let summe = 0;

for (let i = 1; i <= 100; i++) {
    summe += i;  // summe = summe + i
}

console.log(summe); // 5050

Multiplikationstabelle

const zahl = 7;

console.log(`Einmaleins von ${zahl}:`);
for (let i = 1; i <= 10; i++) {
    console.log(`${zahl} × ${i} = ${zahl * i}`);
}

// Ausgabe:
// Einmaleins von 7:
// 7 × 1 = 7
// 7 × 2 = 14
// 7 × 3 = 21
// ...

Die while-Schleife

Die while-Schleife läuft, solange eine Bedingung wahr ist. Perfekt, wenn du nicht weißt, wie oft etwas wiederholt werden muss.

Syntax

while (bedingung) {
    // Code der wiederholt wird
}

Einfaches Beispiel

let count = 0;

while (count < 5) {
    console.log("Count ist: " + count);
    count++;
}

// Ausgabe:
// Count ist: 0
// Count ist: 1
// Count ist: 2
// Count ist: 3
// Count ist: 4

Praktische Beispiele

// Würfeln bis eine 6 kommt
let wurf;
let versuche = 0;

while (wurf !== 6) {
    wurf = Math.floor(Math.random() * 6) + 1;
    versuche++;
    console.log(`Wurf ${versuche}: ${wurf}`);
}

console.log(`6 gewürfelt nach ${versuche} Versuchen!`);

// Passwort-Eingabe (vereinfacht)
let passwort = "";
const korrektesPasswort = "geheim123";

while (passwort !== korrektesPasswort) {
    passwort = prompt("Passwort eingeben:");

    if (passwort !== korrektesPasswort) {
        console.log("Falsches Passwort!");
    }
}

console.log("Willkommen!");

// Zahl halbieren bis < 1
let zahl = 1000;

while (zahl >= 1) {
    console.log(zahl);
    zahl = zahl / 2;
}

// Ausgabe: 1000, 500, 250, 125, 62.5, 31.25, 15.625, ...

Ziffern einer Zahl zählen

function ziffernZaehlen(n) {
    let zahl = Math.abs(n);  // Negative Zahlen behandeln
    let anzahl = 0;

    // Spezialfall: 0 hat eine Ziffer
    if (zahl === 0) return 1;

    while (zahl > 0) {
        anzahl++;
        zahl = Math.floor(zahl / 10);
    }

    return anzahl;
}

console.log(ziffernZaehlen(12345)); // 5
console.log(ziffernZaehlen(7));     // 1
console.log(ziffernZaehlen(-999));  // 3

Die do-while-Schleife

Die do-while-Schleife führt den Code mindestens einmal aus und prüft danach die Bedingung.

Syntax

do {
    // Code der wiederholt wird
} while (bedingung);

Unterschied zu while

// while - prüft ZUERST
let i = 10;
while (i < 5) {
    console.log(i);  // Wird NIE ausgeführt!
    i++;
}

// do-while - führt ZUERST aus
let j = 10;
do {
    console.log(j);  // Wird EINMAL ausgeführt!
    j++;
} while (j < 5);

Praktische Beispiele

// Menü-Auswahl
let auswahl;

do {
    console.log("=== MENÜ ===");
    console.log("1. Neues Spiel");
    console.log("2. Laden");
    console.log("3. Beenden");

    auswahl = prompt("Wähle (1-3):");

    switch (auswahl) {
        case "1":
            console.log("Starte neues Spiel...");
            break;
        case "2":
            console.log("Lade Spielstand...");
            break;
        case "3":
            console.log("Auf Wiedersehen!");
            break;
        default:
            console.log("Ungültige Auswahl!");
    }
} while (auswahl !== "3");

// Zufallszahl raten
const geheimzahl = Math.floor(Math.random() * 100) + 1;
let geraten;
let versuche = 0;

do {
    geraten = parseInt(prompt("Rate die Zahl (1-100):"));
    versuche++;

    if (geraten < geheimzahl) {
        console.log("Zu niedrig!");
    } else if (geraten > geheimzahl) {
        console.log("Zu hoch!");
    }
} while (geraten !== geheimzahl);

console.log(`Richtig! Du hast ${versuche} Versuche gebraucht.`);

Schleifenkontrolle: break und continue

break - Schleife sofort beenden

// Erste durch 7 teilbare Zahl finden
for (let i = 1; i <= 100; i++) {
    if (i % 7 === 0) {
        console.log("Gefunden: " + i);
        break;  // Schleife sofort verlassen
    }
}
// Ausgabe: "Gefunden: 7"

// Suche in Array abbrechen wenn gefunden
const namen = ["Anna", "Ben", "Clara", "David", "Eva"];
const gesucht = "Clara";

for (let i = 0; i < namen.length; i++) {
    console.log("Prüfe: " + namen[i]);

    if (namen[i] === gesucht) {
        console.log("Gefunden an Position " + i);
        break;
    }
}
// Prüft nur Anna, Ben, Clara - dann Abbruch

continue - Durchlauf überspringen

// Nur gerade Zahlen ausgeben
for (let i = 1; i <= 10; i++) {
    if (i % 2 !== 0) {
        continue;  // Rest überspringen, nächster Durchlauf
    }
    console.log(i);
}
// Ausgabe: 2, 4, 6, 8, 10

// Negative Werte überspringen
const werte = [10, -5, 20, -3, 15, -8, 30];
let summe = 0;

for (let i = 0; i < werte.length; i++) {
    if (werte[i] < 0) {
        continue;  // Negative überspringen
    }
    summe += werte[i];
}

console.log("Summe positiver Werte: " + summe); // 75

Verschachtelte Schleifen

Schleifen können ineinander verschachtelt werden:

// Koordinaten ausgeben
for (let x = 0; x < 3; x++) {
    for (let y = 0; y < 3; y++) {
        console.log(`(${x}, ${y})`);
    }
}

// Ausgabe:
// (0, 0), (0, 1), (0, 2)
// (1, 0), (1, 1), (1, 2)
// (2, 0), (2, 1), (2, 2)

Multiplikationstabelle (1x1 bis 10x10)

console.log("    1   2   3   4   5   6   7   8   9  10");
console.log("  +----------------------------------------");

for (let i = 1; i <= 10; i++) {
    let zeile = i.toString().padStart(2) + "|";

    for (let j = 1; j <= 10; j++) {
        zeile += (i * j).toString().padStart(4);
    }

    console.log(zeile);
}

Muster zeichnen

// Dreieck
for (let i = 1; i <= 5; i++) {
    let zeile = "";
    for (let j = 1; j <= i; j++) {
        zeile += "* ";
    }
    console.log(zeile);
}

// Ausgabe:
// *
// * *
// * * *
// * * * *
// * * * * *

// Pyramide
const hoehe = 5;

for (let i = 1; i <= hoehe; i++) {
    let leerzeichen = " ".repeat(hoehe - i);
    let sterne = "* ".repeat(i);
    console.log(leerzeichen + sterne);
}

// Ausgabe:
//     *
//    * *
//   * * *
//  * * * *
// * * * * *

Endlosschleifen vermeiden!

Endlosschleifen laufen für immer und frieren den Browser ein:

// ❌ ENDLOSSCHLEIFE - NIE MACHEN!
// while (true) {
//     console.log("Für immer...");
// }

// ❌ Bedingung wird nie false
// let i = 0;
// while (i < 10) {
//     console.log(i);
//     // i++ vergessen!
// }

// ❌ Falsche Richtung
// for (let i = 0; i < 10; i--) {
//     console.log(i);
// }

Schutz vor Endlosschleifen

// Sicherheits-Counter einbauen
let count = 0;
const maxIterations = 10000;

while (someBedingung) {
    // ... Code ...

    count++;
    if (count > maxIterations) {
        console.error("Mögliche Endlosschleife erkannt!");
        break;
    }
}

Welche Schleife wann?

Schleife	Verwende wenn…
for	Du weißt, wie oft (z.B. Array durchlaufen)
while	Du weißt nicht, wie oft (z.B. bis Bedingung erfüllt)
do-while	Code muss mindestens 1x laufen (z.B. Menü)

Entscheidungsbaum

Weißt du wie oft?
├── Ja → for-Schleife
└── Nein → Muss es mindestens 1x laufen?
            ├── Ja → do-while
            └── Nein → while

Praktisches Projekt: Passwort-Generator

function generierePasswort(laenge) {
    const zeichen = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%";
    let passwort = "";

    for (let i = 0; i < laenge; i++) {
        const zufallsIndex = Math.floor(Math.random() * zeichen.length);
        passwort += zeichen[zufallsIndex];
    }

    return passwort;
}

// 5 Passwörter generieren
for (let i = 1; i <= 5; i++) {
    console.log(`Passwort ${i}: ${generierePasswort(12)}`);
}

Zusammenfassung

// for - bekannte Anzahl
for (let i = 0; i < 10; i++) {
    // 10 Durchläufe
}

// while - unbekannte Anzahl
while (bedingung) {
    // bis bedingung false
}

// do-while - mindestens einmal
do {
    // mindestens 1x
} while (bedingung);

// break - Schleife beenden
// continue - Durchlauf überspringen

---