# 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:
```js
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:
```text
Du bist volljährig.
```
---
## Aufbau einer `if`-Anweisung
Eine `if`-Anweisung besteht aus drei Teilen:
```js
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:
```js
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.
```js
let temperatur = 12;
if (temperatur > 20) {
console.log("Es ist warm.");
}
console.log("Die Temperatur wurde geprüft.");
```
Die Ausgabe lautet:
```text
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.
```js
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:
```text
Du bist noch nicht wahlberechtigt.
```
Der Aufbau sieht allgemein so aus:
```js
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.
| Operator | Bedeutung | Beispiel |
|---|---|---|
| `===` | genau gleich | `farbe === "blau"` |
| `!==` | nicht gleich | `farbe !== "blau"` |
| `>` | größer als | `zahl > 10` |
| `<` | kleiner als | `zahl < 10` |
| `>=` | größer oder gleich | `alter >= 18` |
| `<=` | kleiner oder gleich | `punkte <= 100` |
Beispiel mit einem Textwert:
```js
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:
```js
let name = "Mira";
```
Ein einzelnes Gleichheitszeichen `=` **weist einen Wert zu**.
```js
name = "Sam";
```
Nun enthält die Variable `name` den Wert `"Sam"`.
Drei Gleichheitszeichen `===` **vergleichen Werte**:
```js
if (name === "Sam") {
console.log("Hallo Sam!");
}
```
Ein häufiger Anfängerfehler ist dieser:
```js
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.
```js
let istEingeloggt = true;
if (istEingeloggt) {
console.log("Willkommen zurück!");
} else {
console.log("Bitte melde dich an.");
}
```
Du musst nicht schreiben:
```js
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:
```js
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.
```js
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:
```text
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.
```js
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:
```js
let bestellwert = 35;
```
Nun wird der `else`-Block ausgeführt.
---
## Praktisches Beispiel: Passwort prüfen
Auch Texte lassen sich vergleichen:
```js
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:
```js
if (alter >= 18); {
console.log("Volljährig");
}
```
Der Codeblock wird dadurch immer ausgeführt — unabhängig von der Bedingung.
Richtig ist:
```js
if (alter >= 18) {
console.log("Volljährig");
}
```
---
### Text ohne Anführungszeichen
Textwerte müssen in Anführungszeichen stehen:
```js
let land = "Deutschland";
if (land === "Deutschland") {
console.log("Willkommen!");
}
```
Ohne Anführungszeichen würde JavaScript `Deutschland` als Variablennamen interpretieren:
```js
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:
```js
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.
Lösung anzeigen
```js
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.
Lösung anzeigen
```js
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.“
Lösung anzeigen
```js
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.