Update article.md
This commit is contained in:
parent
c634301e90
commit
e74295c42c
1 changed files with 7 additions and 7 deletions
|
@ -25,14 +25,14 @@ That's the expected result. JavaScript works like this. As `user.address` is `un
|
||||||
|
|
||||||
That said, in many practical cases we'd prefer to get `undefined` instead of an error here (meaning "no street").
|
That said, in many practical cases we'd prefer to get `undefined` instead of an error here (meaning "no street").
|
||||||
|
|
||||||
...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:
|
...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.
|
||||||
|
|
||||||
```js run
|
```js run
|
||||||
// the result of the call document.querySelector('.elem') may be an object or null
|
// the result of the call document.querySelector('.elem') may be null
|
||||||
let html = document.querySelector('.elem').innerHTML; // error if it's null
|
let html = document.querySelector('.elem').innerHTML; // error if it's null
|
||||||
```
|
```
|
||||||
|
|
||||||
Once again, we may want to avoid the error in such case.
|
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.
|
||||||
|
|
||||||
How can we do this?
|
How can we do this?
|
||||||
|
|
||||||
|
@ -44,7 +44,7 @@ let user = {};
|
||||||
alert(user.address ? user.address.street : undefined);
|
alert(user.address ? user.address.street : undefined);
|
||||||
```
|
```
|
||||||
|
|
||||||
...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.
|
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.
|
||||||
|
|
||||||
E.g. let's try getting `user.address.street.name`.
|
E.g. let's try getting `user.address.street.name`.
|
||||||
|
|
||||||
|
@ -56,9 +56,9 @@ let user = {}; // user has no address
|
||||||
alert(user.address ? user.address.street ? user.address.street.name : null : null);
|
alert(user.address ? user.address.street ? user.address.street.name : null : null);
|
||||||
```
|
```
|
||||||
|
|
||||||
That looks awful.
|
That's just awful, one may even problems understanding such code.
|
||||||
|
|
||||||
Before the optional chaining `?.` was added to the language, people used the `&&` operator for such cases:
|
Don't even care to, as there's a better way to write it, using the `&&` operator:
|
||||||
|
|
||||||
```js run
|
```js run
|
||||||
let user = {}; // user has no address
|
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
|
||||||
|
|
||||||
As you can see, the property names are still duplicated in the code. E.g. in the code above, `user.address` appears three times.
|
As you can see, the property names are still duplicated in the code. E.g. in the code above, `user.address` appears three times.
|
||||||
|
|
||||||
And now, finally, the optional chaining comes to the rescue!
|
That's why the optional chaining `?.` was added to the language. To solve this problem once and for all!
|
||||||
|
|
||||||
## Optional chaining
|
## Optional chaining
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue