JavaScript - While-Schleifen

Hallo da draußen, zukünftige Codingsuperstars! Heute tauchen wir in die aufregende Welt der JavaScript-While-Schleifen ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich auf diesem Weg mit vielen Beispielen und Erklärungen zu führen. Also, packt eure virtuellen Rucksäcke und lasst uns dieses lohnende Abenteuer beginnen!

JavaScript - While Loop

JavaScript-While-Schleife

Die While-Schleife ist wie ein beständiger Freund, der immer fragt: "Sind wir da?" bis ihr finally euer Ziel erreicht habt. Es ist ein grundlegendes Werkzeug im Programmieren, das es uns ermöglicht, einen Block von Code so lange wiederzugeben, bis eine bestimmte Bedingung wahr ist.

Grundlegende Syntax

Hier ist, wie eine While-Schleife in ihrer einfachsten Form aussieht:

while (bedingung) {
// auszuführender Code
}

Lassen wir das auseinanderbrechen:

  • Das Schlüsselwort while sagt JavaScript, dass wir eine While-Schleife starten möchten.
  • Die bedingung ist ein boolescher Ausdruck, der vor jeder Iteration der Schleife bewertet wird.
  • Wenn die Bedingung wahr ist, wird der Code innerhalb der geschweiften Klammern {} ausgeführt.
  • Dieser Prozess wiederholt sich, bis die Bedingung falsch wird.

Beispiel 1: Zählen bis 5

Fangen wir mit einem einfachen Beispiel an:

let count = 1;

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

In diesem Beispiel:

  1. Initialisieren wir eine Variable count mit dem Wert 1.
  2. Die While-Schleife läuft so lange, bis count kleiner oder gleich 5 ist.
  3. Innerhalb der Schleife loggen wir den aktuellen Zähler in die Konsole.
  4. Wir erhöhen count um 1 mit dem ++-Operator.
  5. Die Schleife wiederholt Schritte 3-4, bis count 6 wird, wobei die Bedingung falsch wird und die Schleife endet.

Ausgabe:

Count is: 1
Count is: 2
Count is: 3
Count is: 4
Count is: 5

Beispiel 2: Summe von Zahlen

Versuchen wir etwas Praktischeres. Wir verwenden eine While-Schleife, um die Summe der Zahlen von 1 bis 10 zu berechnen:

let sum = 0;
let number = 1;

while (number <= 10) {
sum += number;
number++;
}

console.log("Die Summe der Zahlen von 1 bis 10 ist: " + sum);

In diesem Beispiel:

  1. Initialisieren wir sum auf 0 und number auf 1.
  2. Die Schleife läuft so lange, bis number kleiner oder gleich 10 ist.
  3. In jeder Iteration.addieren wir die aktuelle number zu sum.
  4. Wir erhöhen number um 1.
  5. Nach dem Ende der Schleife geben wir die endgültige Summe aus.

Ausgabe:

Die Summe der Zahlen von 1 bis 10 ist: 55

JavaScript-Do...While-Schleife

Nun treffen wir die Do...While-Schleife – die etwas optimistischeren Cousine der While-Schleife. Es ist, als ob man sagt: "Lass uns das mindestens einmal machen, und dann schauen wir mal, ob wir weitermachen wollen."

Grundlegende Syntax

Hier ist die Struktur einer Do...While-Schleife:

do {
// auszuführender Code
} while (bedingung);

Der entscheidende Unterschied hier ist, dass der Codeblock mindestens einmal ausgeführt wird, bevor die Bedingung überprüft wird.

Beispiel 3: Ratespiel

Erstellen wir ein einfaches Ratespiel mit einer Do...While-Schleife:

let secretNumber = 7;
let guess;

do {
guess = prompt("Rate eine Zahl zwischen 1 und 10:");
guess = Number(guess);

if (guess === secretNumber) {
console.log("Glückwunsch! Du hast es erraten!");
} else if (guess < secretNumber) {
console.log("Zu niedrig! Versuche es nochmal.");
} else {
console.log("Zu hoch! Versuche es nochmal.");
}
} while (guess !== secretNumber);

In diesem Beispiel:

  1. Setzen wir eine secretNumber und initialisieren guess.
  2. Die Schleife fordert den Benutzer auf, eine Zahl zu raten und konvertiert sie in einen numerischen Typ.
  3. Wir überprüfen, ob die Rate korrekt, zu niedrig oder zu hoch ist und geben Feedback.
  4. Die Schleife läuft so lange weiter, bis die Rate nicht mehr der Geheimzahl entspricht.
  5. Selbst wenn der Benutzer auf den ersten Versuch correct errät, wird der Schleifenkörper mindestens einmal ausgeführt.

JavaScript-While vs. For-Schleifen

Nun, da wir While-Schleifen erforscht haben, könntet ihr euch fragen: "Wann sollte ich eine While-Schleife anstelle einer For-Schleife verwenden?" Great question! Lassen wir uns vergleichen.

Wann man While-Schleifen verwendet

While-Schleifen werden typischerweise verwendet, wenn:

  1. Du im Voraus nicht weißt, wie oft die Schleife laufen soll.
  2. Die Fortsetzung der Schleife von einer Bedingung abhängt, die während der Ausführung der Schleife geändert werden könnte.

Wann man For-Schleifen verwendet

For-Schleifen werden oft bevorzugt, wenn:

  1. Du genau weißt, wie oft die Schleife laufen soll.
  2. Du über eine Sequenz (wie ein Array) mit einer bekannten Länge iterierst.

Beispiel 4: Erste Potenz von 2, die größer als 1000 ist

Verwenden wir eine While-Schleife, um die erste Potenz von 2 zu finden, die größer als 1000 ist:

let power = 0;
let result = 1;

while (result <= 1000) {
power++;
result = Math.pow(2, power);
}

console.log(`Die erste Potenz von 2, die größer als 1000 ist 2^${power} = ${result}`);

In diesem Fall ist eine While-Schleife perfekt, weil wir im Voraus nicht wissen, wie viele Iterationen wir benötigen.

Methoden-Tabelle

Hier ist eine praktische Tabelle, die die Methoden zusammenfasst, die wir besprochen haben:

Schleifentyp Syntax Verwendungszweck
while while (bedingung) { ... } Wenn die Anzahl der Iterationen unbekannt ist
do...while do { ... } while (bedingung); Wenn du die Schleife mindestens einmal ausführen möchtest
for for (init; bedingung; update) { ... } Wenn die Anzahl der Iterationen bekannt ist

Denkt daran, die richtige Schleife zu wählen, ist wie das richtige Werkzeug für einen Job auswählen. Mit der Übung werdet ihr eine Intuition dafür entwickeln, welche in verschiedenen Szenarien am besten passt.

Und das war's, meine codenden Lehrlinge! Wir haben die Ins und Outs der While-Schleifen in JavaScript durchlaufen. Denkt daran, Schleifen sind wie Karussells im Spielplatz der Programmierung – sie drehen sich weiter, bis es Zeit ist, anzuhalten. Übt weiter, und bald werdet ihr die Meister der Schleifen in eurem Coding-Universum sein!

Credits: Image by storyset