Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

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

if, else und Truthiness

Nach dieser Lektion schreiben Sie if-, else-if- und else-Ketten, die den richtigen Zweig wählen, wissen, welche Werte als falsch gelten, und nutzen &&, ||, ! und ?? für Bedingungen und Standardwerte.

Lektion 1 von 5 in B3 Kontrollfluss und Schleifen

Anfang des Moduls

Danach können Sie

  • if-, else-if- und else-Ketten mit Blöcken schreiben und vorhersagen, welcher Zweig läuft
  • Die acht falsy-Werte von truthy-Werten wie "0", [] und {} unterscheiden
  • Vorhersagen, welchen Wert &&, ||, ! und ?? liefern, und für einen Standardwert || oder ?? wählen

  1. Aufwärmen · Aufgabe 1 von 7

    Zum Aufwärmen: Ein if behandelt manche Werte als falsch. Welche dieser Werte gelten als falsch? Wählen Sie alle zutreffenden aus.

    Wählen Sie alle zutreffenden aus.

  2. Vorhersagen · Aufgabe 2 von 7

    Sagen Sie es vorher, bevor Sie weiterlesen: Ein Formularfeld hat Ihnen den Text "0" geliefert. Was gibt dieser Code aus?

    const input = "0";
if (input) {
  console.log("got an answer");
} else {
  console.log("no answer");
}

  3. Üben · Aufgabe 3 von 7

    Die gespeicherte Lautstärke 0 ist eine echte Einstellung. Ergänzen Sie den Operator so, dass das Programm 0 ausgibt und 50 nur verwenden würde, wenn nichts gespeichert wäre (null oder undefined).

    const saved = 0;
const volume = saved ____ 50;
console.log(volume);
    const volume = saved 50;

  4. Üben · Aufgabe 4 von 7

    Es sind 25 Grad. Was gibt dieser Code aus?

    const temp = 25;
if (temp > 10) {
  console.log("mild");
} else if (temp > 20) {
  console.log("warm");
} else {
  console.log("cold");
}

  5. Üben · Aufgabe 5 von 7

    Ordnen Sie jedem Ausdruck den Wert zu, den er liefert.

  6. Denksport · Aufgabe 6 von 7

    Knobelaufgabe. Die Einkaufsliste ist leer. Was gibt dieser Code aus?

    const list = [];
if (list) {
  console.log("time to shop");
} else {
  console.log("nothing to buy");
}

  7. Anwenden · Aufgabe 7 von 7

    Kleine Aufgabe. Schreiben Sie eine Kinokasse: Kinder unter 6 zahlen nichts, unter 18 zahlen 6 EUR, alle anderen 10 EUR. Speichern Sie das Alter in einer Konstante und geben Sie den Preis mit einer Kette aus if, else if und else aus. Begrüßen Sie den Gast dann mit seinem Spitznamen oder mit "movie fan", wenn der Spitzname null ist. Probieren Sie die Alter 3, 6, 17, 18 und 40.

    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 Versandprüfer

Dieses Programm entscheidet, wie eine Bestellung verschickt wird. Eine else-if-Kette wählt den Versandpreis, ! macht aus false ein true, ein leerer Gutschein gilt als falsch, und ??, && und || füllen die übrigen Zeilen. Führen Sie es aus, setzen Sie dann total auf 60 oder 10, coupon auf "SPRING" oder note auf "ring twice", und sagen Sie jede Zeile vorher, bevor Sie es erneut ausführen.

main.js

// Decide how an order is shipped.
const total = 42.5;
const express = false;
const coupon = "";
const note = null;

if (total >= 50) {
  console.log("Shipping: free");
} else if (total >= 20) {
  console.log("Shipping: 2.99 EUR");
} else {
  console.log("Shipping: 4.99 EUR");
}

if (!express) {
  console.log("Delivery: standard");
}

if (coupon) {
  console.log("Coupon:", coupon);
} else {
  console.log("Coupon: none");
}

console.log("Note:", note ?? "no note");
console.log("Gift wrap:", total > 40 && "offered");
console.log("Label:", coupon || "STANDARD");

Ausführen mit

node main.js

Ausgabe

