Optional Chaining: The Graceful Accessor
Let’s say you have an object representing a user, and you want to access their address.
In the past, you might have done something like this:
const user = {
name: "Alice",
address: { street: "123 Main St" }
};
const street = user.address && user.address.street;
console.log('Street: ', street); // Output: 123 Main St
But what happens if the user object doesn’t have an address property or the address object doesn’t have a street property?
You’d get an error!
Enter Optional Chaining!
This operator (?.
) lets you access nested properties safely, returning undefined if any part of the chain is missing.
For example:
const user = {
name: "Bob"
};
const street = user.address?.street;
console.log('Street: ', street); // Output: undefined
See how much cleaner and concise the code is?
Nullish Coalescing
The Default Value Defender.
Now, let’s imagine you want to assign a default value to a variable if it’s null or undefined. Traditionally, you might use the OR operator (||
). However, this can lead to unexpected behavior if the variable holds a "falsy" value like 0
or an empty string.
Why it's useful:
- It simplifies code by replacing verbose if statements or ternary operators.
- It focuses specifically on null and undefined, unlike the logical OR operator (||) which also treats falsy values (like 0 or empty strings) as "missing".
let userSettings = null; // Imagine this comes from an API or user input
// Without nullish coalescing:
let theme = userSettings !== null && userSettings !== undefined ? userSettings.theme : 'light';
// With nullish coalescing:
let theme = userSettings?.theme ?? 'light'; // If userSettings.theme is null or undefined, 'light' is used
Key points:
- The left side of ?? is evaluated first.
- If the left side is null or undefined, the right side is returned.
- Otherwise, the left side is returned.
It's especially handy when dealing with optional properties or potentially missing data.
Optional chaining and nullish coalescing help you write more readable, robust, and error-resistant code.
Top comments (0)