Blog / Javascript

What is Nullish in JavaScript?

What is Nullish in JavaScript?

Have you been wonding what nullish is in JavaScript? You might have heard of the nullish coalescing operator, but what about nullish? Find out in this post.

Will MaygerWill Mayger
July 22, 2021
Article

This post is going to look at what nullish is in JavaScript and how it is different from falsy or truthy values.

You may have heard of nullish in various things within JavaScript such as the Nullish Coalescing Operator and Optional Chaining.

Let’s now take a look into what that means, what nullish is and how it compares to falsy and truthy values.

What is Nullish in JavaScript?

In JavaScript, Nullish means anything that is either undefined or null. You can think of it in a similar way to how you would think of something that is either truthy or falsy.

Nullish is always a falsy value though so nullish is contained within falsy because both undefined and null are both falsy values.

(If you are unfamiliar with truthy and falsy values, don’t worry I will cover them in the next section below.)

The times you might want to make use of nullish values are when you use the Nullish Coalescing Operator.

Here is a quick example of how this will look in JS:

null ?? "Hello World" // "Hello World"
false ?? "Hello World" // false
0 ?? "Hello World" // 0
undefined ?? "Hello World" // "Hello World"

What are Falsy and Truthy values and how are they different from Nullish values?

A falsy value in JavaScript is anything that evaluates as false, and may or may not be a boolean.

This means that a boolean is always either truthy or falsy, but a truthy or falsy value is not always a boolean.

All this means is that every value in JavaScript can be essentially converted into a boolean value (true or false, 1 or 0, on or off).

And anything that can be converted into false is a falsy value.

An easy way to convert a value into a boolean in JavaScript is to negate it twice using the logical NOT symbol !.

For example of double negation to create a boolean:

!!true // true
!!false // false

Example of falsy values:

!!0 // false
!!" // false
!!10 // true
!!"hello" // true

Truthy values on the other hand are the counterpart of falsy values meaning that everything is exactly the same except when you evaluate a value it will return true instead of false.

Here is a list of all the falsy values in JavaScript.

And anything that is not on that list is a truthy value.

So how do they differ from nullish values?

Well, nullish values are always falsy values because there are only two nullish values in JavaScript which are null and undefined.

The reason why you can think of them in a similar way to falsy is because they also evaluate a subset of values to determine if they are nullish or not.

All this means is a nullish check is just a way to more specifically check if something is null or undefined rather than just falsy.

For example, if you want a condition to pass if it is provided with any string, including empty strings and fail when it is provided with null or undefined then you might want to check for nullish values rather than falsy values because an empty string evaluates to false meaning it is falsy and would therefore fail the condition even though you want it to pass with an empty string.

However, if you checked for nullish values, because an empty string is not a nullish value it will still pass the condition.

Example with a falsy check:

null || "Did not pass" // "Did not pass"
Undefined || "Did not pass" // "Did not pass"
"" || "Did not pass" // "Did not pass"

Example with a nullish check:

null ?? "Did not pass" // "Did not pass"
undefined ?? "Did not pass" // "Did not pass"
"" ?? "Did not pass" // "" (this means it passed!)

Summary

So to summarize this all in a few words, Nullish is anything that is either undefined or null, falsy is anything that evaluates to false, and truthy is anything that evaluates to true.

I hope this post has helped, but before you go I highly recommend that you checkout Pluralsight if you are interested in improving your software engineering skills, such as React, JavaScript, or Typescript (and much more).

Not only does Pluralsight provide you with all the learning material you need but it also let's you learn in a fun, interactive way and gives you the ability to see your current progress and level in a certain skill via their Skill Assessment tool which can help you see what you need to learn next to keep improving!

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Some graphics used on this post were made using icons from flaticon.

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Earn more and take your coding career to the next level.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.