Bedingungen mit `if` und `else`

Lernziel

Mit if und else kann dein Programm Entscheidungen treffen. Es prüft eine Bedingung und führt je nach Ergebnis unterschiedlichen Code aus.

Beispielsweise:

• Ist ein Nutzer angemeldet?
• Ist eine Zahl größer als 10?
• Ist das Passwort korrekt?
• Regnet es gerade?

Am Ende dieser Lektion kannst du Bedingungen formulieren und damit den Ablauf deines Programms steuern.

Die Grundidee einer Bedingung

Eine Bedingung hat immer zwei mögliche Ergebnisse:

• true bedeutet: Die Aussage ist wahr.
• false bedeutet: Die Aussage ist falsch.

Schau dir dieses Beispiel an:

let alter = 20;

if (alter >= 18) {
  console.log("Du bist volljährig.");
}

JavaScript prüft hier:

Ist alter größer oder gleich 18?

Da alter den Wert 20 hat, ist die Bedingung wahr. Deshalb wird die Ausgabe innerhalb der geschweiften Klammern ausgeführt:

Du bist volljährig.

Aufbau einer if-Anweisung

Eine if-Anweisung besteht aus drei Teilen:

if (bedingung) {
  // Dieser Code läuft nur bei true.
}

Dabei gilt:

1. Nach if folgt die Bedingung in runden Klammern.
2. Der auszuführende Code steht in geschweiften Klammern.
3. Der Codeblock wird nur ausgeführt, wenn die Bedingung true ergibt.

Ein weiteres Beispiel:

let punktzahl = 85;

if (punktzahl >= 50) {
  console.log("Du hast bestanden.");
}

Die Punktzahl ist mindestens 50. Die Bedingung ist also wahr und die Meldung erscheint in der Konsole.

Was passiert bei false?

Wenn eine Bedingung falsch ist, überspringt JavaScript den Codeblock.

let temperatur = 12;

if (temperatur > 20) {
  console.log("Es ist warm.");
}

console.log("Die Temperatur wurde geprüft.");

Die Ausgabe lautet:

Die Temperatur wurde geprüft.

temperatur > 20 ist falsch. Deshalb erscheint „Es ist warm.“ nicht. Der Code nach dem if-Block wird jedoch ganz normal ausgeführt.

Alternative mit else

Mit else legst du fest, was passieren soll, wenn die Bedingung falsch ist.

let alter = 16;

if (alter >= 18) {
  console.log("Du darfst wählen.");
} else {
  console.log("Du bist noch nicht wahlberechtigt.");
}

Da alter kleiner als 18 ist, lautet die Ausgabe:

Du bist noch nicht wahlberechtigt.

Der Aufbau sieht allgemein so aus:

if (bedingung) {
  // Code für true
} else {
  // Code für false
}

Bei einer if-else-Anweisung wird genau einer der beiden Codeblöcke ausgeführt.

Vergleiche in Bedingungen

Für Bedingungen nutzt du häufig Vergleichsoperatoren.

Beispiel mit einem Textwert:

let lieblingsfarbe = "grün";

if (lieblingsfarbe === "grün") {
  console.log("Grün ist auch eine schöne Farbe.");
} else {
  console.log("Du magst eine andere Farbe.");
}

Wichtig: Verwende für Vergleiche normalerweise === statt ==.
=== prüft sowohl den Wert als auch den Datentyp und vermeidet dadurch viele unerwartete Fehler.

Der Unterschied zwischen = und ===

Diese beiden Zeichenfolgen sehen ähnlich aus, haben aber völlig unterschiedliche Aufgaben:

let name = "Mira";

Ein einzelnes Gleichheitszeichen = weist einen Wert zu.

name = "Sam";

Nun enthält die Variable name den Wert "Sam".

Drei Gleichheitszeichen === vergleichen Werte:

if (name === "Sam") {
  console.log("Hallo Sam!");
}

Ein häufiger Anfängerfehler ist dieser:

if (name = "Sam") {
  console.log("Hallo!");
}

Das ist kein Vergleich. JavaScript versucht hier, "Sam" erneut zuzuweisen. Verwende in Bedingungen daher immer ===, wenn du auf Gleichheit prüfen möchtest.

Mit Boolean-Werten arbeiten

Eine Variable vom Typ Boolean enthält bereits true oder false. Du kannst sie direkt in einer Bedingung verwenden.

let istEingeloggt = true;

if (istEingeloggt) {
  console.log("Willkommen zurück!");
} else {
  console.log("Bitte melde dich an.");
}

Du musst nicht schreiben:

if (istEingeloggt === true) {
  console.log("Willkommen zurück!");
}

Das funktioniert zwar, ist aber unnötig lang. Die kürzere Variante ist üblicher und besser lesbar.

Eine Bedingung verneinen

Mit ! drehst du einen Boolean-Wert um:

let istEingeloggt = false;

