minor fixes

This commit is contained in:
Ilya Kantor 2021-02-02 11:43:35 +03:00
parent 19bf2d3f5a
commit 3fa4c32e1d
7 changed files with 32 additions and 23 deletions

View file

@ -2,15 +2,14 @@
[recent browser="new"]
Here, in this article, we'll say that an expression is "defined" when it's neither `null` nor `undefined`.
The nullish coalescing operator is written as two question marks `??`.
As it treats `null` and `undefined` similarly, we'll use a special term here, in this article. We'll say that an expression is "defined" when it's neither `null` nor `undefined`.
The result of `a ?? b` is:
- if `a` is defined, then `a`,
- if `a` isn't defined, then `b`.
In other words, `??` returns the first argument if it's not `null/undefined`. Otherwise, the second one.
The nullish coalescing operator isn't anything completely new. It's just a nice syntax to get the first "defined" value of the two.
@ -21,29 +20,31 @@ We can rewrite `result = a ?? b` using the operators that we already know, like
result = (a !== null && a !== undefined) ? a : b;
```
Now it should be absolutely clear what `??` does. Let's see where it helps.
The common use case for `??` is to provide a default value for a potentially undefined variable.
For example, here we show `Anonymous` if `user` isn't defined:
For example, here we show `user` if defined, otherwise `Anonymous`:
```js run
let user;
alert(user ?? "Anonymous"); // Anonymous
alert(user ?? "Anonymous"); // Anonymous (user not defined)
```
Of course, if `user` had any value except `null/undefined`, then we would see it instead:
Here's the example with `user` assigned to a name:
```js run
let user = "John";
alert(user ?? "Anonymous"); // John
alert(user ?? "Anonymous"); // John (user defined)
```
We can also use a sequence of `??` to select the first value from a list that isn't `null/undefined`.
Let's say we have a user's data in variables `firstName`, `lastName` or `nickName`. All of them may be undefined, if the user decided not to enter a value.
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 enter a value.
We'd like to display the user name using one of these variables, or show "Anonymous" if all of them are undefined.
We'd like to display the user name using one of these variables, or show "Anonymous" if all of them aren't defined.
Let's use the `??` operator for that:
@ -75,7 +76,7 @@ alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
*/!*
```
The OR `||` operator exists since the beginning of JavaScript, so developers were using it for such purposes for a long time.
Historically, the OR `||` operator was there first. It exists since the beginning of JavaScript, so developers were using it for such purposes for a long time.
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 `||`.
@ -96,16 +97,18 @@ alert(height || 100); // 100
alert(height ?? 100); // 0
```
- The `height || 100` checks `height` for being a falsy value, and it really is.
- so the result is the second argument, `100`.
- 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`.
If the zero height is a valid value, that shouldn't be replaced with the default, then `??` does just the right thing.
In practice, the zero height is often a valid value, that shouldn't be replaced with the default. So `??` does just the right thing.
## Precedence
The precedence of the `??` operator is rather low: `5` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table). So `??` is evaluated before `=` and `?`, but after most other operations, such as `+`, `*`.
The precedence of the `??` operator is about the same as `||`, just a bit lower. It equals `5` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table), while `||` is `6`.
That means that, just like `||`, the nullish coalescing operator `??` is evaluated before `=` and `?`, but after most other operations, such as `+`, `*`.
So if we'd like to choose a value with `??` in an expression with other operators, consider adding parentheses:
@ -139,7 +142,7 @@ The code below triggers a syntax error:
let x = 1 && 2 ?? 3; // Syntax error
```
The limitation is surely debatable, but it was added to the language specification with the purpose to avoid programming mistakes, when people start to switch to `??` from `||`.
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 `??`.
Use explicit parentheses to work around it: