DEV Community

Cover image for 14-ES6++: Null Coalescing in Javascript
Hasan Zohdy
Hasan Zohdy

Posted on

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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); // ''
Enter fullscreen mode Exit fullscreen mode

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

Packages & Libraries

React Js Packages

Courses (Articles)

Top comments (0)