Skip to content

Commit

Permalink
Nullish coalescing operator '??'
Browse files Browse the repository at this point in the history
  • Loading branch information
behrends committed Nov 24, 2023
1 parent d7e572c commit 6ad6d62
Showing 1 changed file with 58 additions and 58 deletions.
116 changes: 58 additions & 58 deletions 1-js/02-first-steps/12-nullish-coalescing-operator/article.md
Original file line number Diff line number Diff line change
@@ -1,94 +1,94 @@
# Nullish coalescing operator '??'
# Nullish Coalescing Operator '??'

[recent browser="new"]

The nullish coalescing operator is written as two question marks `??`.
Der Nullish Coalescing Operator wird als zwei Fragezeichen `??` geschrieben.

As it treats `null` and `undefined` similarly, we'll use a special term here, in this article. For brevity, we'll say that a value is "defined" when it's neither `null` nor `undefined`.
Da er `null` und `undefined` ähnlich behandelt, werden wir hier in diesem Artikel einen speziellen Begriff verwenden. Kurz gesagt, wir werden sagen, dass ein Wert "definiert" ist, wenn er weder `null` noch `undefined` ist.

The result of `a ?? b` is:
- if `a` is defined, then `a`,
- if `a` isn't defined, then `b`.
Das Ergebnis von `a ?? b` ist:
- wenn `a` definiert ist, dann `a`,
- wenn `a` nicht definiert ist, dann `b`.

In other words, `??` returns the first argument if it's not `null/undefined`. Otherwise, the second one.
Mit anderen Worten, `??` gibt das erste Argument zurück, wenn es nicht `null/undefined` ist und andernfalls das zweite.

The nullish coalescing operator isn't anything completely new. It's just a nice syntax to get the first "defined" value of the two.
Der Nullish Coalescing Operator ist nichts völlig Neues. Es ist nur eine nette Syntax, um den ersten "definierten" Wert von zweien zu bekommen.

We can rewrite `result = a ?? b` using the operators that we already know, like this:
Wir können `result = a ?? b` mit den Operatoren umschreiben, die wir bereits kennen, so:

```js
result = (a !== null && a !== undefined) ? a : b;
```

Now it should be absolutely clear what `??` does. Let's see where it helps.
Jetzt sollte absolut klar sein, was `??` macht. Lass uns sehen, wo es hilft.

The common use case for `??` is to provide a default value.
Der gebräuchlichste Anwendungsfall für `??` ist, einen Standardwert bereitzustellen.

For example, here we show `user` if its value isn't `null/undefined`, otherwise `Anonymous`:
Beispielsweise zeigen wir hier `user` an, wenn sein Wert nicht `null/undefined` ist, ansonsten `Anonymous`:

