Operators

Comparison operators

Es gibt vier (Haupt)typen von Vergleichsoperatoren:

• größer > und größer gleich ≥
• kleiner < und kleiner gleich ≤
• strictly equal === und equal ==
• strictly unequal !== und unequal !=

Der Unterschied zwischen strictly equal/unequal und equal/unequal ist, dass strictly auch den Typ der Variable prüft.

Strict equality vs. loose equality

JavaScript ist eine sogenannte loosely-typed language. Das bedeutet, wir deklarieren eine Variable, ohne zugleich zu definieren, welchen Datentyp diese Variable beinhalten darf. Wenn wir zwei Variablen mit strict equality vergleichen, vergleicht JavaScript immer auch den Datentyp.

Caution

Wenn wir zwei Variable mit loose equality vergleichen, führt JavaScript immer eine automatische Typkonvertierung durch, damit sie für JavaScript überhaupt vergleichbar werden. Konkret bedeutet das, dass JavaScript immer versucht, alle Variablen in Nummern umzuwandeln, wenn ein Comparison operator im Spiel ist. Das heißt, true wird zu 1 und false wird zu 0 umgewandelt. Dieses Verhalten führt schnell einmal zu Fehlern, die nicht einfach zu finden sind. Daher sollte immer der strictly (un)equal Operator verwendet werden.

'24' === 24 // false
'24' == 24  // true

Objekte vergleichen

Objekte können nicht direkt verglichen werden, siehe comparing objects.

Datum- und Zeitangaben vergleichen

Das gleiche gilt für Datum und Zeit, siehe comparing dates and times.

The NOT operator

Der NOT operator ! dreht truthy und falsey um. Truthy Werte werden false und falsey Werte werden true. Mit dem NOT operator kann man bei einer if Abfrage das else weglassen:

const str = '';

if (!str) {
  // Only do sth if the string is emtpy (NOT truthy)
}

Double negation

Die Verwendung von zwei NOT operatoren !! dreht das Ergebnis nochmal um. Truthy wird zuerst zu false und dann zu true und falsey wird zuerst zu true und dann zu false. So lässt sich der Boolean Wert einer Variable schnell ermitteln.

Ternary operators

Ein ternary operator ist eine gute, einfach zu lesende Alternative für ein if/else Statement. Bildlich gesprochen müssen wir bei if/else zwei Wege verfolgen, während ein ternary operator sich zwar einmal verzweigt, die Wege gleich danach aber wieder zusammenführen.

The syntax of a ternary operator

Ein ternary operator besteht aus drei Teilen:

• einer condition – gleich wie im if/else statement
• einer truthyExp – das Statement, das ausgeführt werden soll, wenn die condition truthy ist
• einer falseyExp – das Statement, das ausgeführt werden soll, wenn die condition falsey ist

condition ? truthyExp : falseyExp

// alternative Schreibweise analog if/else:
condition
  ? truthyExp
  : falseyExp

When to use ternary operators

Ternary operators nutzen wir statt if/else Statements, wenn diese jeweils nur einen Ausdruck enthalten.

Nest up to two levels

Man kann ternary operators verschachteln, aber besser nicht mehr als zwei Level tief, sonst wird die Sache zu unübersichtlich.

let toy =
  gender === 'boy'
    ? birthMonth === 'December'
      ? 'santaSock'
      : 'toyCar'
    : birthMonth === 'December'
      ? 'candyCane'
      : 'doll';

AND an OR operators

AND and OR operators kommen ins Spiel, wenn zwei oder mehr Bedingungen zutreffen oder nicht. Beide können in if/else Statements verwendet werden.

The AND operator

Der AND operator && wird benutzt, um zu prüfen, ob alle Ausdrücke truthy sind. Die Syntax sieht so aus:

const test = expr1 && expr2 && expr3;

• && gibt den ersten falsey Ausdruck zurück, wenn irgendein Ausdruck falsch ist
• && gibt den letzten Ausdruck zurück, wenn alle Ausdrücke truthy sind

&&
true	true	true
true	false	false
false	true	false
false	false	false

The OR operator

Der OR operator || wird benutzt, um zu prüfen, ob mindestens ein Ausdruck truthy ist. Die Syntay sieht so aus:

const test = expr1 || expr2 || expr3;

• || gibt den ersten truthy Ausdruck zurück, wenn einer der Ausdrücke truthy ist
• || gibt den letzten Ausdruck zurück, wenn alle Ausdrücke falsey sind

| || | | | | ---- | ---- | ---- | | true | true | true | | true | false | true | | false | true | true | | false | false | false |