while-Loops: while- und do while-Schleife

Javascript while und do while

while-Schleifen wiederholen Anweisungen solang die Bedingung true liefert. Wenn die Bedingung bei der ersten Abfrage nicht true liefert, wird die while-Schleife gar nicht erst ausgeführt. Javascript do … while wiederholt Anweisungen, bis eine Bedingung nicht mehr zutrifft – false wird – auf jeden Fall aber einmal.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Schleifen

Wie fast alle Programmiersprachen hat auch Javascript gut ein halbes Dutzend Variationen von Schleifen – Loops – an Bord. Die while-Schleife ist das Mutterschiff aller Loops.

while (Bedingung) {
   Anweisungen;
}

Wenn die Bedingung false liefert, endet die Ausführung der while-Schleife und die Kontrolle wird an die Anweisungen nach der while-Schleife übergeben.

while

Auf jeden Fall muss sichergestellt werden, dass die Bedingung false wird, ansonsten entsteht eine unendliche Schleife.

Diese Schleife wird vier Mal durchlaufen:

let x = 1; 
while (x < 5) {
    console.log (`Lauf ${x}`);
    x = x + 1; // oder kurz x++
}

Das Skript initialisiert die Variable x auf den Wert 1, bevor die while-Anweisung ausgeführt wird. Die while-Anweisung prüft die Bedingung (x < 5). Da 1 kleiner als 5 ist, durchläuft das Skript die while-Schleife ein erstes Mal.

Die letzte Anweisung im Block der while-Schleife zählt das x um eins herauf, so dass die Schleifenbedingung nach dem vierten Durchlauf nicht mehr zutrifft. In jeder while-Schleife muss die Schleifenbedingung geändert werden – ansonsten würde die Schleife endlos laufen oder der Browser abstürzen.

Das ist nur die einfachste Variante einer while-Schleife, denn die Bedingungen sind meist deutlich komplexer. Wenn obendrein mehr Anweisungen in der while-Schleife ausgeführt werden, verlagert man der Lesbarkeit zuliebe möglichst viele Anweisungen in eine Funktion, damit die whille-Schleife besser nachvollziehbar ist.

Javascript do … while

do {
   Anweisungen;
} while (Bedingung)

Die Anweisungen werden einmal durchgeführt, bevor die Bedingung geprüft wird. Wenn die Bedingung true liefert, werden die Anweisungen erneut ausgeführt. Am Ende jedes Laufs durch die Schleife wird die Bedingung abgefragt. Wenn die Bedingung false liefert, endet die Ausführung und die Kontrolle wird an die Anweisungen hinter der do ... while-Anweisungen übergeben.

Ein Beispiel für die do-while-Schleife ist der Algorithmus zur Berechnung des Binärwerts einer Dezimalzahl. Die dezimale Zahl wird durch 2 geteilt, der dabei verbleibende Rest (0 oder 1) gespeichert, und zwar bis der Dezimalwert 0 wird. Die Schleife muss auf jeden Fall einmal durchlaufen werden, wenn der Binärwert der Zahl 0 ausgerechnet werden soll.

Dezimal zu Binär
document.querySelector ("input#tobinary").addEventListener ("change", function () {
document.querySelector (".res").innerHTML = "";
document.querySelector (".binary").innerHTML = "";
let y = Math.abs(Number(this.value));
let x = 2;
let binary = "";

do {
	quotient = Math.floor(y/x);
	remainder = y % x;
	document.querySelector(".res").innerHTML += "<tr><td>" + y + "/2 = " + "</td><td>" + quotient + "</td><td>Rest " + remainder + "</td></tr>";
	binary += remainder;
	y = quotient;
} while (y != 0);
document.querySelector(".binary").innerHTML = "<p>Result " + binary.split("").reverse().join("") + "</p>";

Wäre natürlich viel einfacher, gleich zahl.toString(2) anzusetzen, um den Binärwert auszurechnen. toString() gibt ein Objekt – in diesem Fall die Zahl – als Sting / Zeichenkette zurück. Der optionale Parameter ist die Basis der Operation, also 2 in diesem Beispiel.

break und continue in while-Schleifen

Es gibt immer wieder Ausnahmesituationen, in denen es effizienter ist, die while-Schleife vor ihrem Ende zu verlassen:

  • Entweder um den Rest des Code-Blocks auszulassen und sofort den nächsten Schleifendurchlauf zu beginnen,
  • oder um die Schleife vorzeit abzubrechen.

Dafür stellt Javascript die Anweisungen break (Schleife sofort abbrechen) und continue (sofort wieder an den Anfang der Schleife) zur Verfügung.

while vs for-loop

Ein großer Teil der Aufgaben des Scriptings auf Webseiten dreht sich um Arrays bzw. Sammlungen (NodeLists) und Strings, deren Länge bekannt ist.

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

In einer for-Schleife wird die Variable i in der for-Anweisung deklariert – eine inline-Deklaration. Solche Variablen sind nur innerhalb des for-Loops sichtbar.