0Pricing
Frontend Academy · Lektion

Kontrollfluss: if, else, switch, for, while

Verzweigen Sie mit if/else und switch, iterieren Sie mit for und while und steuern Sie Schleifen mit break und continue.

Kontrollfluss: if, else, switch, for, while ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist der Kontrollfluss?

Der Kontrollfluss bestimmt, welcher Code ausgeführt wird und wie oft. JavaScript stellt Bedingungen (if/else, switch) und Schleifen (for, while, do/while) bereit, um den Ausführungspfad anhand von Bedingungen und Daten zu steuern.

if / else if / else

Die grundlegendste bedingte Anweisung. Die Bedingung in den Klammern wird als truthy/falsy ausgewertet. Mehrere Bedingungen lassen sich mit else if verketten. Das abschließende else dient als allgemeiner Fallback.

const score = 75;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('F');
}

Der ternäre Operator

Der ternäre Operator ist eine kompakte Inline-Variante von if/else: condition ? trueValue : falseValue. Verwenden Sie ihn für einfache Zuweisungen und JSX-Ausdrücke. Vermeiden Sie verschachtelte ternäre Operatoren – sie werden schnell unleserlich.

const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';

// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>

switch-Anweisung

switch vergleicht einen Wert mithilfe strikter Gleichheit mit mehreren Fällen. Verwenden Sie nach jedem Fall break, um Fall-through zu verhindern. default behandelt nicht übereinstimmende Werte.

const day = 'Monday';
switch (day) {
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend');
    break;
  case 'Monday':
    console.log('Start of work week');
    break;
  default:
    console.log('Weekday');
}

for-Schleife

Die klassische for-Schleife im C-Stil: Initialisierung; Bedingung; Inkrement. Sie eignet sich am besten für eine bekannte Anzahl von Wiederholungen oder zum Durchlaufen von Arrays über ihren Index.

for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

for...of-Schleife

for...of durchläuft die Werte jedes iterierbaren Objekts (Arrays, Strings, Maps, Sets). Sie ist übersichtlicher als eine indexbasierte for-Schleife, wenn Sie den Index nicht benötigen.

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const char of 'hello') {
  console.log(char); // h e l l o
}

for...in-Schleife

for...in durchläuft die aufzählbaren Eigenschaftsschlüssel eines Objekts. Verwenden Sie es nicht für Arrays – nutzen Sie stattdessen for...of oder Array-Methoden.

const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

while-Schleife

Die while-Schleife wird ausgeführt, solange ihre Bedingung truthy ist. Verwenden Sie sie, wenn die Anzahl der Wiederholungen im Voraus nicht bekannt ist – zum Beispiel, um Eingaben zu lesen, bis die Benutzerin oder der Benutzer einen gültigen Wert eingibt.

let attempts = 0;
let success = false;
while (!success && attempts < 3) {
  // try something
  attempts++;
  success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);

do...while-Schleife

do...while führt den Schleifenrumpf mindestens einmal aus, bevor die Bedingung geprüft wird. Das ist nützlich, wenn der Schleifenrumpf ausgeführt werden muss, bevor Sie die Abbruchbedingung auswerten können.

let input;
do {
  input = prompt('Enter a number:');
} while (isNaN(Number(input)));

break und continue

break beendet die aktuelle Schleife sofort. continue überspringt den Rest der aktuellen Iteration und fährt mit der nächsten fort. Beide funktionieren in for-, while- und do/while-Schleifen.

for (let i = 0; i < 10; i++) {
  if (i === 3) continue;  // skip 3
  if (i === 7) break;     // stop at 7
  console.log(i);         // 0 1 2 4 5 6
}

Kurzschlussauswertung

&& gibt den ersten falsy-Wert oder den letzten Wert zurück. || gibt den ersten truthy-Wert oder den letzten Wert zurück. ?? (Nullish-Coalescing) gibt die rechte Seite nur zurück, wenn die linke Seite null oder undefined ist.

const name = user && user.name;    // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000;  // 3000 only if port is null/undefined

Kurzer Test

Welche Schleife führt ihren Schleifenrumpf garantiert mindestens einmal aus?

Zusammenfassung: JavaScript-Kontrollfluss

if/else für Verzweigungen. Switch für mehrere einzelne Werte. for-Schleifen für eine bekannte Anzahl von Wiederholungen. for...of für iterierbare Objekte. while für eine unbekannte Anzahl von Wiederholungen. do...while für mindestens eine Ausführung. break beendet Schleifen. continue überspringt Iterationen. Kurzschlussoperatoren für kompakte Bedingungen.

Häufig gestellte Fragen

Ist die Lektion „Kontrollfluss: if, else, switch, for, while“ kostenlos?

Ja — der vollständige Text von „Kontrollfluss: if, else, switch, for, while“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Kontrollfluss: if, else, switch, for, while“?

Verzweigen Sie mit if/else und switch, iterieren Sie mit for und while und steuern Sie Schleifen mit break und continue. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Kontrollfluss: if, else, switch, for, while“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Variablen: let, const, var und Geltungsbereich
  2. Datentypen: string, number, boolean, null, undefined
  3. Funktionen: Deklarationen, Ausdrücke, Arrow Functions
  4. Kontrollfluss: if, else, switch, for, while
← Zurück zu Frontend Academy