# Schleifen mit `while`
## Wiederholen, solange eine Bedingung wahr ist
Eine `while`-Schleife wiederholt Code, **solange** eine Bedingung `true` ergibt. Sie ist besonders nützlich, wenn du vorher nicht genau weißt, wie oft sich etwas wiederholen muss.
Zum Beispiel: Eine Zahl soll so lange erhöht werden, bis sie 5 erreicht hat.
```js
let zahl = 1;
while (zahl <= 5) {
console.log(zahl);
zahl = zahl + 1;
}
```
Die Konsole zeigt:
```text
1
2
3
4
5
```
## Der Aufbau einer `while`-Schleife
Eine `while`-Schleife besteht aus drei wichtigen Teilen:
```js
while (bedingung) {
// Code, der wiederholt wird
}
```
- `while` bedeutet auf Englisch „solange“.
- In den runden Klammern steht eine Bedingung.
- Der Code im Block `{ ... }` wird ausgeführt, solange die Bedingung wahr ist.
Schau dir dieses Beispiel Schritt für Schritt an:
```js
let punktzahl = 0;
while (punktzahl < 3) {
console.log("Noch nicht genug Punkte.");
punktzahl = punktzahl + 1;
}
console.log("Ziel erreicht!");
```
So läuft das Programm ab:
1. `punktzahl` startet bei `0`.
2. Die Bedingung `punktzahl < 3` ist wahr.
3. Der Text wird ausgegeben.
4. `punktzahl` wird um `1` erhöht.
5. Die Bedingung wird erneut geprüft.
6. Sobald `punktzahl` den Wert `3` hat, ist die Bedingung falsch.
7. Die Schleife endet.
Die Ausgabe lautet:
```text
Noch nicht genug Punkte.
Noch nicht genug Punkte.
Noch nicht genug Punkte.
Ziel erreicht!
```
> **Merke:** Die Bedingung wird *vor jedem Durchlauf* geprüft. Ist sie schon am Anfang `false`, wird der Schleifenblock kein einziges Mal ausgeführt.
## Einen Zähler verändern
Damit eine `while`-Schleife irgendwann endet, muss sich meist eine Variable innerhalb der Schleife verändern. Diese Variable nennt man oft **Zähler**.
```js
let zaehler = 1;
while (zaehler <= 4) {
console.log("Durchlauf Nummer: " + zaehler);
zaehler++;
}
```
`zaehler++` ist eine Kurzschreibweise für:
```js
zaehler = zaehler + 1;
```
Die Schleife gibt Folgendes aus:
```text
Durchlauf Nummer: 1
Durchlauf Nummer: 2
Durchlauf Nummer: 3
Durchlauf Nummer: 4
```
Du kannst einen Zähler auch rückwärts laufen lassen:
```js
let countdown = 5;
while (countdown > 0) {
console.log(countdown);
countdown--;
}
console.log("Los!");
```
`countdown--` bedeutet:
```js
countdown = countdown - 1;
```
Ausgabe:
```text
5
4
3
2
1
Los!
```
## Achtung vor Endlosschleifen
Wenn die Bedingung immer wahr bleibt, endet eine `while`-Schleife nie. Das nennt man **Endlosschleife**. Sie kann dazu führen, dass der Browser nicht mehr reagiert.
Dieses Beispiel ist problematisch:
```js
let zahl = 1;
while (zahl <= 5) {
console.log(zahl);
}
```
Die Variable `zahl` wird nie verändert. Sie bleibt immer `1`, deshalb ist `zahl <= 5` immer wahr.
Die richtige Version erhöht `zahl` innerhalb der Schleife:
```js
let zahl = 1;
while (zahl <= 5) {
console.log(zahl);
zahl++;
}
```
> **Prüffrage:** Wird mindestens eine Variable verändert, sodass die Bedingung irgendwann `false` werden kann?
Falls du versehentlich eine Endlosschleife startest, kannst du das Laden der Seite im Browser abbrechen oder den Tab schließen. Speichere deinen Code am besten regelmäßig.
## Ein praktisches Beispiel: Guthaben abbauen
Stell dir vor, ein Spielzug kostet 2 Punkte. Solange genügend Punkte vorhanden sind, darf weitergespielt werden.
```js
let guthaben = 10;
while (guthaben >= 2) {
console.log("Eine Runde wird gespielt.");
guthaben = guthaben - 2;
console.log("Verbleibendes Guthaben: " + guthaben);
}
console.log("Nicht genug Guthaben für eine weitere Runde.");
```
Die Bedingung lautet `guthaben >= 2`. Eine Runde startet also nur, wenn noch mindestens 2 Punkte verfügbar sind.
## Werte in einem Array mit `while` ausgeben
Auch Arrays kannst du mit einer `while`-Schleife durchgehen. Dafür benötigst du einen Index, der bei `0` beginnt.
```js
const farben = ["Rot", "Blau", "Grün"];
let index = 0;
while (index < farben.length) {
console.log(farben[index]);
index++;
}
```
Ausgabe:
```text
Rot
Blau
Grün
```
Dabei bedeutet:
- `farben.length`: Anzahl der Elemente im Array
- `farben[index]`: Element an der aktuellen Stelle
- `index++`: Zum nächsten Element wechseln
Die Bedingung `index < farben.length` ist wichtig. Der größte gültige Index liegt immer **eins unter** der Länge des Arrays.
Bei drei Elementen sind die gültigen Indizes `0`, `1` und `2`.
## `while` oder `for`?
Viele Aufgaben lassen sich sowohl mit `for` als auch mit `while` lösen.
Eine `for`-Schleife passt gut, wenn die Anzahl der Wiederholungen von Anfang an klar ist:
```js
for (let zahl = 1; zahl <= 5; zahl++) {
console.log(zahl);
}
```
Eine `while`-Schleife passt gut, wenn eine Bedingung entscheidet, wann Schluss ist:
```js
let temperatur = 18;
while (temperatur < 22) {
temperatur++;
console.log("Temperatur: " + temperatur);
}
```
Hier ist nicht die Anzahl der Durchläufe entscheidend, sondern das Ziel: Die Temperatur soll 22 erreichen.
| Verwende … | Wenn … |
|---|---|
| `for` | die Anzahl der Durchläufe klar feststeht |
| `while` | eine Bedingung bestimmt, wann die Wiederholung endet |
## Häufige Fehler
### Die Zählvariable wird nicht verändert
```js
let alter = 10;
while (alter < 18) {
console.log("Noch nicht volljährig.");
}
```
Diese Schleife endet nie. Die Lösung:
```js
let alter = 10;
while (alter < 18) {
console.log("Noch nicht volljährig.");
alter++;
}
```
### Die Bedingung ist von Beginn an falsch
```js
let versuche = 5;
while (versuche < 3) {
console.log("Neuer Versuch");
versuche++;
}
```
Hier erscheint keine Ausgabe, denn `5 < 3` ist direkt am Anfang falsch.
### Falscher Vergleichsoperator
```js
let nummer = 1;
while (nummer < 5) {
console.log(nummer);
nummer++;
}
```
Diese Schleife gibt nur `1` bis `4` aus. Soll auch die `5` erscheinen, brauchst du `<=`:
```js
let nummer = 1;
while (nummer <= 5) {
console.log(nummer);
nummer++;
}
```
## Übung: Gerade Zahlen ausgeben
Gib alle geraden Zahlen von 2 bis 10 mit einer `while`-Schleife aus.
**Erwartete Ausgabe:**
```text
2
4
6
8
10
```
```js
let zahl = 2;
while (zahl <= 10) {
console.log(zahl);
zahl = zahl + 2;
}
```
## Übung: Begrüßungen zählen
Schreibe eine Schleife, die dreimal „Hallo!“ in der Konsole ausgibt. Verwende dafür eine Variable namens `anzahl`.
```js
let anzahl = 1;
while (anzahl <= 3) {
console.log("Hallo!");
anzahl++;
}
```
## Das Wichtigste auf einen Blick
- Eine `while`-Schleife wiederholt Code, solange ihre Bedingung `true` ist.
- Die Bedingung wird vor jedem Durchlauf geprüft.
- Eine Zählvariable muss sich meistens innerhalb der Schleife ändern.
- Ohne Veränderung kann eine Endlosschleife entstehen.
- Verwende `while`, wenn nicht die feste Anzahl der Wiederholungen, sondern eine Bedingung im Mittelpunkt steht.
Im nächsten Schritt kannst du Bedingungen und Schleifen zusammen einsetzen, um Programme flexibel auf unterschiedliche Situationen reagieren zu lassen.