Tutorials / JavaScript
JavaScript Anfänger

if/else - Bedingte Logik in JavaScript

if/else - Bedingte Logik

Mit bedingter Logik kann dein Programm Entscheidungen treffen. Je nach Situation wird unterschiedlicher Code ausgeführt – genau wie im echten Leben: “Wenn es regnet, nimm einen Schirm mit.”

Die Grundstruktur

if (bedingung) {
    // Code, der ausgeführt wird, wenn bedingung true ist
}

Einfaches Beispiel

const age = 20;

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

Die Bedingung age >= 18 wird ausgewertet:

  • Wenn true → Code wird ausgeführt
  • Wenn false → Code wird übersprungen

if…else

Für “wenn…dann…sonst” Situationen:

const age = 15;

if (age >= 18) {
    console.log("Willkommen!");
} else {
    console.log("Sorry, nur für Erwachsene.");
}

Praktisches Beispiel: Login-Check

const isLoggedIn = false;

if (isLoggedIn) {
    console.log("Willkommen zurück!");
    showDashboard();
} else {
    console.log("Bitte einloggen");
    showLoginForm();
}

if…else if…else

Für mehrere Bedingungen:

const score = 85;

if (score >= 90) {
    console.log("Note: A - Ausgezeichnet! 🌟");
} else if (score >= 80) {
    console.log("Note: B - Sehr gut! 👍");
} else if (score >= 70) {
    console.log("Note: C - Gut");
} else if (score >= 60) {
    console.log("Note: D - Ausreichend");
} else {
    console.log("Note: F - Nicht bestanden 😢");
}

Reihenfolge ist wichtig!

const temp = 35;

// ❌ Falsch - erste Bedingung ist immer true für warme Temps
if (temp > 0) {
    console.log("Es ist warm");
} else if (temp > 30) {
    console.log("Es ist heiß"); // Wird nie erreicht!
}

// ✅ Richtig - spezifischere Bedingung zuerst
if (temp > 30) {
    console.log("Es ist heiß! 🔥");
} else if (temp > 0) {
    console.log("Es ist warm");
} else {
    console.log("Es ist kalt! ❄️");
}

Bedingungen richtig schreiben

Vergleichsoperatoren

const x = 10;

x > 5    // größer als
x < 5    // kleiner als
x >= 10  // größer oder gleich
x <= 10  // kleiner oder gleich
x === 10 // gleich (Wert UND Typ)
x !== 5  // ungleich (Wert ODER Typ)

Logische Operatoren

const age = 25;
const hasLicense = true;
const isSober = true;

// UND (&&) - alle müssen true sein
if (age >= 18 && hasLicense && isSober) {
    console.log("Darfst fahren 🚗");
}

// ODER (||) - mindestens eines muss true sein
const isWeekend = false;
const isHoliday = true;

if (isWeekend || isHoliday) {
    console.log("Frei! 🎉");
}

// NICHT (!) - kehrt um
const isBlocked = false;

if (!isBlocked) {
    console.log("Zugriff erlaubt");
}

Kombinierte Bedingungen

const user = {
    age: 25,
    role: "admin",
    isActive: true
};

// Komplexe Prüfung
if ((user.age >= 18 && user.isActive) || user.role === "admin") {
    console.log("Zugriff auf Admin-Bereich erlaubt");
}

// Besser lesbar mit Zwischenvariablen
const isAdult = user.age >= 18;
const isActiveUser = user.isActive;
const isAdmin = user.role === "admin";

if ((isAdult && isActiveUser) || isAdmin) {
    console.log("Zugriff erlaubt");
}

Truthy und Falsy

JavaScript wertet auch nicht-boolesche Werte als true oder false aus:

// Falsy Werte (werden zu false)
if (false)     // false
if (0)         // false
if (-0)        // false
if ("")        // false
if (null)      // false
if (undefined) // false
if (NaN)       // false

// Truthy Werte (werden zu true)
if (true)      // true
if (1)         // true
if (-1)        // true
if ("hello")   // true
if ([])        // true (leeres Array!)
if ({})        // true (leeres Object!)

Praktische Anwendung

const username = "";

// Prüfen ob String leer ist
if (username) {
    console.log(`Hallo, ${username}!`);
} else {
    console.log("Bitte Username eingeben");
}

// Array prüfen
const items = [];

if (items.length) {  // 0 ist falsy
    console.log("Items vorhanden");
} else {
    console.log("Keine Items");
}

Verschachtelte if-Statements

const user = {
    isLoggedIn: true,
    role: "admin",
    permissions: ["read", "write", "delete"]
};

if (user.isLoggedIn) {
    console.log("User eingeloggt");

    if (user.role === "admin") {
        console.log("Admin-Rechte erkannt");

        if (user.permissions.includes("delete")) {
            console.log("Löschrechte vorhanden");
        }
    }
}

// Besser: Early Return Pattern (in Funktionen)
function checkAccess(user) {
    if (!user.isLoggedIn) {
        return "Nicht eingeloggt";
    }

    if (user.role !== "admin") {
        return "Keine Admin-Rechte";
    }

    if (!user.permissions.includes("delete")) {
        return "Keine Löschrechte";
    }

    return "Voller Zugriff";
}

Ternärer Operator

Kurzschreibweise für einfache if/else:

// Statt:
let message;
if (isLoggedIn) {
    message = "Willkommen!";
} else {
    message = "Bitte einloggen";
}

