Cara menggunakan nested objects javascript mdn

Question

The optional chaining

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 is a safe way to access nested object properties, even if an intermediate property doesn’t exist.

Table of Contents Show

If you’ve just started to read the tutorial and learn JavaScript, maybe the problem hasn’t touched you yet, but it’s quite common.

As an example, let’s say we have

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

6 objects that hold the information about our users.

Most of our users have addresses in

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

7 property, with the street

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

8, but some did not provide them.

In such case, when we attempt to get

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

8, and the user happens to be without an address, we get an error:

let user = {}; // a user without "address" property

alert(user.address.street); // Error!

That’s the expected result. JavaScript works like this. As

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

7 is

let user = {};

alert(user.address ? user.address.street : undefined);

1, an attempt to get

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

8 fails with an error.

In many practical cases we’d prefer to get

let user = {};

alert(user.address ? user.address.street : undefined);

1 instead of an error here (meaning “no street”).

…and another example. In Web development, we can get an object that corresponds to a web page element using a special method call, such as

let user = {};

alert(user.address ? user.address.street : undefined);

4, and it returns

let user = {};

alert(user.address ? user.address.street : undefined);

5 when there’s no such element.

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

Once again, if the element doesn’t exist, we’ll get an error accessing

let user = {};

alert(user.address ? user.address.street : undefined);

6 property of

let user = {};

alert(user.address ? user.address.street : undefined);

5. And in some cases, when the absence of the element is normal, we’d like to avoid the error and just accept

let user = {};

alert(user.address ? user.address.street : undefined);

8 as the result.

How can we do this?

The obvious solution would be to check the value using

let user = {};

alert(user.address ? user.address.street : undefined);

9 or the conditional operator

let html = document.querySelector('.elem') ? document.querySelector('.elem').innerHTML : null;

0, before accessing its property, like this:

let user = {};

alert(user.address ? user.address.street : undefined);

It works, there’s no error… But it’s quite inelegant. As you can see, the

let html = document.querySelector('.elem') ? document.querySelector('.elem').innerHTML : null;

1 appears twice in the code.

Here’s how the same would look for

let html = document.querySelector('.elem') ? document.querySelector('.elem').innerHTML : null;

2:

let html = document.querySelector('.elem') ? document.querySelector('.elem').innerHTML : null;

We can see that the element search

let user = {};

alert(user.address ? user.address.street : undefined);

4 is actually called twice here. Not good.

For more deeply nested properties, it becomes even uglier, as more repetitions are required.

E.g. let’s get

let html = document.querySelector('.elem') ? document.querySelector('.elem').innerHTML : null;

4 in a similar fashion.

let user = {}; // user has no address

alert(user.address ? user.address.street ? user.address.street.name : null : null);

That’s just awful, one may even have problems understanding such code.

There’s a little better way to write it, using the

let html = document.querySelector('.elem') ? document.querySelector('.elem').innerHTML : null;

5 operator:

let user = {}; // user has no address

alert( user.address && user.address.street && user.address.street.name ); // undefined (no error)

AND’ing the whole path to the property ensures that all components exist (if not, the evaluation stops), but also isn’t ideal.

As you can see, property names are still duplicated in the code. E.g. in the code above,

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

7 appears three times.

That’s why the optional chaining

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 was added to the language. To solve this problem once and for all!

The optional chaining

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 stops the evaluation if the value before

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 is

let user = {};

alert(user.address ? user.address.street : undefined);

1 or

let user = {};

alert(user.address ? user.address.street : undefined);

5 and returns

let user = {};

alert(user.address ? user.address.street : undefined);

1.

Further in this article, for brevity, we’ll be saying that something “exists” if it’s not

let user = {};

alert(user.address ? user.address.street : undefined);

5 and not

let user = {};

alert(user.address ? user.address.street : undefined);

1.

In other words,

let user = {}; // user has no address

alert(user.address ? user.address.street ? user.address.street.name : null : null);

5:

works as

let user = {}; // user has no address

alert(user.address ? user.address.street ? user.address.street.name : null : null);

6, if

let user = {}; // user has no address

alert(user.address ? user.address.street ? user.address.street.name : null : null);

7 exists,

otherwise (when

let user = {}; // user has no address

alert(user.address ? user.address.street ? user.address.street.name : null : null);

7 is

let user = {}; // user has no address

alert(user.address ? user.address.street ? user.address.street.name : null : null);

9) it returns

let user = {};

alert(user.address ? user.address.street : undefined);

1.

Here’s the safe way to access

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

8 using

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5:

let user = {}; // user has no address

alert( user?.address?.street ); // undefined (no error)

The code is short and clean, there’s no duplication at all.

Here’s an example with

