13 Operatoren

13.1 Operatoren verstehen

JavaScript-Operatoren mögen eigenartig erscheinen. Mit den folgenden zwei Regeln sind sie leichter zu verstehen:

• Operatoren zwängen ihre Operanden in passende Typen
• Die meisten Operatoren funktionieren nur mit primitiven Werten

13.1.1 Operatoren zwängen ihre Operanden in passende Typen

Wenn ein Operator Operanden erhält, die nicht die richtigen Typen haben, wirft er selten eine Ausnahme. Stattdessen zwingt er (konvertiert automatisch) die Operanden, damit er mit ihnen arbeiten kann. Betrachten wir zwei Beispiele.

Erstens kann der Multiplikationsoperator nur mit Zahlen arbeiten. Daher konvertiert er Zeichenketten in Zahlen, bevor er sein Ergebnis berechnet.

> '7' * '3'
21

Zweitens kann der Klammer-Operator ([ ]) zum Zugriff auf die Eigenschaften eines Objekts nur Zeichenketten und Symbole verarbeiten. Alle anderen Werte werden in Zeichenketten konvertiert.

const obj = {};
obj['true'] = 123;

// Coerce true to the string 'true'
assert.equal(obj[true], 123);

13.1.2 Die meisten Operatoren funktionieren nur mit primitiven Werten

Wie bereits erwähnt, funktionieren die meisten Operatoren nur mit primitiven Werten. Wenn ein Operand ein Objekt ist, wird er normalerweise in einen primitiven Wert konvertiert – zum Beispiel:

> [1,2,3] + [4,5,6]
'1,2,34,5,6'

Warum? Der Plus-Operator konvertiert seine Operanden zuerst in primitive Werte.

> String([1,2,3])
'1,2,3'
> String([4,5,6])
'4,5,6'

Als Nächstes verkettet er die beiden Zeichenketten.

> '1,2,3' + '4,5,6'
'1,2,34,5,6'

13.2 Der Plus-Operator (+)

Der Plus-Operator funktioniert in JavaScript wie folgt:

• Zuerst konvertiert er beide Operanden in primitive Werte. Dann wechselt er in einen von zwei Modi:
  • Zeichenketten-Modus: Wenn einer der beiden primitiven Werte eine Zeichenkette ist, dann konvertiert er den anderen ebenfalls in eine Zeichenkette, verkettet beide Zeichenketten und gibt das Ergebnis zurück.
  • Zahlen-Modus: Andernfalls konvertiert er beide Operanden in Zahlen, addiert sie und gibt das Ergebnis zurück.

Der Zeichenketten-Modus erlaubt uns, + zum Zusammenfügen von Zeichenketten zu verwenden.

> 'There are ' + 3 + ' items'
'There are 3 items'

Der Zahlen-Modus bedeutet, dass, wenn keiner der Operanden eine Zeichenkette ist (oder ein Objekt, das zu einer Zeichenkette wird), alles in Zahlen konvertiert wird.

> 4 + true
5

Number(true) ist 1.

13.3 Zuweisungsoperatoren

13.3.1 Der einfache Zuweisungsoperator

Der einfache Zuweisungsoperator wird verwendet, um Speicherorte zu ändern.

x = value; // assign to a previously declared variable
obj.propKey = value; // assign to a property
arr[index] = value; // assign to an Array element

Initialisierer in Variablendeklarationen können ebenfalls als eine Form der Zuweisung betrachtet werden.

const x = value;
let y = value;

13.3.2 Zusammengesetzte Zuweisungsoperatoren

JavaScript unterstützt die folgenden Zuweisungsoperatoren:

• Arithmetische Zuweisungsoperatoren: += -= *= /= %= [ES1]
  • += kann auch für die Verkettung von Zeichenketten verwendet werden.
  • Später eingeführt: **= [ES2016]
• Bitweise Zuweisungsoperatoren: &= ^= |= [ES1]
• Bitweise Shift-Zuweisungsoperatoren: <<= >>= >>>= [ES1]
• Logische Zuweisungsoperatoren: ||= &&= ??= [ES2021]

13.3.2.1 Logische Zuweisungsoperatoren [ES2021]

Logische Zuweisungsoperatoren funktionieren anders als andere zusammengesetzte Zuweisungsoperatoren.

Warum entspricht a ||= b dem folgenden Ausdruck?

a || (a = b)

Warum nicht diesem Ausdruck?

a = a || b

Der erstere Ausdruck hat den Vorteil des Short-Circuiting: Die Zuweisung wird nur ausgewertet, wenn a zu false ausgewertet wird. Daher wird die Zuweisung nur durchgeführt, wenn sie notwendig ist. Im Gegensatz dazu führt der letztere Ausdruck immer eine Zuweisung durch.

Weitere Informationen zu ??= finden Sie in §14.4.5 „Der Nullish-Coalescing-Zuweisungsoperator (??=) [ES2021]“.

13.3.2.2 Die übrigen zusammengesetzten Zuweisungsoperatoren

Für Operatoren op außer || && ?? sind die folgenden beiden Zuweisungsarten äquivalent:

myvar op= value
myvar = myvar op value

Wenn beispielsweise op + ist, erhalten wir den Operator +=, der wie folgt funktioniert:

let str = '';
str += '<b>';
str += 'Hello!';
str += '</b>';

assert.equal(str, '<b>Hello!</b>');

13.4 Gleichheit: == vs. ===

JavaScript hat zwei Arten von Gleichheitsoperatoren: lose Gleichheit (==) und strikte Gleichheit (===). Die Empfehlung ist, immer letztere zu verwenden.

13.4.1 Lose Gleichheit (== und !=)

