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 🍻