In JavaScript, accessing nested properties or checking if a value is null or undefined can lead to errors if not handled properly. Fortunately, JavaScript has introduced two new operators - nullish coalescing and optional chaining - that can help simplify your code and prevent errors.
Nullish Coalescing Operator
The nullish coalescing operator (??
) provides a concise way to check for null or undefined values and provide a default value in case they are encountered. The operator returns the first operand if it is not null or undefined. If it is null or undefined, it returns the second operand.
Here's an example that demonstrates the use of the nullish coalescing operator:
const ex1 = null ?? 'default value'; // 'default value'
const ex2 = undefined ?? 'default value'; // 'default value'
const ex3 = 'value' ?? 'default value'; // 'value'
In the example above, ex1
and ex2
are assigned the default value because their values are null or undefined, whereas ex3
is assigned the value 'value'
because it is not null or undefined.
Optional Chaining Operator
The optional chaining operator (?.
) provides a way to access the properties of an object without having to check if each level of nesting is defined. This can help prevent errors that occur when trying to access properties of null or undefined values.
Here's an example that demonstrates the use of the optional chaining operator:
const person = {
name: 'Gautam',
address: {
street: '123 Kursi St.',
city: 'Lucknow',
state: 'UP',
},
};
const street = person.address?.street; // '123 Kursi St.'
const country = person.address?.country; // undefined
In the example above, street
is assigned the value '123 Kursi St.'
because the address
object exists and has a street
property. However, country
is assigned the value undefined
because the address
object does not have a country
property.
Using Nullish Coalescing and Optional Chaining Together
The nullish coalescing operator and the optional chaining operator can be used together to provide a default value when accessing a nested property that may not exist. Here's an example:
const person = {
name: 'Gautam',
address: {
street: '123 Kursi St.',
city: 'Lucknow',
state: 'UP',
},
};
const country = person.address?.country ?? 'India'; // 'India'
In the example above, country
is assigned the value 'India'
because the address
object does not have a country
property.
Conclusion
Nullish coalescing and optional chaining are two new operators in JavaScript that can help simplify your code and prevent errors. The nullish coalescing operator provides a concise way to check for null or undefined values and provide a default value in case they are encountered, while the optional chaining operator provides a way to access the properties of an object without having to check if each level of nesting is defined. Together, these operators can provide a powerful tool for writing more robust and error-free code.
References
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
Follow me on Twitter for more such blogs.
Cheers ๐ป