Javascript if / else oder switch

Die if / then / else Abfrage in Javascript erfolgt wie folgt:

if (Bedingung) { Auszuführende Aktion};

If-Else vs. Switch Case in JavaScript – Welches ist besser?

JavaScript ist seit fast 30 Jahren eine beliebte Programmiersprache. Ob für Webanwendungen, mobile Anwendungen, Backend-Dienste oder sogar Desktop-Anwendungen – JavaScript hat tiefe Wurzeln.

Ein grundlegendes Programmierkonzept ist Kontrollfluss und Entscheidungsfindung. Und es bezieht sich nicht nur auf JavaScript – Sie werden es in den meisten Programmiersprachen finden, mit denen Sie arbeiten.

In diesem Artikel lernen Sie zwei grundlegende Techniken zur Steuerung des Kontrollflusses in JavaScript kennen: if-else und switch-case. Viele von Ihnen kennen wahrscheinlich ihre Konstrukte und Verwendungen. Der Schwerpunkt dieses Artikels liegt jedoch auf einem Vergleich der beiden Techniken, damit Sie am Ende wissen, welche für jeden Anwendungsfall die richtige ist.

In JavaScript wird Ihr Code Zeile für Zeile von der ersten bis zur letzten Zeile der JavaScript-Datei ausgeführt. Diese Reihenfolge der Codeausführung durch den JavaScript-Interpreter wird als Kontrollfluss bezeichnet.

Ihr Programm kann abhängig von einer oder mehreren Bedingungen Änderungen im Ausführungsfluss erfordern. Diese Bedingungen bestimmen, ob eine Reihe von Anweisungen in der JavaScript-Datei ausgeführt werden soll oder nicht.

Sehen wir uns das folgende Beispiel einer JavaScript-Datei (some.js) an:

KONTROLLFLUSS

Die Datei enthält 12 Codezeilen. Sobald die Datei in die JavaScript-Umgebung geladen ist, beginnt der Interpreter die Ausführung ab Zeile 1 und führt sie Zeile für Zeile aus. In Zeile 4 trifft der Interpreter auf eine Kontrollanweisung, die es ihm ermöglicht, Zeile 5 entweder auszuführen oder zu überspringen. In unserem Fall wird die Ausführung von Zeile 5 übersprungen.

Die Steuerung springt also zu Zeile 6, führt jede Zeile aus und fährt mit Zeile 9 fort. Anschließend trifft sie auf eine weitere Kontrollanweisung, die Zeile 10 überspringt, die Ausführung ab Zeile 11 startet und mit der letzten Zeile, Zeile 12, endet.

In JavaScript gibt es zwei wichtige Kontrollanweisungen, die Sie kennen sollten:

if und if-else

switch-case

Betrachten wir sie zunächst anhand von Beispielen, um zu verstehen, wie sie den Kontrollfluss der Codeausführung beeinflussen.

Kontrollfluss mit dem if-else-Block handhaben

Das if-Schlüsselwort und die Kombination der if-else-Schlüsselwörter helfen uns, Kontrollanweisungen im Codeausführungsfluss zu erstellen. Mit if wird ein Codeblock nur ausgeführt, wenn eine Testbedingung erfüllt ist. Eine erfüllte Bedingung gibt „true“ zurück, eine fehlgeschlagene Bedingung „false“.

Nehmen wir ein Beispiel: Wenn du den Bus erwischst, kommst du pünktlich nach Hause. Um dieses Szenario programmatisch zu schreiben, würdest du eine Bedingung für „catchingBus“ erstellen und diese dann in Klammern an das „if“ übergeben. Der mit dem „if“ verknüpfte Codeblock wird ausgeführt, wenn die Bedingung erfüllt ist.

let catchingBus = true;

// Hier ein Code…

if (catchingBus) {
console.log("Ich komme pünktlich nach Hause");
}

Im obigen Codeausschnitt ist das Ergebnis der Bedingung „catchingBus“ erfüllt. Daher wird der Code im „if“-Block ausgeführt und das Konsolenprotokoll „Ich komme pünktlich nach Hause“ ausgeführt. Wenn du den Wert der Bedingung auf „false“ änderst, wird der „if“-Block übersprungen. In solchen Fällen möchtest du möglicherweise einen alternativen Anwendungsfall behandeln – füge also einen „else“-Block zusammen mit dem „if“ hinzu.

Im folgenden Codeausschnitt haben wir sowohl „if“ als auch „else“. In diesem Fall ist die Bedingung falsch. Der else-Block wird ausgeführt und „Ich komme zu spät nach Hause“ wird in der Konsole protokolliert.

let catchingBus = false;

if (catchingBus) {
console.log("Ich komme pünktlich nach Hause");
} else {
console.log("Ich komme zu spät nach Hause");
}