if (!istEingeloggt) {
  console.log("Bitte melde dich an.");
}

!istEingeloggt bedeutet: „ist nicht eingeloggt“.

Mehrere Anweisungen in einem Block

In geschweiften Klammern können beliebig viele Anweisungen stehen.

let kontostand = 120;

if (kontostand >= 50) {
  console.log("Zahlung möglich.");
  kontostand = kontostand - 50;
  console.log("Neuer Kontostand: " + kontostand);
} else {
  console.log("Nicht genug Guthaben.");
}

Die Ausgabe ist:

Zahlung möglich.
Neuer Kontostand: 70

Die geschweiften Klammern machen deutlich, welche Anweisungen zu if oder else gehören. Auch wenn ein Block nur aus einer Zeile besteht, solltest du sie verwenden. Das macht deinen Code übersichtlicher und sicherer.

Praktisches Beispiel: Rabatt prüfen

Stell dir einen kleinen Online-Shop vor. Ab einem Bestellwert von 50 erhält ein Kunde kostenlosen Versand.

let bestellwert = 64;

if (bestellwert >= 50) {
  console.log("Der Versand ist kostenlos.");
} else {
  console.log("Es fallen Versandkosten an.");
}

Ändere den Wert von bestellwert und beobachte, wie sich die Ausgabe verändert:

let bestellwert = 35;

Nun wird der else-Block ausgeführt.

Praktisches Beispiel: Passwort prüfen

Auch Texte lassen sich vergleichen:

let passwort = "sonne123";

if (passwort === "sonne123") {
  console.log("Zugang erlaubt.");
} else {
  console.log("Passwort ist falsch.");
}

In einer echten Anwendung würdest du Passwörter selbstverständlich nicht so direkt im Browser-Code speichern oder vergleichen. Für das Lernen zeigt dieses Beispiel aber gut, wie eine Text-Bedingung funktioniert.

Häufige Fehler

Semikolon direkt nach if

Dieses Semikolon beendet die Anweisung zu früh:

if (alter >= 18); {
  console.log("Volljährig");
}

Der Codeblock wird dadurch immer ausgeführt — unabhängig von der Bedingung.

Richtig ist:

if (alter >= 18) {
  console.log("Volljährig");
}

Text ohne Anführungszeichen

Textwerte müssen in Anführungszeichen stehen:

let land = "Deutschland";

if (land === "Deutschland") {
  console.log("Willkommen!");
}

Ohne Anführungszeichen würde JavaScript Deutschland als Variablennamen interpretieren:

if (land === Deutschland) {
  console.log("Willkommen!");
}

Das führt zu einem Fehler, wenn keine Variable namens Deutschland existiert.

Groß- und Kleinschreibung beachten

JavaScript unterscheidet genau zwischen Groß- und Kleinbuchstaben:

let benutzername = "Mira";

if (benutzername === "mira") {
  console.log("Gefunden");
} else {
  console.log("Nicht gefunden");
}

Die Bedingung ist hier falsch: "Mira" und "mira" sind unterschiedliche Texte.

Übung 1: Wetterhinweis

Erstelle eine Variable regnetEs mit dem Wert true. Gib bei Regen „Nimm einen Regenschirm mit.“ aus. Andernfalls soll „Heute brauchst du keinen Regenschirm.“ erscheinen.

let regnetEs = true;

if (regnetEs) {
  console.log("Nimm einen Regenschirm mit.");
} else {
  console.log("Heute brauchst du keinen Regenschirm.");
}

Übung 2: Altersprüfung

Erstelle eine Variable alter. Wenn die Person mindestens 16 Jahre alt ist, soll „Du darfst dich anmelden.“ ausgegeben werden. Andernfalls soll „Du bist noch zu jung.“ erscheinen.

let alter = 14;

if (alter >= 16) {
  console.log("Du darfst dich anmelden.");
} else {
  console.log("Du bist noch zu jung.");
}

Übung 3: Lieblingszahl

Erstelle eine Variable lieblingszahl. Prüfe, ob sie genau 7 ist.

• Bei 7: „Das ist auch meine Lieblingszahl!“
• Bei jeder anderen Zahl: „Eine interessante Wahl.“

let lieblingszahl = 7;

if (lieblingszahl === 7) {
  console.log("Das ist auch meine Lieblingszahl!");
} else {
  console.log("Eine interessante Wahl.");
}

Zusammenfassung

• Mit if führst du Code nur aus, wenn eine Bedingung wahr ist.
• Mit else definierst du eine Alternative für den Fall, dass sie falsch ist.
• Bedingungen ergeben immer true oder false.
• Für Gleichheitsvergleiche verwendest du ===.
• = weist Werte zu und ist kein Vergleich.
• Geschweifte Klammern zeigen klar, welcher Code zu einer Bedingung gehört.

Im nächsten Schritt lernst du, wie du mit else if mehr als zwei Fälle unterscheiden kannst.