Shipping: 2.99 EUR
Delivery: standard
Coupon: none
Note: no note
Gift wrap: offered
Label: STANDARD
  • 42.5 besteht total >= 50 nicht, aber total >= 20, also läuft der zweite Block, und das else wird übersprungen.
  • express ist false, also ist !express true.
  • Der leere Gutschein ist falsy: Der else-Block läuft, und || ersetzt ihn durch "STANDARD".
  • total > 40 ist true, also geht && weiter und liefert seinen zweiten Wert, "offered".
Ä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

Den Wetterbericht reparieren

Der Bericht nennt 24 Grad mild und empfiehlt an einem trockenen Tag einen Schirm. Bringen Sie die else-if-Kette in die richtige Reihenfolge, sodass über 20 Grad It is warm. erscheint, und reparieren Sie die zweite Bedingung, die raining setzt, statt es zu lesen. Das Programm soll It is warm. und dann No umbrella needed. ausgeben.

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

    Die Kette hält bei der ersten wahren Bedingung an. Ist 24 > 10 wahr?

  2. Hinweis 2

    Setzen Sie die engere Prüfung, temperature > 20, an den Anfang und verschieben Sie It is mild. in das else if.

  3. Hinweis 3

    raining = true speichert true in raining. Um den Wert zu lesen, schreiben Sie if (raining).

Eine Lösung zeigen

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

// A weather report for one day.
const temperature = 24;
let raining = false;

if (temperature > 20) {
  console.log("It is warm.");
} else if (temperature > 10) {
  console.log("It is mild.");
} else {
  console.log("It is cold.");
}

if (raining) {
  console.log("Take an umbrella.");
} else {
  console.log("No umbrella needed.");
}
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

// A weather report for one day.
const temperature = 24;
let raining = false;

if (temperature > 10) {
  console.log("It is mild.");
} else if (temperature > 20) {
  console.log("It is warm.");
} else {
  console.log("It is cold.");
}

if (raining = true) {
  console.log("Take an umbrella.");
} else {
  console.log("No umbrella needed.");
}

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('gibt zwei Zeilen aus', async () => {
  const got = await lines();
  assert.equal(got.length, 2, `das Programm gab ${got.length} Zeile(n) aus, erwartet: 2`);
});

test('24 Grad sind warm', async () => {
  const got = await lines();
  assert.equal(got[0], 'It is warm.', `die erste Zeile ist ${JSON.stringify(got[0])}, erwartet: "It is warm."`);
});

test('ein trockener Tag braucht keinen Schirm', async () => {
  const got = await lines();
  assert.equal(got[1], 'No umbrella needed.', `die zweite Zeile ist ${JSON.stringify(got[1])}, erwartet: "No umbrella needed."`);
});

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

Standardwerte, die die Null behalten

Jemand hat die Lautstärke 0 und einen leeren Namen gespeichert, aber kein Farbschema. 0 ist eine echte Lautstärke und muss bleiben; ein leerer Name bedeutet keinen Namen und soll zu Guest werden. Ändern Sie die Operatoren so, dass das Programm volume: 0, dann name: Guest, dann theme: light ausgibt. Ändern Sie die gespeicherten Werte nicht.

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

    Führen Sie es zuerst aus: Welche Zeile ist falsch, und ist ihr gespeicherter Wert 0, "" oder undefined?

  2. Hinweis 2

    || ersetzt jeden falsy-Wert, auch 0. ?? ersetzt nur null und undefined.

  3. Hinweis 3

    Die Lautstärke braucht ??, der Name ||. Beim Schema funktioniert beides, denn undefined wird von beiden ersetzt.

Eine Lösung zeigen

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

// Settings saved by the user.
const savedVolume = 0;
const savedName = "";
const savedTheme = undefined;

const volume = savedVolume ?? 50;
const name = savedName || "Guest";
const theme = savedTheme ?? "light";

console.log("volume:", volume);
console.log("name:", name);
console.log("theme:", theme);
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

// Settings saved by the user.
const savedVolume = 0;
const savedName = "";
const savedTheme = undefined;

const volume = savedVolume || 50;
const name = savedName ?? "Guest";
const theme = savedTheme || "light";

console.log("volume:", volume);
console.log("name:", name);
console.log("theme:", theme);

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('behält die Lautstärke 0', async () => {
  const got = await lines();
  assert.equal(got[0], 'volume: 0', `die erste Zeile ist ${JSON.stringify(got[0])}, erwartet: "volume: 0"`);
});

