Nullish Coalescing: The JavaScript Operator You Should Be Utilizing More Often

Nullish Coalescing: The JavaScript Operator You Should Be Utilizing More Often

JavaScript has a ton of logical operators, but there's one that often flies under the radar, nullish coalescing ??

Very Useful and here's how you can use it:

const tenant1 = {
    name: "John Doe",
    cars: null, 
    numberOfPets: 0,
  };

  const tenant2 = {
    name: "Jane Smith",
    cars: 2,
    numberOfPets: null, 
  };


  function getTenantInfo(tenant) {
    const cars = tenant.cars ?? "No car information available";
    const numberOfPets = tenant.numberOfPets ?? "No pet data available";

    console.log(`Tenant: ${tenant.name}`);
    console.log(`Cars: ${cars}`);
    console.log(`Number of pets: ${numberOfPets}`);
  }

  getTenantInfo(tenant1);
  getTenantInfo(tenant2);

Nullish coalescing is a logical operator (??) that helps handle null and undefined values.

It works by returning the right-hand value if the left-hand value is null or undefined.

const value = someVariable ?? 'default value';

if someVariable is null or undefined, it returns 'default value'.

At this point, you might be thinking:

"Why not just use the OR (||) operator?"

Great question! The problem is that || treats falsy values (0, false, "", etc.) as if they don’t exist.
Here’s a real example:

In this code snippet, which was at the top of the thread, we have a basic app for an apartment rental company.

Logging basic data like the tenant, number of cars, pets, etc.

For numberOfPets we have 2 different values, 0 and null for Tenant1 and 2

Null in this situation meaning we never got the data for the tenants pets and that we should find that out. Maybe they forgot to fill that line in on the application or the manager forgot to ask. Either way, we need a value there so this is a good place to remind the staff that "No pet data available"

but if WE DID ask and found out that they had 0 pets, that means WE DO have the data. We want to see that 0.

Using OR operator
const numberOfPets = tenant.numberOfPets || "No pet data available";

Since 0 is falsy in JavaScript, || treats it as "missing" and returns "No pet data available"

WHICH IS INCORRECT and doesn't help us here.
We want to see the 0, not an incorrect message.

Using Nullish Coalescing
const numberOfPets = tenant.numberOfPets ?? "No pet data available";

With ?? we will only fall back to the default message if it’s null or undefined. If the value is 0, it correctly displays 0.

So, next time you reach for ||, ask yourself: “Do I really want to override all falsy values, or just the nullish ones?” If it’s the latter, ?? is your answer.

Will you start using nullish coalescing?
Let me know!

Twitter: https://x.com/DThompsonDev
Linkedin: https://www.linkedin.com/in/dthompsondev/
Bluesky: https://bsky.app/profile/dthompsondev.bsky.social