This image is a code snippet and this is the code in the image : const tenant1 = {     name: "John Doe",     cars: null,      numberOfPets: 0,   };      const tenant2 = {     name: "Jane Smith",     cars: 2,     numberOfPets: null,    };       function getTenantInfo(tenant: { name: string; cars: unknown; numberOfPets: unknown; }) {     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);

Blog

Nullish Coalescing: JavaScript Operator You Should Be Using More

This image is a code snippet and this is the code in the image : const tenant1 = {     name: "John Doe",     cars: null,      numberOfPets: 0,   };      const tenant2 = {     name: "Jane Smith",     cars: 2,     numberOfPets: null,    };       function getTenantInfo(tenant: { name: string; cars: unknown; numberOfPets: unknown; }) {     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);

Blog

Nullish Coalescing: JavaScript Operator You Should Be Using More

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:

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.


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.


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.

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

function getTenantInfo(tenant: { name: string; cars: unknown; numberOfPets: unknown; }) {
  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);

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 means we never got the data for the tenant's 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.

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.

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

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.

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

function getTenantInfo(tenant: { name: string; cars: unknown; numberOfPets: unknown; }) {
  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);

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 means we never got the data for the tenant's 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.

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.

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

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:

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.


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.

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

function getTenantInfo(tenant: { name: string; cars: unknown; numberOfPets: unknown; }) {
  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);

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 means we never got the data for the tenant's 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.

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.

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

Other Blogs

Other Blogs

Check our other project Blogs with useful insight and information for your businesses

Other Blogs

Other Blogs

Check our other project Blogs with useful insight and information for your businesses

Other Blogs

Other Blogs

Check our other project Blogs with useful insight and information for your businesses