How to use Optional Chaining and Nullish Coalescing in JavaScript

JavaScript programs frequently deal with data that may or may not exist. Accessing a property on null or undefined throws a TypeError that crashes your program. Traditionally, developers wrote deeply nested if statements or chains of logical AND operators to safely access nested properties. This defensive code was verbose, repetitive, and obscured the actual intent of the code.

Optional chaining uses the question mark dot syntax. When you write object?.property, JavaScript checks if object is null or undefined. If it is, the entire expression short-circuits and evaluates to undefined without throwing an error. If the object has a value, property access proceeds normally. This eliminates the need for manual null checks before every property access.

Optional chaining is most valuable for accessing deeply nested properties where any intermediate value might be absent. Write user?.address?.street to safely access a nested property. If user is null or undefined, the expression is undefined. If address is null or undefined, the expression is undefined. Only if both exist does the expression return the actual street value. Each question mark dot independently guards against null and undefined.

Use the question mark dot syntax before method calls to safely call a method that might not exist. Writing object?.method() checks if object is null or undefined before attempting the call. You can also check if the method itself exists on a non-null object by writing object.method?.(). The second form is useful when an object might exist but a particular method might not be defined on it.

Combine optional chaining with bracket notation for safe array element access. Write array?.[0] to safely access the first element of an array that might be null or undefined. This is useful when dealing with API responses where an array property might be absent from the response object depending on the result.

The nullish coalescing operator uses two question marks. The expression a ?? b returns a if a is neither null nor undefined. It returns b if a is null or undefined. Unlike the logical OR operator, nullish coalescing does not treat falsy values like zero, empty string, or false as absent values. This makes it safe to use with legitimate falsy values that should not trigger the fallback.

The logical OR operator returns the right side when the left side is any falsy value including zero, empty string, false, null, and undefined. Nullish coalescing returns the right side only when the left side is specifically null or undefined. If you have a configuration value that can legitimately be zero or an empty string, using logical OR would incorrectly fall through to the default. Nullish coalescing correctly uses the zero or empty string value.

The two operators work naturally together. Write user?.profile?.displayName ?? 'Anonymous' to safely access a nested property and provide a fallback when the property is absent or when the path short-circuited to undefined. The optional chaining handles the safe traversal and the nullish coalescing handles the fallback for undefined results. This combination replaces large amounts of defensive null-checking code with a single expressive line.