DEV Community

Cover image for Optional Chaining and Nullish Coalescing: Safe Property Access in JavaScript
Mainul Hasan
Mainul Hasan

Posted on • Originally published at javascript.plainenglish.io

1 1 1 1 1

Optional Chaining and Nullish Coalescing: Safe Property Access in JavaScript

Ever seen the Cannot read property ‘x’ of undefined error in your JavaScript? If so, you’re not alone. Many of us get this error when working with JavaScript objects and properties.

But guess what? There are features like Optional Chaining and Nullish Coalescing that can help. In this article, we’ll see how these features keep our code safe and clean.

Why does property access need to be safer?

Well, no one likes errors. And that Cannot read property ‘x’ of undefined error? We’ve all seen it. It pops up when we try to use a property or method that’s not there. Old ways to avoid this error made our code look messy.

For example:

let user = {};
let username = user && user.details && user.details.name;
Enter fullscreen mode Exit fullscreen mode

Looks a bit cluttered, right? But there’s a cleaner way.

Optional Chaining

Here’s what Optional Chaining does: it helps us reach values in objects even if something might be missing.

let username = user?.details?.name;
Enter fullscreen mode Exit fullscreen mode

When should you use Optional Chaining?

  • To safely check nested properties.

  • To call functions without risk.

  • To safely check items in arrays.

But, be careful. Don’t overuse it, or you might miss other errors.

Nullish Coalescing

Here’s a quick quiz. What does the Nullish Coalescing operator (??) do? It checks the left value. If it’s null or undefined, it goes with the right value. If not, it sticks with the left.

let x = value ?? "default";
Enter fullscreen mode Exit fullscreen mode

Also, a quick tip about the || operator. It can be tricky, with values like 0 or an empty string. In JavaScript, values like 0, “”, NaN, false, null, and undefined are falsy. The fun part? Nullish Coalescing only looks at null and undefined.

Usage Scenarios for Nullish Coalescing

  • Setting default values for variables.

  • Handling configurations with potential null/undefined values.

  • More explicit intention than the || operator.

  • Avoids unexpected behaviors with other falsy values like 0 or “”.

Combining Optional Chaining with Nullish Coalescing

Want to mix Optional Chaining and Nullish Coalescing? It’s like magic.

let setting = user?.preferences?.themeColor ?? "blue";
Enter fullscreen mode Exit fullscreen mode

If the user or preferences are undefined or null, or if themeColor is not set, it will assign the setting the default value of “blue”.

Performance Considerations

While these features enhance code readability and safety, you might think about speed. Do they slow down the performance of the app? For most cases, using Optional Chaining or Nullish Coalescing won’t slow you down.

But if you use them often, especially in large-scale applications or loops that run often, you might see some delay. If you’re unsure, always check your app’s performance.

Browser and Environment Support

Are you thinking of using these features? First, check if your browsers support them. As of 2020, most new browsers do. But some old ones might not. Tools like Babel can help. Or check Can I use.

Conclusion

Think about your projects. How much can these features help? These are great features for JavaScript developers. They make code neat, make intentions clearer, and reduce potential errors. And that means robust apps.

If you found this article useful or have more insights on the topic, feel free to connect with me on Twitter and LinkedIn. Let’s continue the conversation there!

Read Next...

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay