JavaScript - Bedingte Operatoren

Hallo da draußen, zukünftige JavaScript-Zauberer! Heute tauchen wir ein in die magische Welt der bedingten Operatoren. Keine Sorge, wenn du vorher noch nie eine Zeile Code geschrieben hast – ich werde dein freundlicher Guide auf dieser aufregenden Reise sein. Also, hol dir deine virtuellen Zauberstäbe (Tastaturen) und lassen wir einige bedingte Zauber werfen!

Was sind bedingte Operatoren?

Stell dir vor, du bist eine Ampel. Deine Aufgabe ist es zu entscheiden, ob Autos fahren oder anhalten sollen. Genau das machen bedingte Operatoren in JavaScript – sie helfen unseren Programmen, basierend auf bestimmten Bedingungen, Entscheidungen zu treffen.

Der ternäre Operator: Das Schweizer Taschenmesser der bedingten Operatoren

Der Star unseres heutigen Programms ist der ternäre Operator. Er ist wie eine kompakte, super-effiziente if-else-Anweisung. Lassen wir es auseinandernehmen:

bedingung ? ausdruckWennWahr : ausdruckWennFalsch

Es ist, als würden wir eine Frage stellen:

• Wenn die Antwort ja (wahr) ist, mache das erste Ding.
• Wenn die Antwort nein (falsch) ist, mache das zweite Ding.

Syntax: Das Rezept für bedingte Magie

Schauen wir uns die Zutaten unserer bedingten Potion an:

1. bedingung: Dies ist unsere Frage. Regnet es? Ist der Benutzer angemeldet? Ist die Zahl gerade?
2. ?: Dies ist so, als würden wir sagen "dann..."
3. ausdruckWennWahr: Was zu tun ist, wenn die Bedingung wahr ist
4. :: Dies ist so, als würden wir sagen "sonst..."
5. ausdruckWennFalsch: Was zu tun ist, wenn die Bedingung falsch ist

Beispiel 1: Der Wetterentscheider

Lassen wir mit einem einfachen Beispiel beginnen. Wir erstellen ein Programm, das entscheidet, ob man einen Regenschirm mitnehmen soll, basierend auf dem Wetter.

let regnet = true;
let entscheidung = regnet ? "Nimm einen Regenschirm mit" : "Lass den Regenschirm zu Hause";
console.log(entscheidung);

Wenn du diesen Code ausführst, wird ausgegeben: "Nimm einen Regenschirm mit"

Lassen wir es auseinandernehmen:

• regnet ist unsere Bedingung. Sie ist auf true gesetzt.
• Wenn es regnet (regnet ist wahr), gibt unser Ausdruck "Nimm einen Regenschirm mit" zurück.
• Wenn es nicht regnet, würde er "Lass den Regenschirm zu Hause" zurückgeben.
• Wir speichern dieses Ergebnis in der Variablen entscheidung.

Versuche, regnet auf false zu ändern und sieh, was passiert!

Beispiel 2: Der Altersprüfer

Nun erstellen wir ein Programm, das überprüft, ob jemand alt genug zum Wählen ist.

let alter = 20;
let kannWählen = alter >= 18 ? "Ja, du kannst wählen!" : "Entschuldigung, du bist zu jung zum Wählen.";
console.log(kannWählen);

Dies gibt aus: "Ja, du kannst wählen!"

Hier ist, was passiert:

• Wir setzen alter auf 20.
• Unsere Bedingung ist alter >= 18 (ist das Alter größer oder gleich 18?).
• Wenn wahr, geben wir "Ja, du kannst wählen!" zurück.
• Wenn falsch, geben wir "Entschuldigung, du bist zu jung zum Wählen." zurück.

Versuche, das Alter auf 16 zu ändern und sieh, wie sich die Ausgabe ändert!

Beispiel 3: Der Notenvergeber

Lassen wir es ein bisschen komplexer werden. Wir erstellen ein Programm, das eine Note basierend auf einer Punktzahl vergibt.

let punkte = 85;
let note = punkte >= 90 ? 'A' :
punkte >= 80 ? 'B' :
punkte >= 70 ? 'C' :
punkte >= 60 ? 'D' : 'F';
console.log(`Deine Note ist: ${note}`);

Dies gibt aus: "Deine Note ist: B"

Wow, das sieht anders aus! Wir haben tatsächlich mehrere ternäre Operatoren hintereinander geschaltet. Es ist wie ein Wasserfall von Entscheidungen:

• Zuerst überprüfen wir, ob die Punkte 90 oder höher sind. Wenn ja, ist es eine 'A'.
• Wenn nicht, überprüfen wir, ob es 80 oder höher ist. Wenn ja, ist es eine 'B'.
• Dies setzt sich fort bis zu 'F' für alles unter 60.

Es ist eine mächtige Technik, aber verwende sie weise – zu viele Ketten können deinen Code schwer lesbar machen!

Umgang mit null-Werten: Der Null-Koaleszenz-Operator

Manchmal müssen wir mit Werten umgehen, die möglicherweise null oder undefined sind. Hier kommt der Null-Koaleszenz-Operator ins Spiel: ??

let benutzername = null;
let anzeigename = benutzername ?? "Gast";
console.log(`Willkommen, ${anzeigename}!`);

Dies gibt aus: "Willkommen, Gast!"

Hier ist, was passiert:

• Wenn benutzername null oder undefined ist, verwenden wir "Gast" stattdessen.
• Wenn benutzername einen Wert hat, verwenden wir diesen.

Es ist eine praktische Möglichkeit, Standardwerte bereitzustellen!

Die bedingte Operator-Cheat Sheet

Hier ist eine schnelle Referenztabelle der Operatoren, die wir gelernt haben:

Operator	Name	Zweck
?:	Ternärer Operator	Macht eine Entscheidung zwischen zwei Werten basierend auf einer Bedingung
??	Null-Koaleszenz-Operator	Bietet einen Standardwert, wenn mit null oder undefined gearbeitet wird

Denke daran, Übung macht den Meister! Versuche, deine eigenen Beispiele zu erstellen und experimentiere mit diesen Operatoren. Bevor du es weißt, wirst du ein ganzer Dirigent einer bedingten Oper in deinem Code!

Frohes Coden und möge deine bedingten Operatoren immer wahr sein (wenn du es willst)!

Credits: Image by storyset