test('ersetzt den leeren Namen durch Guest', async () => {
  const got = await lines();
  assert.equal(got[1], 'name: Guest', `die zweite Zeile ist ${JSON.stringify(got[1])}, erwartet: "name: Guest"`);
});

test('verwendet das helle Schema, wenn keines gespeichert ist', async () => {
  const got = await lines();
  assert.equal(got[2], 'theme: light', `die dritte Zeile ist ${JSON.stringify(got[2])}, erwartet: "theme: light"`);
});

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

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

elseif in einem Wort

const size = 8;
if (size > 10) {
  console.log("large");
} elseif (size > 5) {
  console.log("medium");
}

Was Node.js ausgibt

SyntaxError: Unexpected token '{'

Warum, und die Lösung

JavaScript kennt kein Schlüsselwort elseif: Es liest elseif (size > 5) als Aufruf von etwas namens elseif, und danach darf kein { folgen. Weil die Datei nicht gelesen werden kann, läuft keine Zeile. Schreiben Sie else if als zwei Wörter: } else if (size > 5) {.

Eine Bedingung ohne Klammern

const size = 8;
if size > 5 {
  console.log("big");
}

Was Node.js ausgibt

SyntaxError: Unexpected identifier 'size'

Warum, und die Lösung

Die Bedingung eines if muss in runden Klammern stehen: if (size > 5). Ohne sie erwartet JavaScript direkt nach if eine ( und hält beim Namen size an. Andere Sprachen erlauben die Form ohne Klammern, JavaScript nicht.

?? mit || gemischt, ohne Klammern

const saved = null;
const name = saved || undefined ?? "guest";
console.log(name);

Was Node.js ausgibt

SyntaxError: Unexpected token '??'

Warum, und die Lösung

JavaScript rät nicht, ob || oder ?? zuerst ausgewertet werden soll, und verbietet deshalb, die beiden (oder ?? und &&) ohne Klammern zu mischen. Die ganze Datei lädt dann nicht. Setzen Sie Klammern, die sagen, was Sie meinen: (saved || undefined) ?? "guest", oder verwenden Sie nur einen Operator.

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

Die erste wahre Bedingung gewinnt

if (bedingung) { … } führt den Block in geschweiften Klammern nur aus, wenn die Bedingung wahr ist; else { … } läuft, wenn sie es nicht ist. Weitere Prüfungen hängen Sie mit else if an: JavaScript prüft die Bedingungen von oben nach unten, führt den Block der ersten wahren aus und überspringt den ganzen Rest. Setzen Sie also die engste Prüfung an den Anfang: Steht if (points >= 50) über else if (points >= 90), erreichen 95 Punkte die zweite Prüfung nie. Ein elseif in einem Wort gibt es nicht, und die Bedingung steht immer in runden Klammern. Schreiben Sie immer die geschweiften Klammern: Ohne sie gehört nur die nächste einzelne Anweisung zum if.

Acht falsy-Werte, alles andere ist truthy

Eine Bedingung muss nicht true oder false sein: JavaScript wandelt jeden Wert in einen Boolean um, wenn es einen braucht. Genau acht Werte gelten als falsch, die falsy-Werte: false, 0, -0, 0n, "" (der leere String), null, undefined und NaN. Jeder andere Wert ist truthy, auch der String "0", der String "false", ein String mit einem Leerzeichen, das leere Array [] und das leere Objekt {}. if (list) ist also auch für eine leere Liste wahr; fragen Sie stattdessen if (list.length > 0). Boolean(wert) zeigt, als was ein Wert zählt.

&&, || und ?? liefern einen ihrer Werte

! liefert einen echten Boolean: !"" ist true, !"hi" ist false. && und || liefern einen ihrer beiden Werte, und sie hören auf, sobald das Ergebnis feststeht (Kurzschlussauswertung). a && b liefert a, wenn a falsy ist, sonst b: "Ada" && "admin" ist "admin", 0 && "admin" ist 0. a || b liefert a, wenn a truthy ist, sonst b: "" || "Guest" ist "Guest". Damit eignet sich || für Standardwerte, ersetzt aber auch 0 und "". a ?? b ersetzt nur null und undefined: 0 ?? 50 ist 0. ?? zusammen mit && oder || braucht Klammern, sonst lädt die Datei nicht.

Quellen

Zuletzt geprüft am 1. Oktober 2026