```js run
let user;

alert(user ?? "Anonymous"); // Anonymous (user is undefined)
alert(user ?? "Anonymous"); // Anonymous (user ist undefined)
```
Here's the example with `user` assigned to a name:
Hier ist das Beispiel mit der Variablen `user`, der ein Name zugewiesen wurde:
```js run
let user = "John";

alert(user ?? "Anonymous"); // John (user is not null/undefined)
alert(user ?? "Anonymous"); // John (user ist nicht null/undefined)
```
We can also use a sequence of `??` to select the first value from a list that isn't `null/undefined`.
Wir können auch eine Sequenz von `??` verwenden, um den ersten Wert aus einer Liste auszuwählen, der nicht `null/undefined` ist.
Let's say we have a user's data in variables `firstName`, `lastName` or `nickName`. All of them may be not defined, if the user decided not to fill in the corresponding values.
Nehmen wir an, wir haben Daten eines Benutzers in den Variablen `firstName`, `lastName` oder `nickName`. Alle könnten nicht definiert sein, wenn der Benutzer sich entschieden hat, die entsprechenden Informationen nicht auszufüllen.
We'd like to display the user name using one of these variables, or show "Anonymous" if all of them are `null/undefined`.
Wir möchten den Benutzernamen mit einer dieser Variablen anzeigen oder "Anonymous" zeigen, wenn alle `null/undefined` sind.
Let's use the `??` operator for that:
Verwenden wir hierfür den `??` Operator:
```js run
let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// shows the first defined value:
// zeigt den ersten definierten Wert:
*!*
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder
*/!*
```
## Comparison with ||
## Vergleich mit ||
The OR `||` operator can be used in the same way as `??`, as it was described in the [previous chapter](info:logical-operators#or-finds-the-first-truthy-value).
Der ODER `||` Operator kann auf die gleiche Weise wie `??` verwendet werden, was im [vorherigen Kapitel](info:logical-operators#or-finds-the-first-truthy-value) beschrieben wurde.
For example, in the code above we could replace `??` with `||` and still get the same result:
Zum Beispiel könnten wir in dem obigen Code `??` durch `||` ersetzen und würden immer noch dasselbe Ergebnis erhalten:
```js run
let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// shows the first truthy value:
// zeigt den ersten wahrheitswerten Wert:
*!*
alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
*/!*
```
Historically, the OR `||` operator was there first. It's been there since the beginning of JavaScript, so developers were using it for such purposes for a long time.
Historisch gesehen war der ODER `||` Operator zuerst da. Er ist seit den Anfängen von JavaScript vorhanden, sodass Entwickler ihn seit langem für solche Zwecke verwendet haben.
On the other hand, the nullish coalescing operator `??` was added to JavaScript only recently, and the reason for that was that people weren't quite happy with `||`.
Andererseits wurde der Nullish Coalescing Operator `??` erst kürzlich zu JavaScript hinzugefügt, und der Grund dafür war, dass die Leute mit `||` nicht ganz zufrieden waren.
The important difference between them is that:
- `||` returns the first *truthy* value.
- `??` returns the first *defined* value.
Der wichtige Unterschied zwischen ihnen ist, dass:
- `||` den ersten *wahrheitswerten* Wert zurückgibt.
- `??` den ersten *definierten* Wert zurückgibt.
In other words, `||` doesn't distinguish between `false`, `0`, an empty string `""` and `null/undefined`. They are all the same -- falsy values. If any of these is the first argument of `||`, then we'll get the second argument as the result.
Mit anderen Worten, `||` unterscheidet nicht zwischen `false`, `0`, einem leeren String `""` und `null/undefined`. Sie sind alle gleich -- falsy Werte. Wenn einer dieser der erste Argument von `||` ist, dann erhalten wir als Ergebnis das zweite Argument.
In practice though, we may want to use default value only when the variable is `null/undefined`. That is, when the value is really unknown/not set.
In der Praxis jedoch möchten wir vielleicht nur dann einen Standardwert verwenden, wenn die Variable `null/undefined` ist. Das heißt, wenn der Wert wirklich unbekannt/nicht gesetzt ist.
For example, consider this:
Betrachten wir zum Beispiel dies:
```js run
let height = 0;
Expand All @@ -97,73 +97,73 @@ alert(height || 100); // 100
alert(height ?? 100); // 0
```
- The `height || 100` checks `height` for being a falsy value, and it's `0`, falsy indeed.
- so the result of `||` is the second argument, `100`.
- The `height ?? 100` checks `height` for being `null/undefined`, and it's not,
- so the result is `height` "as is", that is `0`.
- `height || 100` prüft `height` darauf, ob es ein falsy Wert ist, und das ist `0`, eindeutig falsy.
- daher ist das Ergebnis von `||` das zweite Argument (`100`).
- `height ?? 100` prüft `height` darauf, ob es `null/undefined` ist, und das ist es nicht,
- daher ist das Ergebnis `height` "wie es ist", also `0`.
In practice, the zero height is often a valid value, that shouldn't be replaced with the default. So `??` does just the right thing.
In der Praxis ist die Höhe von Null oft ein gültiger Wert, der nicht durch den Standardwert ersetzt werden sollte. Daher macht `??` genau das Richtige.
## Precedence
## Vorrang
The precedence of the `??` operator is the same as `||`. They both equal `3` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table).
Die Vorrangigkeit des `??` Operators ist die gleiche wie bei `||`. Beide sind gleich `3` in der [MDN-Tabelle](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table).
That means that, just like `||`, the nullish coalescing operator `??` is evaluated before `=` and `?`, but after most other operations, such as `+`, `*`.
Das bedeutet, dass genau wie `||` der Nullish Coalescing Operator `??` vor `=` und `?` ausgewertet wird, aber nach den meisten anderen Operationen, wie `+`, `*`.
So we may need to add parentheses in expressions like this:
Also könnten wir gezwungen sein, Klammern in Ausdrücken wie diesem hinzuzufügen:
```js run
let height = null;
let width = null;

// important: use parentheses
// wichtig: Klammern verwenden
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000
```
Otherwise, if we omit parentheses, then as `*` has the higher precedence than `??`, it would execute first, leading to incorrect results.
Wenn wir die Klammern weglassen, würde `*` als höhere Priorität als `??` zuerst ausgeführt, was zu falschen Ergebnissen führen würde.
```js
// without parentheses
// ohne Klammern
let area = height ?? 100 * width ?? 50;

// ...works this way (not what we want):
// ...funktioniert so (nicht was wir wollen):
let area = height ?? (100 * width) ?? 50;
```
### Using ?? with && or ||
### Verwendung von ?? mit && oder ||
Due to safety reasons, JavaScript forbids using `??` together with `&&` and `||` operators, unless the precedence is explicitly specified with parentheses.
Aus Sicherheitsgründen verbietet JavaScript die Verwendung von `??` zusammen mit `&&` und `||`, es sei denn die Vorrangregeln werden durch Klammern explizit angegeben.
The code below triggers a syntax error:
Der folgende Code löst einen Syntaxfehler aus:
```js run
let x = 1 && 2 ?? 3; // Syntax error
let x = 1 && 2 ?? 3; // Syntaxfehler
```
The limitation is surely debatable, it was added to the language specification with the purpose to avoid programming mistakes, when people start to switch from `||` to `??`.
Die Einschränkung ist sicher debattierbar, sie wurde der Sprachspezifikation hinzugefügt, um Programmierfehler zu vermeiden, wenn Leute beginnen, von `||` auf `??` umzusteigen.
Use explicit parentheses to work around it:
Verwende klare Klammern, um dies zu umgehen:
```js run
*!*
let x = (1 && 2) ?? 3; // Works
let x = (1 && 2) ?? 3; // Funktioniert
*/!*

alert(x); // 2
```
## Summary
## Zusammenfassung
- The nullish coalescing operator `??` provides a short way to choose the first "defined" value from a list.
- Der Nullish Coalescing Operator `??` bietet eine kurze Möglichkeit, den ersten "definierten" Wert aus einer Liste auszuwählen.
It's used to assign default values to variables:
Er wird verwendet, um Standardwerte für Variablen zuzuweisen:
```js
// set height=100, if height is null or undefined
// setze height=100, wenn height null oder undefined ist
height = height ?? 100;
```
- The operator `??` has a very low precedence, only a bit higher than `?` and `=`, so consider adding parentheses when using it in an expression.
- It's forbidden to use it with `||` or `&&` without explicit parentheses.
- Der Operator `??` hat eine sehr niedrige Vorrangigkeit, nur etwas höher als `?` und `=`, also sollte in Betracht gezogen werden, Klammern zu verwenden, wenn er in Ausdrücken verwendet wird.
- Es ist verboten, ihn mit `||` oder `&&` ohne explizite Klammern zu verwenden.

0 comments on commit 6ad6d62

Please sign in to comment.