nullish coalescing operator in javascript

nullish coalescing is a valuable addition in javascript.

represent as ?? format, it provides a streamlined approach for working with variables that may be assigned null or undefined values.

when encountering a ?? b expression, the return value will be:

• a if a is defined.
• b if a is not defined.

for instance, let’s say we have a user variable, and we want to know if this user has already logged in or not. firstly, we may use the traditional approach with an if / else condition like this:

let user

if (user) {
  console.log(user)
} else {
  console.log('User not found')
}

// Output: User not found

as demonstrated, if the variable user is not defined, the output will be user not found.

we can achieve the same outcome more concisely with the ternary operator

let user

console.log(user ? user : 'User not found')

// Output: User not found

as demonstrated, if the variable user is not defined, the output will be user not found.

we can achieve the same outcome more concisely with the ternary operator:

let user

console.log(user ? user : 'User not found')

// Output: User not found

here comes the nullish coalescing operator:

let user

console.log(user ?? 'User not found')

// Output: User not found

while the nullish coalescing operator may appear similar to the logical or operator (||), there is a key difference to consider: the ?? operator specifically targets null and undefined , while || considers all falsy values.

besides, mixing ?? with those two characters operators && and || can sometimes lead to unexpected results or errors if we don’t pay attention to operator precedence:

const result = value && value.property ?? 'default';

// Error: '&&' and '??' operations cannot be mixed without parentheses.

you wouldn’t want to wait in the economy class line if you bought a business class ticket. similarly, using parentheses to explicitly define the order of operations is a good way to provide clarity and avoid errors:

let subscribe = (true && !false) ?? false

console.log(subscribe)

// true