What is optional chaining (?.) and nullish coalescing (??)?

Optional chaining and nullish coalescing are two powerful features introduced in JavaScript that enhance the way developers handle values that may be null or undefined. These features help to write cleaner, more concise code while reducing the risk of runtime errors. Below, I will explain each concept in detail, provide practical examples, and highlight best practices and common mistakes associated with their usage.

Optional Chaining (?.)

Optional chaining is a syntax that allows you to safely access deeply nested properties of an object without having to check if each reference in the chain is valid. When using optional chaining, if any part of the chain is null or undefined, the expression short-circuits and returns undefined instead of throwing an error.

Practical Example

const user = {
    name: 'Alice',
    address: {
        street: '123 Main St',
        city: 'Wonderland'
    }
};

const userCity = user.address?.city; // 'Wonderland'
const userZip = user.address?.zip; // undefined

In the example above, we safely access the `city` property of the `address` object. If `address` were to be undefined, using optional chaining would prevent a TypeError from being thrown.

Best Practices

• Use optional chaining when accessing properties of objects that may not exist, especially when dealing with data from APIs.
• Combine optional chaining with other features like nullish coalescing to provide default values when properties are not found.
• Be cautious not to overuse optional chaining, as it can lead to ignoring potential issues in your data structure.

Common Mistakes

• Assuming optional chaining will return a default value; it only returns undefined if the chain is broken.
• Using optional chaining on function calls without understanding that it will return undefined if the function is not defined.
• Neglecting to handle the case where the final result is undefined, which can lead to unexpected behavior down the line.

Nullish Coalescing (??)

Nullish coalescing is an operator that allows you to provide a default value when dealing with null or undefined values. Unlike the logical OR operator (||), which returns the first truthy value, the nullish coalescing operator only considers null and undefined as "nullish" values.

Practical Example

const userInput = null;
const defaultInput = 'default value';

const finalInput = userInput ?? defaultInput; // 'default value'

In this example, since `userInput` is null, `finalInput` gets assigned the value of `defaultInput`. If `userInput` were an empty string or zero, those values would be returned instead of the default.

Best Practices

• Use nullish coalescing when you want to provide default values for variables that may be null or undefined, ensuring that falsy values like 0 or '' are not mistakenly replaced.
• Combine nullish coalescing with optional chaining to create robust and safe access patterns for deeply nested properties.
• Be mindful of the context in which you use nullish coalescing to ensure that it aligns with your intended logic.

Common Mistakes

• Confusing nullish coalescing with logical OR, which can lead to unexpected defaults being assigned when falsy values are present.
• Using nullish coalescing in scenarios where you expect to handle other falsy values, which may not yield the desired outcome.
• Overusing nullish coalescing in complex expressions, which can reduce code readability and maintainability.

In conclusion, optional chaining and nullish coalescing are essential tools in modern JavaScript development. They simplify the handling of potentially undefined or null values, making your code cleaner and less error-prone. By understanding their practical applications, best practices, and common pitfalls, you can leverage these features effectively in your projects.