for-Schleife – Iteration

for oder while?

while-Schleifen werden eingesetzt, wenn die Zahl der Durchläufe am Anfang nicht bekannt ist. Allerdings ziehen wir heute forEach und for in vor, da wir hierbei die Zahl der Loops nicht kümmern müssen und nicht in die schreckliche unendliche Schleife geraten.

Eine for-Anweisung in Javascript basiert auf einer Variablen für den Index und führt Anweisungen in abgezählten Schritten durch (Interation), bis eine Bedingung nicht mehr zutrifft.

for-Anweisung

Anders als die Varianten der while-Schleife wird die Variable innerhalb der Increment-Anweisung automatisch herauf- oder heruntergezählt. Im Anweisungsblock der for-Anweisung muss keine Anweisung für das sichere Ende der Schleife sorgen.

Alle Zutaten sind am Anfang der Schleife in einer Klammer gelistet. Das macht die for-Anweisung so gut lesbar.

for ( let i=0; i<=9; i++ ) {
          |     |    |
          |     |    +---> Schritt-Anweisung (Increment)
          |     |
          |     +---> Bedingung
          |
          +---> Anfangs-Ausdruck
       
   … Anweisungen: Mach was mit i …
}

Der Anfangs-Ausdruck initialisiert einen oder mehrere Zähler – fast immer auf einer Zählvariablen, z.B. let i=0;. Der Anfangs-Ausdruck erlaubt eine beliebig komplexe Syntax.

Die Bedingung legt fest, wann die Zielgröße der Zählvariablen erreicht ist, z.B. i<10;.

Die Increment-Anweisung erhöht die Zählvariable oder zählt sie herunter, z.B. i++ oder durch eine komplexe Funktion wie myFunction(i).

Die for-Anweisung wird nach dem folgenden Schema durchgeführt:

1. Der Anfangs-Ausdruck wird ausgeführt.
2. Die Bedingung wird geprüft (evaluiert). Wenn der Wert der Bedingung true ist, werden die Anweisungen in der for-Anweisung ausgeführt. Wenn der Wert der Bedingung false liefert, endet die for-Anweisung. Wenn keine Bedingung notiert ist, gilt die Bedingung als true.
3. Die Anweisungen werden durchgeführt.
4. Die Increment-Anweisung wird ausgeführt und die Kontrolle wird an Schritt 2 übergeben.

let text = '';
let zahl = 10;
for ( let i=0; i<=zahl; i++ ) {
   text = text + i + ' mal 3 ist ' + i*3 + '\n';
}
console.log (text);

0 mal 3 ist 0
1 mal 3 ist 3
2 mal 3 ist 6
…
9 mal 3 ist 27
10 mal 3 ist 30

Die Variable text speichert die Aufgabe und das Ergebnis jedes Laufs durch den Block der for-Anweisung. Die Variable zahl gibt vor, wie oft der for-Block aufgerufen wird.

for-Anweisungen lassen sich ineinander verschachteln.

for-Anweisungen beginnen nicht notwendigerweise mit dem Index 0. Das Increment (Schrittweite) muss nicht 1 sein. Ein Skript würde den Block der folgenden for-Anweisung vier Mal durchführen: für i=3, i=8, i=13 und i=18.

let index = 3;
let jump = 5; 
let i;
for ( i=index; i<23; i+=jump {   // oder i=i+jump
   // Anweisungen 
}

Zu weit gelaufen

Das passiert schnell: Die Iteration geht um 1 zu weit, weil sich ein Tippfehler eingeschlichen hat: i <= fruits.length statt i < fruits.length.

const fruits = [
	{name: "Erdbeeren"},
	{name: "Pfirsiche"},
	{name: "Kirschen"}
];

for (let i=0; i <= fruits.length; i++) {
	console.log (`i value: ${i} | Früchte:`, fruits[i])
}

[Log] i value: 0 | Früchte: – {name: "Erdbeeren"} 
[Log] i value: 1 | Früchte: – {name: "Pfirsiche"} 
[Log] i value: 2 | Früchte: – {name: "Kirschen"} 
[Log] i value: 3 | Früchte: – undefined 

Mit einem forEach-Loop wäre das nicht passiert.

for (let i) vs for (var i)

Mit der alten Variablen-Deklaration var i existiert die Variable i nach dem Ende des for-Loops weiter. Das macht keinen Sinn und kann zu Fehlern führen.

Mit for (let i=x …) existiert i nur innerhalb der for-Anweisung und ist damit die ideale Lösung für for-Schleifen.

Verschachtelte for-Schleifen

Zweidimensionale Arrays werden mit verschachtelten for-Schleifen durchlaufen.

let colors = [
 [30, 90, 120],
 [40, 50, 60],    
 [65, 75, 85]
];
let i;
for ( i=0; i<colors.length; i++ ) {
   for (let j=0; j<colors[i].length; j++) {
      console.log ("colors [i][j] "+" colors ["+i+"]["+j+"]" + colors [i][j]);
   }
}

Die innere for-Schleife gibt jedes Element des Arrays aus:

[Log]  colors [i][j]  colors [0][0] 30
[Log]  colors [i][j]  colors [0][1] 90
[Log]  colors [i][j]  colors [0][2] 120
…
[Log]  colors [i][j]  colors [2][0] 65
[Log]  colors [i][j]  colors [2][1] 75
[Log]  colors [i][j]  colors [2][2] 85

Dünnbesetzte Arrays – sparse Arrays

Der Index eines Arrays muss nicht fortlaufend sein.

let arr = ["Anton", "Berta", "Claudia"];
arr[24] = "Zara";

for (let i=0; i<arr.length; i++) {
    console.log ("i " + i + " " + arr[i]);
}

for (let key in arr ) {
    console.log ("key " +  arr[key]);
}

Die for-Schleife wird das Array 24 mal durchlaufen und an den nicht besetzten Stellen gibt arr[i] undefined zurück.

for in wird vier mal durchlaufen und gibt "Anton", "Berta", "Claudia" und "Zara" zurück, aber nicht unbedingt in dieser Reihenfolge. for-in iteriert über die Eigenschaften eines Objekts und Arrays sind letztendlich Objekte mit einem ganzzahligen Schlüssel. for-in klingt jetzt schneller, weil es nur vier mal durchlaufen wird, ist es aber nicht.

forEach

Seit ES5 gibt es forEach für Arrays. Das klassische for (i=0; i<length; i++) braucht eine Variable i als Zähler, muss auf die Anzahl der Array-Element prüfen und das aktuelle Element mit [i] ansprechen. Das läßt viel Raum für potentielle Vertipper (z.B. lenght statt length) und Fehler (z.B. i ).