Lose Gleichheit ist eine der Eigenheiten von JavaScript. Sie zwängt Operanden oft. Einige dieser Zwängungen ergeben Sinn.

> '123' == 123
true
> false == 0
true

Andere weniger.

> '' == 0
true

Objekte werden in primitive Werte konvertiert, wenn (und nur wenn!) der andere Operand primitiv ist.

> [1, 2, 3] == '1,2,3'
true
> ['1', '2', '3'] == '1,2,3'
true

Wenn beide Operanden Objekte sind, sind sie nur dann gleich, wenn sie dasselbe Objekt sind.

> [1, 2, 3] == ['1', '2', '3']
false
> [1, 2, 3] == [1, 2, 3]
false

> const arr = [1, 2, 3];
> arr == arr
true

Schließlich betrachtet == undefined und null als gleich.

> undefined == null
true

13.4.2 Strikte Gleichheit (=== und !==)

Strikte Gleichheit zwängt niemals. Zwei Werte sind nur dann gleich, wenn sie denselben Typ haben. Betrachten wir unsere vorherige Interaktion mit dem ==-Operator und sehen wir, was der ===-Operator tut:

> false === 0
false
> '123' === 123
false

Ein Objekt ist nur dann gleich einem anderen Wert, wenn dieser Wert dasselbe Objekt ist.

> [1, 2, 3] === '1,2,3'
false
> ['1', '2', '3'] === '1,2,3'
false

> [1, 2, 3] === ['1', '2', '3']
false
> [1, 2, 3] === [1, 2, 3]
false

> const arr = [1, 2, 3];
> arr === arr
true

Der ===-Operator betrachtet undefined und null nicht als gleich.

> undefined === null
false

13.4.3 Empfehlung: Immer strikte Gleichheit verwenden

Ich empfehle, immer === zu verwenden. Es macht Ihren Code leichter verständlich und erspart Ihnen, über die Eigenheiten von == nachdenken zu müssen.

Betrachten wir zwei Anwendungsfälle für == und was ich stattdessen empfehlen würde.

13.4.3.1 Anwendungsfall für ==: Vergleich mit einer Zahl oder einer Zeichenkette

== ermöglicht es Ihnen zu prüfen, ob ein Wert x eine Zahl oder diese Zahl als Zeichenkette ist – mit einem einzigen Vergleich.

if (x == 123) {
  // x is either 123 or '123'
}

Ich bevorzuge eine der folgenden beiden Alternativen:

if (x === 123 || x === '123') ···
if (Number(x) === 123) ···

Sie können x auch in eine Zahl konvertieren, wenn Sie sie zum ersten Mal antreffen.

13.4.3.2 Anwendungsfall für ==: Vergleich mit undefined oder null

Ein weiterer Anwendungsfall für == ist die Prüfung, ob ein Wert x entweder undefined oder null ist.

if (x == null) {
  // x is either null or undefined
}

Das Problem mit diesem Code ist, dass man nicht sicher sein kann, ob jemand ihn absichtlich so geschrieben hat oder ob er einen Tippfehler gemacht und === null gemeint hat.

Ich bevorzuge eine der folgenden beiden Alternativen:

if (x === undefined || x === null) ···
if (!x) ···

Ein Nachteil der zweiten Alternative ist, dass sie Werte außer undefined und null akzeptiert, aber sie ist ein etabliertes Muster in JavaScript (wird im Detail in §15.3 „Existence Checks basierend auf Truthiness“ erklärt).

Die folgenden drei Bedingungen sind ebenfalls annähernd äquivalent:

if (x != null) ···
if (x !== undefined && x !== null) ···
if (x) ···

13.4.4 Noch strikter als ===: Object.is()

Die Methode Object.is() vergleicht zwei Werte.

> Object.is(123, 123)
true
> Object.is(123, '123')
false

Sie ist noch strikter als ===. Zum Beispiel betrachtet sie NaN, den Fehlerwert für Berechnungen mit Zahlen, als gleich zu sich selbst.

> Object.is(NaN, NaN)
true
> NaN === NaN
false

Das ist gelegentlich nützlich. Zum Beispiel können Sie sie verwenden, um eine verbesserte Version der Array-Methode .indexOf() zu implementieren.

const myIndexOf = (arr, elem) => {
  return arr.findIndex(x => Object.is(x, elem));
};

myIndexOf() findet NaN in einem Array, während .indexOf() das nicht tut.

> myIndexOf([0,NaN,2], NaN)
1
> [0,NaN,2].indexOf(NaN)
-1

Das Ergebnis -1 bedeutet, dass .indexOf() sein Argument nicht im Array finden konnte.

13.5 Vergleichsoperatoren

JavaScripts Vergleichsoperatoren (Tab. 3) funktionieren sowohl für Zahlen als auch für Zeichenketten.

> 5 >= 2
true
> 'bar' < 'foo'
true

<= und >= basieren auf strikter Gleichheit.

13.6 Verschiedene andere Operatoren

Die folgenden Operatoren werden an anderer Stelle in diesem Buch behandelt:

• Operatoren für Booleans, Zahlen, Zeichenketten, Objekte
• Der Nullish-Coalescing-Operator (??) für Standardwerte

Die nächsten beiden Unterabschnitte behandeln zwei selten verwendete Operatoren.

13.6.1 Komma-Operator

Der Komma-Operator hat zwei Operanden, wertet beide aus und gibt den zweiten zurück.

> 'a', 'b'
'b'

Weitere Informationen zu diesem Operator finden Sie in Speaking JavaScript.

13.6.2 void-Operator

Der void-Operator wertet seinen Operanden aus und gibt undefined zurück.

> void (3 + 2)
undefined

Weitere Informationen zu diesem Operator finden Sie in Speaking JavaScript.