Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

// B3.3 · ca. 30 Min. · Einstieg

for, while und for...of

Nach dieser Lektion wiederholen Sie Code mit einer zählenden for-Schleife, mit while und do...while, gehen mit for...of durch Arrays und Strings und schreiben Schleifen, die enden, ohne einen Schritt zu viel.

Lektion 3 von 5 in B3 Kontrollfluss und Schleifen

Danach können Sie

  • Eine zählende for-Schleife und eine while- oder do...while-Schleife schreiben und verfolgen, wie oft jede läuft
  • Mit for...of durch Arrays und Strings gehen und wissen, dass for...in nicht für Arrays gedacht ist
  • Off-by-one-Fehler und Schleifen ohne Ende erkennen und jede Schleife enden lassen

  1. Aufwärmen · Aufgabe 1 von 7

    Zum Aufwärmen: Welche Schleife führt ihren Block immer mindestens einmal aus, auch wenn ihre Bedingung von Anfang an falsch ist?

  2. Vorhersagen · Aufgabe 2 von 7

    Sagen Sie es vorher, bevor Sie weiterlesen: Was gibt dieser Code aus?

    const colors = ["red", "green", "blue"];
for (let i = 0; i < colors.length; i++) {
  console.log(i, colors[i]);
}

  3. Üben · Aufgabe 3 von 7

    Ergänzen Sie das Schlüsselwort so, dass die Schleife die Buchstaben a, b und c ausgibt, einen pro Zeile.

    for (const letter ____ "abc") {
  console.log(letter);
}
    for (const letter "abc") {

  4. Üben · Aufgabe 4 von 7

    Verfolgen Sie die Schleife: Was gibt dieser Code aus?

    let total = 1;
let steps = 0;
while (total < 20) {
  total = total * 2;
  steps++;
}
console.log(total, steps);

  5. Üben · Aufgabe 5 von 7

    Jede Schleife läuft dreimal. Ordnen Sie jedem Schleifenkopf die Werte zu, die i annimmt.

  6. Denksport · Aufgabe 6 von 7

    Knobelaufgabe. Die Bedingung n < 5 ist von Anfang an falsch. Was gibt dieser Code aus?

    let n = 10;
do {
  console.log(n);
  n++;
} while (n < 5);
console.log("end", n);

  7. Anwenden · Aufgabe 7 von 7

    Kleine Aufgabe. Schreiben Sie einen Raketen-Countdown: eine for-Schleife, die 5, 4, 3, 2 und 1 ausgibt, eine Zahl pro Zeile, danach Liftoff!. Geben Sie dann mit for...of über den String "go" diesen in Großbuchstaben aus, mit einem Leerzeichen nach jedem Buchstaben und am Ende gekürzt: G O. Zeigen Sie vor dem Ausführen in jeder Schleife auf die Zeile, die sie ihrem Ende näherbringt.

    Prüfen Sie Ihr Ergebnis anhand dieser Liste

Selbst programmieren

Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.

Ausgearbeitetes Beispiel

Ein Kassenbon

Dieses Programm arbeitet einen Warenkorb mit jeder Art von Schleife ab. for...of addiert die Preise, eine zählende for-Schleife nummeriert die Artikel, eine while-Schleife rechnet aus, wie viele Wochen man mit 3 EUR pro Woche sparen muss, und for...of über einen String stempelt den Bon. Führen Sie es aus, ergänzen Sie dann einen Preis in der Liste oder ändern Sie die wöchentliche Sparrate, und sagen Sie die Zeilen vorher, bevor Sie es erneut ausführen.

main.js

// Work through a basket with three kinds of loop.
const prices = [2.5, 4, 1.25, 3];
const word = "paid";

let total = 0;
for (const price of prices) {
  total += price;
}
console.log("Items:", prices.length, "Total:", total);

for (let i = 0; i < prices.length; i++) {
  console.log(`Item ${i + 1}: ${prices[i]} EUR`);
}

let saved = 0;
let weeks = 0;
while (saved < total) {
  saved += 3;
  weeks++;
}
console.log("Saving 3 EUR a week takes", weeks, "weeks");

let stamp = "";
for (const letter of word) {
  stamp += letter.toUpperCase() + ".";
}
console.log(stamp);

Ausführen mit

node main.js

Ausgabe

Items: 4 Total: 10.75
Item 1: 2.5 EUR
Item 2: 4 EUR
Item 3: 1.25 EUR
Item 4: 3 EUR
Saving 3 EUR a week takes 4 weeks
P.A.I.D.
  • for...of reicht jeden Preis der Reihe nach weiter; total += price addiert ihn zur laufenden Summe.
  • i beginnt bei 0, weil Positionen bei 0 beginnen, also ist die Artikelnummer i + 1.
  • Die while-Schleife endet, sobald saved, 12, nicht mehr unter 10.75 liegt: nach vier Wochen.
  • for...of über einen String liefert ein Zeichen pro Durchlauf.
Ändern und ausführen

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Übungen

Übung 1 von 2

Jeden Gast begrüßen

Das Programm soll jeden Gast auf der Liste begrüßen und dann die Zahl der Gäste ausgeben: Welcome, Ada!, Welcome, Grace!, Welcome, Linus! und 3 guests. Es überspringt Ada und begrüßt stattdessen jemanden namens undefined. Korrigieren Sie Start und Bedingung der for-Schleife und lassen Sie die Liste unverändert.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    Positionen in einem Array beginnen bei 0. Bei welcher Position beginnt die Schleife?

  2. Hinweis 2

    guests.length ist 3, die letzte Position aber 2. Was liefert guests[3]?

  3. Hinweis 3

    Beginnen Sie mit let i = 0 und lassen Sie die Schleife laufen, solange i < guests.length.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

const guests = ["Ada", "Grace", "Linus"];

for (let i = 0; i < guests.length; i++) {
  console.log(`Welcome, ${guests[i]}!`);
}
console.log(`${guests.length} guests`);
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

const guests = ["Ada", "Grace", "Linus"];

for (let i = 1; i <= guests.length; i++) {
  console.log(`Welcome, ${guests[i]}!`);
}
console.log(`${guests.length} guests`);

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';

const lines = async () => (await runMain()).trimEnd().split('\n');

test('begrüßt zuerst Ada', async () => {
  const got = await lines();
  assert.equal(got[0], 'Welcome, Ada!', `die erste Zeile ist ${JSON.stringify(got[0])}, erwartet: "Welcome, Ada!"`);
});

test('begrüßt niemanden namens undefined', async () => {
  const got = await lines();
  assert.ok(!got.includes('Welcome, undefined!'), `das Programm gab ${JSON.stringify(got)} aus`);
});

test('begrüßt alle drei Gäste und zählt sie dann', async () => {
  const got = await lines();
  assert.deepEqual(got, ['Welcome, Ada!', 'Welcome, Grace!', 'Welcome, Linus!', '3 guests'], `das Programm gab ${JSON.stringify(got)} aus`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Übung 2 von 2

Zählen und halbieren

Schreiben Sie zwei Schleifen fertig. Zählen Sie zuerst mit for...of, wie oft der Buchstabe a in word vorkommt, sodass das Programm a appears 3 times ausgibt. Halbieren Sie dann mit einer while-Schleife value (teilen Sie es durch 2), bis es unter 1 liegt, und zählen Sie jede Halbierung, sodass das Programm 7 halvings ausgibt. Achten Sie darauf, dass Ihre while-Schleife value in jedem Durchlauf ändert.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    for (const letter of word) liefert b, a, n, a, n, a. Darin kann ein if letter === "a" prüfen und count um 1 erhöhen.

  2. Hinweis 2

    Die while-Bedingung sagt, wann es weitergeht: while (value >= 1).

  3. Hinweis 3

    Im while-Block bringen value = value / 2; und halvings++; die Schleife in jedem Durchlauf ihrem Ende näher.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

const word = "banana";
let count = 0;
for (const letter of word) {
  if (letter === "a") {
    count++;
  }
}
console.log(`a appears ${count} times`);

let value = 100;
let halvings = 0;
while (value >= 1) {
  value = value / 2;
  halvings++;
}
console.log(`${halvings} halvings`);
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

const word = "banana";
let count = 0;
// Count each "a" in word with for...of.

console.log(`a appears ${count} times`);

let value = 100;
let halvings = 0;
// Halve value with a while loop until it is below 1, counting the halvings.

console.log(`${halvings} halvings`);

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';

const lines = async () => (await runMain()).trimEnd().split('\n');

test('zählt den Buchstaben a in banana', async () => {
  const got = await lines();
  assert.equal(got[0], 'a appears 3 times', `die erste Zeile ist ${JSON.stringify(got[0])}, erwartet: "a appears 3 times"`);
});

test('halbiert 100, bis es unter 1 liegt', async () => {
  const got = await lines();
  assert.equal(got[1], '7 halvings', `die zweite Zeile ist ${JSON.stringify(got[1])}, erwartet: "7 halvings"`);
});

test('gibt genau zwei Zeilen aus', async () => {
  const got = await lines();
  assert.equal(got.length, 2, `das Programm gab ${got.length} Zeile(n) aus, erwartet: 2`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Häufige Fehler

const als Zähler einer for-Schleife

for (const i = 0; i < 3; i++) {
  console.log(i);
}

Was Node.js ausgibt

TypeError: Assignment to constant variable.

Warum, und die Lösung

Der erste Durchlauf klappt und gibt 0 aus, dann versucht i++, der Konstante i einen neuen Wert zu geben, und das Programm stoppt. Eine zählende for-Schleife ändert ihren Zähler, deklarieren Sie ihn also mit let: for (let i = 0; i < 3; i++). In for...of ist const richtig, weil jeder Durchlauf eine neue Variable bekommt.

Ein Durchlauf zu viel

const items = ["tea", "milk", "bread"];
for (let i = 0; i <= items.length; i++) {
  console.log(items[i].toUpperCase());
}

Was Node.js ausgibt

TypeError: Cannot read properties of undefined (reading 'toUpperCase')

Warum, und die Lösung

Die drei Einträge werden ausgegeben, dann läuft die Schleife noch einmal mit i = 3. items[3] gibt es nicht, es ist also undefined, und undefined hat kein toUpperCase. Die letzte Position ist length - 1, die Bedingung muss also i < items.length lauten. Oder nehmen Sie for...of, das keine Positionen hat, die man falsch setzen kann.

for...of über eine Zahl

for (const n of 3) {
  console.log(n);
}

Was Node.js ausgibt

TypeError: 3 is not iterable

Warum, und die Lösung

for...of braucht etwas mit Werten, durch die es gehen kann, etwa ein Array oder einen String. Eine Zahl hat keine, sie ist also nicht iterierbar. Um etwas dreimal zu wiederholen, nehmen Sie eine zählende Schleife: for (let n = 0; n < 3; n++).

JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode

Abschlussquiz

5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.

Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.

Problem melden

Etwas ist falsch oder unklar? Beschreiben Sie es kurz, dann wird es geprüft und korrigiert.

#

Mindestens 20 Zeichen.

Nur, wenn Sie eine Antwort wünschen.

Kernideen

for zählt, while wartet

for (let i = 0; i < 3; i++) { … } hat drei Teile. Der Start, let i = 0, läuft einmal. Die Bedingung, i < 3, wird vor jedem Durchlauf geprüft. Die Aktualisierung, i++, erhöht i nach jedem Durchlauf um 1. Der Block läuft also für i = 0, 1 und 2: dreimal. while (bedingung) { … } hat nur die Bedingung: Nehmen Sie es, wenn Sie vorher nicht wissen, wie viele Durchläufe nötig sind, etwa beim Sparen, bis ein Preis erreicht ist. do { … } while (bedingung); prüft nach dem Block, also läuft sein Block immer mindestens einmal.

for...of geht durch die Werte

for (const item of list) { … } liefert Ihnen jeden Eintrag eines Arrays der Reihe nach, ohne Zähler, den man falsch setzen könnte. Es funktioniert auch mit Strings, Zeichen für Zeichen: for (const ch of "hey") liefert h, e und y. const ist hier richtig, weil jeder Durchlauf eine neue Variable bekommt. Brauchen Sie auch die Position i, nehmen Sie eine zählende for-Schleife. Es gibt außerdem for...in, das durch die Namen der Eigenschaften eines Objekts geht. Für Arrays ist es nicht gedacht: Es liefert die Positionen als Strings, etwa "0", und kann zusätzliche Eigenschaften enthalten.

Um eins daneben, und Schleifen ohne Ende

Ein Array mit 3 Einträgen hat die Positionen 0, 1 und 2, und seine Länge ist 3. Eine Schleife über Positionen beginnt also bei 0 und läuft, solange i < list.length. Schreiben Sie i <= list.length, liest der letzte Durchlauf list[3], und das ist undefined: ein Off-by-one-Fehler. Eine Schleife endet erst, wenn ihre Bedingung falsch wird. Bewegt nichts im Block sie dorthin, etwa ein while, dessen Zähler sich nie ändert, läuft die Schleife ewig, und Seite oder Programm frieren ein. Suchen Sie vor dem Ausführen die Zeile, die ändert, was die Bedingung prüft.

Quellen

Zuletzt geprüft am 1. Oktober 2026