Skip to content

Commit e74295c

Browse files
authored
Update article.md
1 parent c634301 commit e74295c

File tree

1 file changed

+7
-7
lines changed
  • 1-js/04-object-basics/07-optional-chaining

1 file changed

+7
-7
lines changed

1-js/04-object-basics/07-optional-chaining/article.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,14 @@ That's the expected result. JavaScript works like this. As `user.address` is `un
2525

2626
That said, in many practical cases we'd prefer to get `undefined` instead of an error here (meaning "no street").
2727

28-
...And another example. In the web development, we may need the information about an element on the page. The element is returned by `document.querySelector('.elem')`, and the catch is again - that it sometimes doesn't exist:
28+
...And another example. In the web development, we may need the information about an element on the page. We can find this element using a special method call, such as `document.querySelector('.elem')`, and it either returns an object or `null` when there's no such element.
2929

3030
```js run
31-
// the result of the call document.querySelector('.elem') may be an object or null
31+
// the result of the call document.querySelector('.elem') may be null
3232
let html = document.querySelector('.elem').innerHTML; // error if it's null
3333
```
3434

35-
Once again, we may want to avoid the error in such case.
35+
Once again, if the element doesn't exist, we'll get an error accessing `.innerHTML` of `null`. And in some cases, when the absence of the element is normal, we'd like to avoid the error and just accept `html = null` as the result.
3636

3737
How can we do this?
3838

@@ -44,7 +44,7 @@ let user = {};
4444
alert(user.address ? user.address.street : undefined);
4545
```
4646

47-
...But that's quite inelegant. As you can see, the `user.address` is duplicated in the code. For more deeply nested properties, that becomes a problem.
47+
It works, there's no error... But it's quite inelegant. As you can see, the `"user.address"` appears twice in the code. For more deeply nested properties, that becomes a problem as more repetitions are required.
4848

4949
E.g. let's try getting `user.address.street.name`.
5050

@@ -56,9 +56,9 @@ let user = {}; // user has no address
5656
alert(user.address ? user.address.street ? user.address.street.name : null : null);
5757
```
5858

59-
That looks awful.
59+
That's just awful, one may even problems understanding such code.
6060

61-
Before the optional chaining `?.` was added to the language, people used the `&&` operator for such cases:
61+
Don't even care to, as there's a better way to write it, using the `&&` operator:
6262

6363
```js run
6464
let user = {}; // user has no address
@@ -70,7 +70,7 @@ AND'ing the whole path to the property ensures that all components exist (if not
7070

7171
As you can see, the property names are still duplicated in the code. E.g. in the code above, `user.address` appears three times.
7272

73-
And now, finally, the optional chaining comes to the rescue!
73+
That's why the optional chaining `?.` was added to the language. To solve this problem once and for all!
7474

7575
## Optional chaining
7676

0 commit comments

Comments
 (0)