JavaScript Basics: Truthy and Falsy values in JavaScript

Do you know that JavaScript has a set of pre-defined falsy values?

Truthy and Falsy values are the non-boolean values that are coerced to true or false when performing certain operations.

The following are the only eight values that are considered as falsy values in JavaScript.

• false
• undefined
• null
• ""
• NaN
• 0
• -0
• 0n

Anything that is not present in the above list is considered as truthy. So if you are writing an if condition, you don’t need to check if something is empty or undefined or null. It will automatically be considered as false.

const value = "";
// this condition is enough and no need to check value == ""
if(value) {
  console.log(value); // This code will not be executed
}

const nullValue = null;
// this condition is enough and no need to check value === null
if(nullValue) {
   console.log(nullValue); // This code will not be executed
}

let sum;
// this condition is enough and no need to check value === undefined
if(sum) {
   console.log(sum); // This code will not be executed
}

An easy way of checking if a value is truthy or falsy is by passing it to the Boolean constructor function.

Boolean(NaN) // false
Boolean([]) // true
Boolean({}) // true

You can turn any value into its truthy or falsy boolean value by flipping it twice:

let number1;
console.log(!!number1); // false

const number2 = 10;
console.log(!!number2); // true

const name1 = 'Tim';
console.log(!!name1); // true

const name2 = '';
console.log(!!name2); // false

const nullValue = null;
console.log(!!nullValue); // false

This has some practical applications too.

Applying Truthy and Falsy Values

Suppose, you are parsing a CSV file and each column contains comma-separated names, numbers, and some empty values. There are some blank spaces, so when you parse each line, you might get something like this:

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

const parsedData = 'David,Mike,Tim,,John, 10,, Jonathan';

And you want to print only values which are valid, so in this case you can do something like this

const parsedData = 'David,Mike,Tim,,John, 10,, Jonathan';
console.log(
 parsedData
  .split(',')
  .map(value => value.trim())
  .filter(value => !!value)
  .join(' ')
); // David Mike Tim John 10 Jonathan

Which can be further simplified as

const parsedData = 'David,Mike,Tim,,John, 10,, Jonathan';
console.log(
 parsedData
  .split(',')
  .map(value => value.trim())
  .filter(Boolean)
  .join(' ')
); // David Mike Tim John 10 Jonathan

If you have an array of different values like

const arr = [10, 20, "raj", 0, [], '', NaN, 3, undefined, 50, null, 89];

Then, you can get valid values as

const arr = [10, 20, 'raj', 0, [], '', NaN, 3, undefined, 50, null, 
89];
console.log(arr.filter(Boolean)); //[ 10, 20, 'raj', [], 3, 50, 89 ]

Thanks for reading!

Check out my recently published Mastering Redux course.

In this course, you will learn:

• Basic and advanced Redux
• How to manage the complex state of array and objects
• How to use multiple reducers to manage complex redux state
• How to debug Redux application
• How to use Redux in React using react-redux library to make your app reactive.
• How to use redux-thunk library to handle async API calls and much more

and then finally we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to the production.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.