Syntax des Tages: Short-circuit evaluation
Ganz allgemein: Was macht Short-circuit evaluation bzw. die Kurzschlussauswertung?
Short-circuit Evaluation ist eine Technik, die in vielen Programmiersprachen verwendet wird, um Ausdrücke effizienter auszuwerten. Sie kommt zum Einsatz, wenn eine logische Bedingung mit den Operatoren „und“ (&&) oder „oder“ (||) geprüft wird. Bei der Short-circuit Evaluation wird der Ausdruck so früh wie möglich ausgewertet, ohne unnötige Berechnungen durchzuführen. Zum Beispiel wird bei einem „und“-Operator (&&) der zweite Teil des Ausdrucks nur dann geprüft, wenn der erste Teil wahr ist, weil das Ergebnis sowieso wahr bleibt. Ähnlich wird bei einem „oder“-Operator (||) der zweite Teil nur dann überprüft, wenn der erste Teil falsch ist. Diese Optimierung spart Rechenleistung und kann sogar dazu beitragen, Fehler zu vermeiden, wenn der zweite Teil eines Ausdrucks nur dann ausgeführt werden soll, wenn der erste Teil zutrifft.
Und der Code oben?
Am häufigsten finden sich Kurzschlussauswertungen in normalen if-Abfragen, z.B. in folgender Form
if (a === 1 || b === 2 || c === 2)
doSomething()
Das heißt, trifft eine der Bedingungen in der if-Abfrage zu, dann führe die Funktion doSomething() aus. Dabei werden die Ausdrücke von links nach rechts ausgewertet.
Beim logischen Oder-Operator || muss der erste Ausdruck a === 1 falsy sein, damit der zweite Ausdruck b === 2 ausgewertet wird. Ist dieser auch falsy, wird der dritte ausgewertet. Sobald einer der Ausdrück true zurückgibt, ist die Bedingung erfüllt.
Der logische Und-Operator && muss truthy sein, damit der nachfolgende Ausdruck berücksichtigt wird. Und damit kommen wir zur Zeile der Einleitung zurück. Der Code variable && function() sagt, dass variable truthy sein muss, damit function() ausgeführt werden kann. variable muss dabei nicht zwingend einen boolschen Wert enthalten - die Bedingung wird erfüllt, wenn der Wert nicht null, undefined, false, 0, NaN oder "" (ein leerer String) ist.
Ein kleines Beispiel:
// Hole Daten von einer API
const result = await getData();
result && renderDataList()
In result wird der Response eines AJAX-Calls gespeichert. Hat beim Holen der Daten alles geklappt, ist die Variable nicht null sondern truthy, sodass die Funktion renderDataList() ausgeführt wird.
Einfach und simpel, wie ich finde. Man kann sich also einen if-Block sparen und den Code ebenso gut lesbar auf eine Zeile reduzieren.