content

Author: iliakan

1-js/02-first-steps/12-nullish-coalescing-operator/article.md

@@ -2,56 +2,92 @@
 
 [recent browser="new"]
 
-The nullish coalescing operator `??` provides a short syntax for selecting a first "defined" variable from the list.
+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 `??`.
 
 The result of `a ?? b` is:
-- `a` if it's not `null` or `undefined`,
-- `b`, otherwise.
+- if `a` is defined, then `a`,
+- if `a` isn't defined, then `b`.
+
+
+In other words, `??` returns the first argument if it's defined. Otherwise, the second one.
 
-So, `x = a ?? b` is a short equivalent to:
+The nullish coalescing operator isn't anything completely new. It's just a nice syntax to get the first "defined" value of the two.
+
+We can rewrite `result = a ?? b` using the operators that we already know, like this:
 
 ```js
-x = (a !== null && a !== undefined) ? a : b;
+result = (a !== null && a !== undefined) ? a : b;
+```
+
+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:
+
+```js run
+let user;
+
+alert(user ?? "Anonymous"); // Anonymous
 ```
 
-Here's a longer example.
+Of course, if `user` had any value except `null/undefined`, then we would see it instead:
+
+```js run
+let user = "John";
+
+alert(user ?? "Anonymous"); // John
+```
 
-Imagine, we have a user, and there are variables `firstName`, `lastName` or `nickName` for their first name, last name and the nick name. All of them may be undefined, if the user decided not to enter any value.
+We can also use a sequence of `??` to select the first defined value from a list.
 
-We'd like to display the user name: one of these three variables, or show "Anonymous" if nothing is set.
+Let's say we 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 use the `??` operator to select the first defined one:
+We'd like to display the user name using one of these variables, or show "Anonymous" if all of them are undefined.
+
+Let's use the `??` operator for that:
 
 ```js run
 let firstName = null;
 let lastName = null;
 let nickName = "Supercoder";
 
-// show the first not-null/undefined value
+// shows the first defined value:
 *!*
 alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder
 */!*
 ```
 
 ## Comparison with ||
 
-The OR `||` operator can be used in the same way as `??`. Actually, we can replace `??` with `||` in the code above and get the same result, as it was described in the [previous chapter](info:logical-operators#or-finds-the-first-truthy-value).
-
-The important difference is that:
-- `||` returns the first *truthy* value.
-- `??` returns the first *defined* value.
+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).
 
-This matters a lot when we'd like to treat `null/undefined` differently from `0`.
+For example, in the code above we could replace `??` with `||` and still get the same result:
 
-For example, consider this:
+```js run
+let firstName = null;
+let lastName = null;
+let nickName = "Supercoder";
 
-```js
-height = height ?? 100;
+// shows the first truthy value:
+*!*
+alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
+*/!*
 ```
 
-This sets `height` to `100` if it's not defined.
+The OR `||` operator 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 only recently, and the reason for that was that people weren't quite happy with `||`.
 
-Let's compare it with `||`:
+The subtle, yet important difference is that:
+- `||` returns the first *truthy* value.
+- `??` returns the first *defined* value.
+
+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.
+
+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.
+
+For example, consider this:
 
 ```js run
 let height = 0;
@@ -60,19 +96,20 @@ alert(height || 100); // 100
 alert(height ?? 100); // 0
 ```
 
-Here, `height || 100` treats zero height as unset, same as `null`, `undefined` or any other falsy value. So the result is `100`.
+Here, we have a zero height.
 
-The `height ?? 100` returns `100` only if `height` is exactly `null` or `undefined`. So the `alert` shows the height value `0` "as is".
+- 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 `null/undefined`, and it's not,
+    - so the result is `height` "as is", that is `0`.
 
-Which behavior is better depends on a particular use case. When zero height is a valid value, then `??` is preferrable.
+If we assume that zero height is a valid value, that shouldn't be replaced with the default, then `??` 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 after most other operations, but before `=` and `?`.
+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 `+`, `*`.
 
-If we need to choose a value with `??` in a complex expression, then consider adding parentheses:
+So if we'd like to choose a value with `??` an expression with other operators, consider adding parentheses:
 
 ```js run
 let height = null;
@@ -84,26 +121,27 @@ let area = (height ?? 100) * (width ?? 50);
 alert(area); // 5000
 ```
 
-Otherwise, if we omit parentheses, `*` has the higher precedence than `??` and would run first.
-
-That would work be the same as:
+Otherwise, if we omit parentheses, then as `*` has the higher precedence than `??`, it would execute first, leading to incorrect results.
 
 ```js
-// probably not correct
+// without parentheses
+let area = height ?? 100 * width ?? 50;
+
+// ...works the same as this (probably not what we want):
 let area = height ?? (100 * width) ?? 50;
 ```
 
-There's also a related language-level limitation.
+### Using ?? with && or ||
 
-**Due to safety reasons, it's forbidden to use `??` together with `&&` and `||` operators.**
+Due to safety reasons, JavaScript forbids using `??` together with `&&` and `||` operators, unless the precedence is explicitly specified with parentheses.
 
 The code below triggers a syntax error:
 
 ```js run
 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, as people start to switch to `??` from `||`.
+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 `||`.
 
 Use explicit parentheses to work around it:
 
@@ -126,5 +164,5 @@ alert(x); // 2
     height = height ?? 100;
     ```
 
-- The operator `??` has a very low precedence, a bit higher than `?` and `=`.
+- The operator `??` has a very low precedence, 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.