// Schreibe:
const message = isLoggedIn ? "Willkommen!" : "Bitte einloggen";

Wann verwenden?

// ✅ Gut - einfache Zuweisung
const status = age >= 18 ? "adult" : "minor";
const greeting = `Hallo, ${name || "Gast"}!`;

// ✅ Gut - in Template Literals
const html = `
    <div class="${isActive ? 'active' : 'inactive'}">
        ${count} ${count === 1 ? 'Item' : 'Items'}
    </div>
`;

// ❌ Vermeiden - zu komplex
const result = a > b ? (c > d ? "A" : "B") : (e > f ? "C" : "D");

// Besser als if/else schreiben

Kurzschluss-Auswertung

JavaScript wertet logische Ausdrücke “kurz” aus:

// && gibt den ersten falsy Wert oder den letzten Wert zurück
console.log(true && "Hallo");   // "Hallo"
console.log(false && "Hallo");  // false

// || gibt den ersten truthy Wert oder den letzten Wert zurück
console.log(false || "Default");  // "Default"
console.log("Wert" || "Default"); // "Wert"

Praktische Anwendung

// Bedingtes Ausführen mit &&
const isAdmin = true;
isAdmin && console.log("Admin-Panel anzeigen");

// Statt:
if (isAdmin) {
    console.log("Admin-Panel anzeigen");
}

// Default-Werte mit ||
const userColor = null;
const color = userColor || "blue";

// Besser: Nullish Coalescing ??
const count = 0;
console.log(count || 10);  // 10 (0 ist falsy!)
console.log(count ?? 10);  // 0 (nur null/undefined werden ersetzt)

Praktische Beispiele

Formular-Validierung

function validateForm(data) {
    const errors = [];

    if (!data.email) {
        errors.push("E-Mail ist erforderlich");
    } else if (!data.email.includes("@")) {
        errors.push("Ungültige E-Mail-Adresse");
    }

    if (!data.password) {
        errors.push("Passwort ist erforderlich");
    } else if (data.password.length < 8) {
        errors.push("Passwort muss mindestens 8 Zeichen haben");
    }

    if (data.password !== data.confirmPassword) {
        errors.push("Passwörter stimmen nicht überein");
    }

    if (errors.length > 0) {
        return { valid: false, errors };
    }

    return { valid: true, errors: [] };
}

Preis-Kalkulator

function calculatePrice(basePrice, userType, quantity) {
    let discount = 0;

    // Rabatt nach Usertyp
    if (userType === "vip") {
        discount = 0.2; // 20%
    } else if (userType === "member") {
        discount = 0.1; // 10%
    }

    // Mengenrabatt
    if (quantity >= 100) {
        discount += 0.15;
    } else if (quantity >= 50) {
        discount += 0.1;
    } else if (quantity >= 10) {
        discount += 0.05;
    }

    // Maximum 30% Rabatt
    if (discount > 0.3) {
        discount = 0.3;
    }

    const subtotal = basePrice * quantity;
    const discountAmount = subtotal * discount;
    const total = subtotal - discountAmount;

    return {
        subtotal,
        discount: discount * 100 + "%",
        discountAmount,
        total
    };
}

console.log(calculatePrice(10, "vip", 50));
// { subtotal: 500, discount: "30%", discountAmount: 150, total: 350 }

Spiellogik

function evaluateHand(cards) {
    const sum = cards.reduce((a, b) => a + b, 0);

    if (sum > 21) {
        return { status: "bust", message: "Überkauft! 💥" };
    }

    if (sum === 21) {
        return { status: "blackjack", message: "Blackjack! 🎰" };
    }

    if (sum >= 17) {
        return { status: "stand", message: "Gute Hand!" };
    }

    return { status: "hit", message: "Noch eine Karte?" };
}

Best Practices

1. Positive Bedingungen bevorzugen

// ❌ Schwer zu lesen
if (!isNotLoggedIn) { }

// ✅ Besser
if (isLoggedIn) { }

2. Early Return verwenden

// ❌ Tief verschachtelt
function process(user) {
    if (user) {
        if (user.isActive) {
            if (user.hasPermission) {
                // tue etwas
            }
        }
    }
}

// ✅ Flach mit Early Returns
function process(user) {
    if (!user) return;
    if (!user.isActive) return;
    if (!user.hasPermission) return;

    // tue etwas
}

3. Klammern immer verwenden

// ❌ Riskant
if (isAdmin)
    deleteUser();
    sendEmail(); // Wird IMMER ausgeführt!

// ✅ Sicher
if (isAdmin) {
    deleteUser();
    sendEmail();
}

4. Komplexe Bedingungen auslagern

// ❌ Schwer lesbar
if (user.age >= 18 && user.country === "DE" && !user.isBanned && user.hasVerifiedEmail) {
    // ...
}

// ✅ Lesbar
const canAccess =
    user.age >= 18 &&
    user.country === "DE" &&
    !user.isBanned &&
    user.hasVerifiedEmail;

if (canAccess) {
    // ...
}

Zusammenfassung

KonzeptVerwendung
ifEinzelne Bedingung
if...elseZwei Alternativen
if...else if...elseMehrere Alternativen
? :Einfache Zuweisung
&&Bedingtes Ausführen
||Default-Werte
??Null/Undefined Check

💡 Merke: Halte deine Bedingungen einfach und lesbar. Bei komplexer Logik: Zwischenvariablen verwenden und Early Returns nutzen!