This is the 17th day of my participation in the August Challenge

The preface

I believe many friends have eaten this bug, because did not take into account the backend return does not meet the specifications of the data, or data loss, resulting in the page error, directly hung, today we want to talk about the optional chain? Is a secure way to access nested object properties without reporting an error, even if the intermediate properties do not exist.

An error is reported when obtaining properties that do not exist

Example 1

Let’s say we have a bunch of User objects where our user data is stored most of our users’ family members are stored in user.kinsfolk, brothers are stored in user.kinsfolk. Bother, but some users don’t provide that information.

In this case, when we try to get user.kinsfolk.bother and the user happens not to provide sibling information, we get an error:

let user = {}; // a user object with no "kinsfolk" property alert(user.kinsfolk.bother); // Error!Copy the code

This is the expected result. This is how JavaScript works. Because user.kinsfolk is undefined, attempts to read user.kinsfolk.bother fail and receive an error. But in many real world scenarios, we would prefer to get undefined (meaning no bother attribute) rather than an error.

Example 2

In Web development, we can use special method calls (such as Document.querySelector (‘.elem’)) to get a Web element as an object, or return NULL if there is no such object.

Let HTML = document.querySelector('.elem').innerhtml; // If document.querySelector('. //ERRORCopy the code

Also, if the element does not exist, there will be an error accessing null’s.innerHTML. In some cases, when missing elements is ok, we want to avoid this error and accept HTML = NULL as the result.

The solution

Plan a

Probably the first scenario that comes to mind is to use the if or conditional operators before accessing the attributes of the value, right? The value is checked

let user = {};
​
alert(user.kinsfolk ? user.kinsfolk.bother : undefined);
​
alert(user.kinsfolk ? user.kinsfolk.bother ? user.kinsfolk.bother.name : null : null);
Copy the code

That’s fine. I don’t have an error here. As you can see, user.kinsfolk appears twice in the code. For nesting level deeper attribute can appear more such repeated many times, trying to get the user. The kinsfolk. Bother. Name. We need to check both user.kinsfolk and user.kinsfolk.bother. This code looks very cumbersome.

Scheme 2

Solve all of the above problems once and for all with optional chains! If optional chain? . The preceding part is undefined or null, which stops the operation and returns that part. For example the value? Params:

  1. If value exists, the result is value.params,
  2. Otherwise (when value is undefined/null) undefined is returned.

This is one use, right? .securely access user.kinsfolk. Bother:

let user = {}; // user has no address attribute alert(user? .kinsfolk? .bother ); // undefined (no error)Copy the code

Use user even if the object user does not exist? Kinsfolk to read the address will not report an error.

let user = null; alert( user? .kinsfolk ); // undefined alert( user? .kinsfolk.bother ); // undefinedCopy the code