Logo-Img

Nullish Coalescing in JavaScript

Hey there! It's been a while since I wrote an article; kinda had a writer's block. Well, I just recently learned about a really cool thing in our beloved JavaScript and I thought it would be nice to share.

Today we'd be talking about Nullish Coalescing in JavaScript. The nullish coalescing operator (??) is considered a logical operator - much like the 'OR' (||), 'AND' (&&) and 'NOT' (!) operators - that returns the right side operand if and only if the operand on the left-hand side has a null or undefined value. It is quite similar to the 'OR' operator, but with a significant difference which we will get to soon enough.

To see this in action, let's consider the code below:

// for null values
let x = null;
let y = x ?? "defaultValue";
console.log(y); //returns 'defaultValue'

//for undefined values
let m = undefined;
let n = m ?? "defaultValue";
console.log(n); //returns 'defaultValue'

This also works if the left-hand side operand has been declared but not yet assigned a value as this is also an undefined value, like in the example below.

let f;
let g = f ?? "defaultValue";
console.log(g); //returns 'defaultValue'

As I mentioned, the nullish operator is somewhat similar to the OR operator except for an important difference. The OR operator returns the right-hand side operand for not just null and undefined values but also for falsy values. Consider the code below:

// with nullish operator
let a = false;
let b = a ?? "defaultValue";
console.log(b); //returns false

//with OR operator
let k = false; //also works with 0
let l = a || "defaultValue";
console.log(b); //returns 'defaultValue'

You might be wondering what the use case for this is, let's consider the code block below:

import React from "react";
const profile = {
  numberOfPosts: 0,
  username: "",
};
let displayNumberOfPosts =
  numberOfPosts || "An error occured while fetching data";
export const Example = () => {
  return <p>{displayNumberOfPosts}</p>;
};

The above returns <p>An error occured while fetching data</p> because 0 is a falsy value hence the OR operator returns the right hand side operand, in this case being 'An error occured while fetching data' which is unintended. The desired result could be achieved by using the nullish coalescing operator as thus:

import React from "react";
const profile = {
  numberOfPosts: 0,
  username: "",
};
let displayNumberOfPosts =
  numberOfPosts ?? "An error occured while fetching data";
export const Example = () => {
  return <p>{displayNumberOfPosts}</p>;
};

The above will return <p>0</p> as the operator returns the right-hand side operand only if the left-hand side is a nullish value, and not a falsy one.

The nullish coalescing operator is currently a stage four proposal for ES2020 which is the last stage for the TC39 process and I'm sure we can't wait to start using it soon in the next version of JavaScript.

Thanks for taking the time to read this article. I will be writing even more; stay tuned!

Also on coleruche.com

Logo-Img

AUG 22, 2024

ReactNode vs React.Element: Understanding the Difference

Logo-Img

JUL 13, 2024

Understanding the Difference Between `Array<T>` and `T[]` in TypeScript

Logo-Img

DEC 29, 2023

Auto Zoom on Small-Font Inputs

Join the Newsletter

Subscribe to receive regular updates on new products, articles, and courses.

Want to receive free Sepolia ETH for this? Visit the faucet after confirming your subscription.
    We won't send you spam. Unsubscribe at any time.
    Built with ConvertKit
    Logo-Img

    🧑🏼‍💻byUdeh Princewill N

    &

    🎨byChekwube Peters

    © 2023 coleruche.com, All rights reserved.