Image taken from Unsplash

Nullish Coalescing

We can provide default values using nullish coalescing when the left-hand expression is null or undefined.

We can also use logical or operator || to set default value, however the left-hand expression will evaluate boolean falsy values, such as 0, ’’, null, undefined, NaN, false, which sometimes can cause unexpected behavior.

For example, we want to create a function that will set the default options for darkmode to true, otherwise it will return the passed options parameter instead.

const darkmode = (options) => {
  return options ?? true;
}

console.log(darkmode(false)); // false

We can also combine with optional chaining. In this example, we would like to check if the lang property inside the post Object is available, if it doesn't we will set the default lang to en

const post = {
  category: 'technology',
  author: 'Bambang',
  details: {
    title: 'What is Javascript?',
    date: '2021-01-01'
  }
};

console.log(post?.details?.lang ?? 'en');

It's really powerful and we have so much to explore.

Nullish Coalescing is a new feature in ES2020.