14-ES6++: Null Coalescing in Javascript
Tags: javascript, es6, esnext
Published: 2022-11-26 11:08:18

---
title: 14-ES6++: Null Coalescing in Javascript
published: true
description: 
series: es6++
tags: javascript, es6, esnext
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1c1fx35reysyvcf94ez.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-25 09:51 +0000
---

## 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

```js
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

```js
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 `??`

```js
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?

```js
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](https://webpack.js.org/) or [rollup](https://rollupjs.org/guide/en/), 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](https://babeljs.io/) to transpile your code to ES5. You can use [babel repl](https://babeljs.io/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](https://www.paypal.com/paypalme/hassanzohdy), it will help me to keep going and keep creating more content.

## 😍 Join our community

Join our community on [Discord](https://discord.gg/pb2vmdfhGf) 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](https://dev.to/hassanzohdy/event-driven-architecture-the-best-paradigm-that-i-love-to-work-with-in-javascript-and-node-js-1gnk)
* [Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript](https://dev.to/hassanzohdy/best-practices-for-case-styles-camel-pascal-snake-and-kebab-case-in-node-and-javascript-55oi)
* [After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
](https://dev.to/hassanzohdy/after-6-years-of-practicing-mongodb-here-are-my-thoughts-on-mongodb-vs-mysql-574b)

Packages & Libraries

* [Collections: Your ultimate Javascript Arrays Manager](https://dev.to/hassanzohdy/collections-your-ultimate-javascript-array-handler-3o15)
* [Supportive Is: an elegant utility to check types of values in JavaScript](https://dev.to/hassanzohdy/supportive-is-an-elegant-utility-to-check-types-of-values-in-javascript-1b3e)
* [Localization: An agnostic i18n package to manage localization in your project](https://dev.to/hassanzohdy/mongez-localization-the-simplest-way-to-translate-your-website-regardless-your-favorite-framework-4gi3)

 React Js Packages

* [useFetcher: easiest way to fetch data in React Js](https://dev.to/hassanzohdy/usefetcher-the-easiest-way-to-fetch-data-in-react-45o9)

Courses (Articles)

* [Node Js 2023 Course: Node With Typescript, The Ultimate Guide](https://dev.to/hassanzohdy/nodejs-course-2023-introduction-to-nodejs-3n4e)
* [React Js: Let"s Create File Manager With React Js and Node Js](https://dev.to/hassanzohdy/lets-create-a-file-manager-from-scratch-with-react-and-typescript-chapter-i-a-good-way-to-expand-your-experience-5g4k)