This content originally appeared on DEV Community and was authored by Bello
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
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
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
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
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
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
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.
Let's make the user object empty below:
const user = { };
document.write(user?.address?.street?.name);
// undefined
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 ); // undefined
document.write( user?.address.street ); // undefined
Recall null == undefined
const user = null;
const x = 0;
document.write?.increaseBy1(x++);
// user value, null is falsy => .increaseBy1(x++) ignored
document.write(x); // 0
The construct, ?. also works on functions.
Syntax:
functionName?.()
See the example below:
const userAdmin = {
admin() {
document.write("I am admin");
}
};
const userGuest = { };
userAdmin.admin?.(); // I am admin
userGuest.admin?.(); // no output, no error
There's also another optional chaining syntax for retrieving object keys values.
Syntax:
object?.[key]
See the example below:
const key = "firstName";
const user1 = {
firstName: "Osagie"
};
let user2 = null;
document.write( user1?.[key] ); // Osagie
document.write( user2?.[key] ); // undefined
Also we can use ?. with delete:
delete user?.name; // ReferenceError: user is not defined
We can use
?.for safe reading and deleting, but not writing.
See the example below:
const user = null;
user?.name = "John"; // error
Happy coding
This content originally appeared on DEV Community and was authored by Bello
Bello | Sciencx (2021-02-20T19:37:02+00:00) JavaScript Optional Chaining ‘?.’. Retrieved from https://www.scien.cx/2021/02/20/javascript-optional-chaining/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.