14-ES6++: Null Coalescing in Javascript

Null Coalescing

Null coalescing is a new feature that was released in ES2020 (ES11). It is a new way to assign a default value to a variable if it is null or undefined.

The syntax for null coalescing is ??. It is used to assign a default value to a variable if it is null or undefined.

How to use it?

Let's see the old way first

const user = {
  name: "Hasan",
  age: 20,
  address: {
    state: 'Cairo',
  },
};

let city = user.address.city;

if (!city) {
  city = "Cairo";
}

console.log(city);

Now let's see the new way

const user = {
  name: "Hasan",
  age: 20,
  address: {
    state: 'Cairo',
  },
};

let city = user.address.city ?? "Cairo";

console.log(city);

See? It is much shorter and easier to read.

So basically you don't have to check if the variable is null or undefined. You can just use ?? to assign a default value to a variable.

What is the difference between || and ???

|| is used to assign a default value to a variable if it is falsy. ?? is used to assign a default value to a variable if it is null or undefined.

What is meant by falsy values? falsy values are values that are considered false when evaluated in a boolean context. For example, 0, '', null, undefined, NaN, false are all falsy values.

Let' see an example to illustrate the difference between || and ??

const user = {
  name: "Hasan",
  age: 20,
  address: {
    state: 'Cairo',
  },
};

let city = user.address.city || "Cairo";

let city2 = user.address.city ?? "Cairo";

console.log(city); // Cairo
console.log(city2); // Cairo

They both are pretty much the same. But what if the value of city is an empty string?

const user = {
  name: "Hasan",
  age: 20,
  address: {
    state: 'Cairo',
    city: '',
  },
};

let city = user.address.city || "Cairo";

let city2 = user.address.city ?? "Cairo";

console.log(city); // Cairo
console.log(city2); // ''

As you can see, || assigns a default value to the variable if it is falsy. But ?? assigns a default value to the variable if it is null or undefined.

As 0 and empty strings are considered values, so it will be pain to make that check first as using || won't be good here, thankfully we have ?? to make that check for us for nullable and undefined values.

Should i use it in my code? 🤔

I think it is a good idea to use it in your code. It is shorter and easier to read. But you should be careful when using it. You should make sure that the variable you are assigning a default value to is nullable or undefined. If it is not, then you should use || instead.

A tip about feature usage

If your project uses a bundler like webpack or rollup, then you can use the nullish coalescing operator in your code. But if you are using a browser, then you should use a transpiler like babel to transpile your code to ES5. You can use babel repl to transpile your code.

🎨 Conclusion

☕♨️ Buy me a Coffee ♨️☕

If you enjoy my articles and see it useful to you, you may buy me a coffee, it will help me to keep going and keep creating more content.

😍 Join our community

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

• Event Driven Architecture: A Practical Guide in Javascript
• Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
• After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL

Packages & Libraries

• Collections: Your ultimate Javascript Arrays Manager
• Supportive Is: an elegant utility to check types of values in JavaScript
• Localization: An agnostic i18n package to manage localization in your project

React Js Packages

• useFetcher: easiest way to fetch data in React Js

Courses (Articles)

• Node Js 2023 Course: Node With Typescript, The Ultimate Guide
• React Js: Let"s Create File Manager With React Js and Node Js