Für komplexe Probleme können mehrere if-else-Verknüpfungen erforderlich sein. Nehmen wir ein Beispiel für ein Bewertungssystem. Bei einer Punktzahl von 90 oder mehr erhältst du die Note 1, bei 80 oder mehr eine 2 und bei 70 oder mehr eine 3, andernfalls verlierst du die Prüfung.

Schreiben wir das entsprechende Programm mithilfe der if-else-Verknüpfung. Da wir mehrere if-else-Verknüpfungen haben,

Kontrollfluss mit der Switch-Case-Anweisung

If-else eignet sich hervorragend zum Prüfen mehrerer möglicher Bedingungen. Mit Switch-Case können Sie jedoch auch mehrere Bedingungen basierend auf einem einzelnen Wert verarbeiten.

switch(value) {
case "case 1": // tue etwas
case "case 2": // tue etwas
case "case 3": // tue etwas
case "case 4": // tue etwas
default: // tue etwas
}

Im Gegensatz zum If-Block akzeptiert der Switch-Block einen Wert und prüft dann, ob ein passender Case für diesen Wert vorliegt. Bei einem passenden Case führt JavaScript den entsprechenden Codeblock aus. Mit einer Break-Anweisung wird der Switch-Block beendet. Trifft keiner der Cases zu, wird der Standardwert ausgeführt.

Im folgenden Codeausschnitt prüfen wir anhand eines Positionswerts auf eine Übereinstimmung. Der Positionswert wird also an die Switch-Anweisung übergeben. Wenn der Positionswert 1 ist, wird der erste Fall abgeglichen, da er für den Wert 1 passt. Dasselbe gilt für die Positionen 2, 3 und 4. Übergeben wir einen Positionswert, der nicht 1, 2, 3 oder 4 ist, wird der Standardblock ausgeführt.

let position = 10;

switch (position) {
case 1:
console.log("Drucke 1");
break;
case 2:
console.log("Drucke 2");
break;
case 3:
console.log("Drucke 3");
break;
case 4:
console.log("Drucke 4");
break;

default:
console.log("Keine Übereinstimmung gefunden");
}

Vergleich: if-else vs. switch-case

Nun vergleichen wir die beiden Ansätze. Neben den syntaktischen Unterschieden gibt es einige wichtige Unterschiede und Überlegungen, die Sie berücksichtigen sollten, bevor Sie sich für den einen oder anderen entscheiden:

Verwenden Sie if-else, wenn Sie komplexe logische Bedingungen verarbeiten müssen. Wenn Sie jedoch nach einem festen Wert wie Zahlen, Zeichenfolgen usw. suchen und diesen dann einem bestimmten Case-Wert zuordnen müssen, sollten Sie switch-case verwenden.

Viele if-else-Blöcke beeinträchtigen die Lesbarkeit des Codes. Bei switch-case sind Case-Beschriftungen deutlich einfacher zu lesen.

Zu viele if-else-Blöcke können die Leistung beeinträchtigen. In vielen JavaScript-Engines sind switch-Anweisungen optimiert. Sie verwenden eine Sprungtabelle, damit die JavaScript-Engine direkt zum richtigen Case springen kann, anstatt jede Bedingung einzeln auszuwerten.

Veranschaulichen wir dies anhand eines Beispiels. Sehen Sie sich den folgenden Codeausschnitt an, der mit if-else-Blöcken geschrieben wurde:

let value = 3;

if (value === 1) {
    console.log("One");
} else if (value === 2) {
    console.log("Two");
} else if (value === 3) {
    console.log("Three");
} else {
    console.log("Not found");
}

In diesem Fall werden alle if-else-Anweisungen nacheinander ausgeführt. Die JavaScript-Engine prüft jede Bedingung einzeln, bis eine Übereinstimmung gefunden wird.

Steht die passende Bedingung weiter unten, müssen alle darüber liegenden Bedingungen geprüft werden. Daher kann die if-else-Anweisung im Worst-Case-Szenario langsamer sein. Im obigen Beispiel prüft der JavaScript-Interpreter bei der Übereinstimmung mit dem Wert 3 die Werte 1 und 2, bevor er den Wert 3 prüft.

Dasselbe Ergebnis im Switch-Fall:

let value = 3;

switch (value) {
    case 1:
        console.log("One");
        break;
    case 2:
        console.log("Two");
        break;
    case 3:
        console.log("Three");
        break;
    default:
        console.log("Not found");
}

Die Engine springt direkt in Fall 3 und überspringt alle anderen unnötigen Prüfungen, wodurch sie schneller ist. Beachten Sie jedoch, dass dieser Leistungsunterschied bei wenigen Bedingungen vernachlässigbar ist.