let html = document.querySelector('.elem') ? document.querySelector('.elem').innerHTML : null;

2:

let html = document.querySelector('.elem')?.innerHTML; // will be undefined, if there's no element

Reading the address with

let user = {}; // user has no address

alert( user.address && user.address.street && user.address.street.name ); // undefined (no error)

4 works even if

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

6 object doesn’t exist:

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

Please note: the

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 syntax makes optional the value before it, but not any further.

E.g. in

let user = {}; // user has no address

alert( user.address && user.address.street && user.address.street.name ); // undefined (no error)

7 the

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 allows

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

6 to safely be

let user = {}; // user has no address

alert( user?.address?.street ); // undefined (no error)

0 (and returns

let user = {};

alert(user.address ? user.address.street : undefined);

1 in that case), but that’s only for

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

6. Further properties are accessed in a regular way. If we want some of them to be optional, then we’ll need to replace more

let user = {}; // user has no address

alert( user?.address?.street ); // undefined (no error)

3 with

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5.

Don’t overuse the optional chaining

We should use

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 only where it’s ok that something doesn’t exist.

For example, if according to our code logic

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

6 object must exist, but

let user = {}; // user has no address

alert( user?.address?.street ); // undefined (no error)

7 is optional, then we should write

let user = {}; // user has no address

alert( user?.address?.street ); // undefined (no error)

8, but not

let user = {}; // user has no address

alert( user?.address?.street ); // undefined (no error)

9.

Then, if

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

6 happens to be undefined, we’ll see a programming error about it and fix it. Otherwise, if we overuse

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5, coding errors can be silenced where not appropriate, and become more difficult to debug.

The variable before

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 must be declared

If there’s no variable

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

6 at all, then

let html = document.querySelector('.elem')?.innerHTML; // will be undefined, if there's no element

4 triggers an error:

// ReferenceError: user is not defined
user?.address;

The variable must be declared (e.g.

let html = document.querySelector('.elem')?.innerHTML; // will be undefined, if there's no element

5 or as a function parameter). The optional chaining works only for declared variables.

As it was said before, the

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 immediately stops (“short-circuits”) the evaluation if the left part doesn’t exist.

So, if there are any further function calls or operations to the right of

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5, they won’t be made.

For instance:

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

0

The optional chaining

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 is not an operator, but a special syntax construct, that also works with functions and square brackets.

For example,

let html = document.querySelector('.elem')?.innerHTML; // will be undefined, if there's no element

9 is used to call a function that may not exist.

In the code below, some of our users have

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

0 method, and some don’t:

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

1

Here, in both lines we first use the dot (

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

1) to get

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

0 property, because we assume that the

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

6 object exists, so it’s safe read from it.

Then

let html = document.querySelector('.elem')?.innerHTML; // will be undefined, if there's no element

9 checks the left part: if the

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

0 function exists, then it runs (that’s so for

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

6). Otherwise (for

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

7) the evaluation stops without errors.

The

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

8 syntax also works, if we’d like to use brackets

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

9 to access properties instead of dot

let user = {}; // user has no address

alert( user?.address?.street ); // undefined (no error)

3. Similar to previous cases, it allows to safely read a property from an object that may not exist.

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

2

Also we can use

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 with

// ReferenceError: user is not defined
user?.address;

2:

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

3

We can use

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 for safe reading and deleting, but not writing

The optional chaining

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 has no use on the left side of an assignment.

For example:

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

4

The optional chaining

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 syntax has three forms:

// ReferenceError: user is not defined
user?.address;

6 – returns

// ReferenceError: user is not defined
user?.address;

7 if

// ReferenceError: user is not defined
user?.address;

8 exists, otherwise

let user = {};

alert(user.address ? user.address.street : undefined);

1.

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

00 – returns

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

01 if

// ReferenceError: user is not defined
user?.address;

8 exists, otherwise

let user = {};

alert(user.address ? user.address.street : undefined);

1.

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

04 – calls

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

05 if

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

06 exists, otherwise returns

let user = {};

alert(user.address ? user.address.street : undefined);

1.

As we can see, all of them are straightforward and simple to use. The

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 checks the left part for

let user = {}; // user has no address

alert( user?.address?.street ); // undefined (no error)

0 and allows the evaluation to proceed if it’s not so.

A chain of

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 allows to safely access nested properties.

Still, we should apply

// document.querySelector('.elem') is null if there's no element
let html = document.querySelector('.elem').innerHTML; // error if it's null

5 carefully, only where it’s acceptable, according to our code logic, that the left part doesn’t exist. So that it won’t hide programming errors from us, if they occur.

kode javascript

Cara menggunakan nested objects javascript mdn

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social