You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/11-logical-operators/article.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
-
# Logical operators: ||, && and !
1
+
# Logical operators
2
2
3
-
There are four logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT), '??' (Nullish Coalescing).
3
+
There are four logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT), `??` (Nullish Coalescing). Here we cover the first three, the `??` operator is in the next article.
4
4
5
5
Although they are called "logical", they can be applied to values of any type, not only boolean. Their result can also be of any type.
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/12-nullish-coalescing-operator/article.md
+18-15
Original file line number
Diff line number
Diff line change
@@ -2,15 +2,14 @@
2
2
3
3
[recent browser="new"]
4
4
5
-
Here, in this article, we'll say that an expression is "defined" when it's neither `null` nor `undefined`.
6
-
7
5
The nullish coalescing operator is written as two question marks `??`.
8
6
7
+
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`.
8
+
9
9
The result of `a ?? b` is:
10
10
- if `a` is defined, then `a`,
11
11
- if `a` isn't defined, then `b`.
12
12
13
-
14
13
In other words, `??` returns the first argument if it's not `null/undefined`. Otherwise, the second one.
15
14
16
15
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
21
20
result = (a !==null&& a !==undefined) ? a : b;
22
21
```
23
22
23
+
Now it should be absolutely clear what `??` does. Let's see where it helps.
24
+
24
25
The common use case for `??` is to provide a default value for a potentially undefined variable.
25
26
26
-
For example, here we show `Anonymous` if `user` isn't defined:
27
+
For example, here we show `user` if defined, otherwise `Anonymous`:
27
28
28
29
```js run
29
30
let user;
30
31
31
-
alert(user ??"Anonymous"); // Anonymous
32
+
alert(user ??"Anonymous"); // Anonymous (user not defined)
32
33
```
33
34
34
-
Of course, if `user`had any value except `null/undefined`, then we would see it instead:
35
+
Here's the example with `user`assigned to a name:
35
36
36
37
```js run
37
38
let user ="John";
38
39
39
-
alert(user ??"Anonymous"); // John
40
+
alert(user ??"Anonymous"); // John (user defined)
40
41
```
41
42
42
43
We can also use a sequence of `??` to select the first value from a list that isn't `null/undefined`.
43
44
44
-
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.
45
+
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.
45
46
46
-
We'd like to display the user name using one of these variables, or show "Anonymous" if all of them are undefined.
47
+
We'd like to display the user name using one of these variables, or show "Anonymous" if all of them aren't defined.
The OR `||` operator exists since the beginning of JavaScript, so developers were using it for such purposes for a long time.
79
+
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.
79
80
80
81
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 `||`.
81
82
@@ -96,16 +97,18 @@ alert(height || 100); // 100
96
97
alert(height ??100); // 0
97
98
```
98
99
99
-
- The `height ||100` checks `height` for being a falsy value, and it really is.
100
-
- so the result is the second argument, `100`.
100
+
- The `height ||100` checks `height` for being a falsy value, and it's `0`, falsy indeed.
101
+
- so the result of `||`is the second argument, `100`.
101
102
- The `height ??100` checks `height` for being `null/undefined`, and it's not,
102
103
- so the result is `height` "as is", that is `0`.
103
104
104
-
If the zero height is a valid value, that shouldn't be replaced with the default, then`??` does just the right thing.
105
+
In practice, the zero height is often a valid value, that shouldn't be replaced with the default. So`??` does just the right thing.
105
106
106
107
## Precedence
107
108
108
-
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 `+`, `*`.
109
+
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`.
110
+
111
+
That means that, just like `||`, the nullish coalescing operator `??` is evaluated before `=` and `?`, but after most other operations, such as `+`, `*`.
109
112
110
113
So if we'd like to choose a value with `??` in an expression with other operators, consider adding parentheses:
111
114
@@ -139,7 +142,7 @@ The code below triggers a syntax error:
139
142
let x =1&&2??3; // Syntax error
140
143
```
141
144
142
-
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 `||`.
145
+
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 `??`.
Copy file name to clipboardExpand all lines: 1-js/04-object-basics/02-object-copy/article.md
+2
Original file line number
Diff line number
Diff line change
@@ -186,6 +186,8 @@ let clone = Object.assign({}, user);
186
186
187
187
It copies all properties of `user` into the empty object and returns it.
188
188
189
+
There are also other methods of cloning an object, e.g. using the [spread operator](info:rest-parameters-spread) `clone = {...user}`, covered later in the tutorial.
190
+
189
191
## Nested cloning
190
192
191
193
Until now we assumed that all properties of `user` are primitive. But properties can be references to other objects. What to do with them?
Copy file name to clipboardExpand all lines: 1-js/04-object-basics/07-optional-chaining/article.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -166,9 +166,9 @@ userGuest.admin?.(); // nothing (no such method)
166
166
*/!*
167
167
```
168
168
169
-
Here, in both lines we first use the dot (`user1.admin`) to get `admin` property, because the user object must exist, so it's safe read from it.
169
+
Here, in both lines we first use the dot (`userAdmin.admin`) to get `admin` property, because we assume that the user object exists, so it's safe read from it.
170
170
171
-
Then `?.()` checks the left part: if the admin function exists, then it runs (that's so for `user1`). Otherwise (for `user2`) the evaluation stops without errors.
171
+
Then `?.()` checks the left part: if the admin function exists, then it runs (that's so for `userAdmin`). Otherwise (for `userGuest`) the evaluation stops without errors.
172
172
173
173
The `?.[]` syntax also works, if we'd like to use brackets `[]` to access properties instead of dot `.`. Similar to previous cases, it allows to safely read a property from an object that may not exist.
This way of copying an object is much shorter than `let objCopy = Object.assign({}, obj);` or for an array `let arrCopy = Object.assign([], arr);` so we prefer to use it whenever we can.
276
+
This way of copying an object is much shorter than `let objCopy = Object.assign({}, obj)` or for an array `let arrCopy = Object.assign([], arr)` so we prefer to use it whenever we can.
0 commit comments