Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 20, 2021 07:37 pm GMT

JavaScript Optional Chaining '?.'

image.png

The optional chaining ?. is a safe way to access nested object properties, even if an intermediate property doesn't exist.

Let's assume each user is required to fill an online form of name and address, but users mostly ignored the address input field to submit the form.

The submitted form of one of the user is modeled as an object as shown below:

const user = { name: 'Bello' }console.log(user, user.address); // { name: 'Bello' } undefined
Enter fullscreen mode Exit fullscreen mode

The user.address returns undefined because it is not filled by the user.

Let's also assume each address object must have a street. In such a case, we get an error. For deeply nested objects, properties, we get an error.

See example below:

const user = { name: 'Bello' }console.log(user, user.address); // TypeError: Cannot read property 'street' of undefined
Enter fullscreen mode Exit fullscreen mode

What if we don't want that much error but undefined for objects that don't exist.

See the example below:

const user = { name: 'Bello' }console.log(user, user.address ? user.address.street : undefined);// { name: 'Bello' } undefined
Enter fullscreen mode Exit fullscreen mode

What if we have another nested object called name as shown below:

const user = { name: 'Bello' }console.log(  user,   user.address ? user.address.street ? user.address.street.name   : null : null  );// { name: 'Bello' } null
Enter fullscreen mode Exit fullscreen mode

The code snippet above is the same as below:

const user = { name: 'Bello' }console.log(user, user.address && user.address.street && user.address.street.name);// { name: 'Bello' } undefined
Enter fullscreen mode Exit fullscreen mode

We do not see the long string of the error in the console, but there is one issue we need to tackle - the repetitive nesting obj.obj1...objN or obj.obj1...objN.propN.

Optional chaining solves the repetitive object nesting issue. The Optional chaining above was released in ECMAScript2020.

See the example below:

const user = {name: 'Bello'};document.write(user, user?.address?.street?.name); // [object Object]undefined
Enter fullscreen mode Exit fullscreen mode

Note: There must be a variable first like user for the example above to work.

If you are getting an error, an older JavaScript engine is used by your browser. You need to upgrade the browser.

Edit on Stackblitz

Let's make the user object empty below:

const user = { };document.write(user?.address?.street?.name); // undefined
Enter fullscreen mode Exit fullscreen mode

The ?. in an expression can also short-circuit. It is like the logical && operator. It finds the first falsy value from left to right and returns it (ignoring any other values after it).

The optional chaining ?. is not an operator, but a special syntax construct

See the examples below:

const user = null;document.write( user?.address ); // undefineddocument.write( user?.address.street ); // undefined
Enter fullscreen mode Exit fullscreen mode

Recall null == undefined

const user = null;const x = 0;document.write?.increaseBy1(x++); // user value, null is falsy => .increaseBy1(x++) ignoreddocument.write(x); // 0
Enter fullscreen mode Exit fullscreen mode

The construct, ?. also works on functions.

Syntax:

functionName?.()
Enter fullscreen mode Exit fullscreen mode

See the example below:

const userAdmin = {  admin() {    document.write("I am admin");  }};const userGuest = { };userAdmin.admin?.(); // I am adminuserGuest.admin?.(); // no output, no error
Enter fullscreen mode Exit fullscreen mode

There's also another optional chaining syntax for retrieving object keys values.

Syntax:

object?.[key]
Enter fullscreen mode Exit fullscreen mode

See the example below:

const key = "firstName";const user1 = {  firstName: "Osagie"};let user2 = null;document.write( user1?.[key] ); // Osagiedocument.write( user2?.[key] ); // undefined
Enter fullscreen mode Exit fullscreen mode

Also we can use ?. with delete:

delete user?.name; // ReferenceError: user is not defined
Enter fullscreen mode Exit fullscreen mode

We can use ?. for safe reading and deleting, but not writing.

See the example below:

const user = null;user?.name = "John"; // error
Enter fullscreen mode Exit fullscreen mode

Happy coding

image.png

image.png


Original Link: https://dev.to/bello/javascript-optional-chaining-a3l

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To