Coner Murphy

Published on 22 May 2021 | 3 Minute Read

JavaScript Fundamentals: Truthy and Falsy Values Explained

Truthy and Falsy values are a fundamental part of JavaScript and understanding them is key to writing efficent JavaScript. Here's all you need to know.

JavaScript Fundamentals: Truthy and Falsy Values Explained

A large part of using JavaScript is dealing with booleans. This might be in conditional rendering or an if statement. But, regardless booleans are everywhere.

For this reason, it's important that we understand that every value we create in JavaScript evaluates to either true or false. Values are known to either be `truthy` (evaluate to true) or `falsy` (evaluate to false).

In this post, let's take a look at both of them and learn a bit more about them.

Truthy Values

By default, every value in JavaScript is `truthy`. The only time it won't be `truthy` is if it's one of the values on the `falsy` value list. (We'll come to this in a second).

This means that any time we create a value, whether it be a function, an object or a variable declaration it will evaluate to true.

This is how we can run if statements to check if a variable is present or not:

1const helloWorld = "hello";
2
3if (helloWorld) {
4 console.log(helloWorld);
5}
jsx

Because `helloWorld` has a value it is `truthy` and will satisfy the if condition and run the code block.

Here is an example of values that can be considered to be `truthy`.

List of Truthy Values

Falsy Values

`Falsy` values are the opposite of `truthy` values. That means is if we define a value using one of these `falsy` values it will evaluate to false.

Unlike `truthy` values, only certain values are `falsy`. Here is a complete list of them:

List of Falsy Values

Read more about [[IsHTMLDDA]]

If we were to use one of these in the if statement from before it wouldn't run the code block.

1const helloWorld = "";
2
3if (helloWorld) {
4 console.log(helloWorld);
5}
jsx

Because `helloWorld` is now an empty string (`falsy`) it won't satisfy the if statement condition and will skip the code block.

Changing Between Truthy and Falsy

Of course, values can switch between being `truthy` and `falsy`. For example, if we had a form on our website, by default it would be empty (`falsy`). But, as soon as we started typing in it, it wouldn't be an empty string anymore so therefore would become `truthy`.

There are many examples of where this could happen such as a counter starting at 0 (`falsy`) and then getting incremented (`truthy`).

Summary

Over time dealing with `truthy` and `falsy` values become second nature. But, at first, it can through you into a spin where you can't figure out why a variable is evaluating to false.

You don't need to worry about memorising all of them to start with, the more you practise, the more you learn them.

So, have you ever fallen victim to a variable being `falsy` when you thought it should be `truthy`? If so share your story with me over on Twitter.

Read More / Sources

  • https://developer.mozilla.org/en-US/docs/Glossary/Truthy
  • https://developer.mozilla.org/en-US/docs/Glossary/Falsy


šŸ‘„

Latest Content...

What Iā€™m up to and more.

  • How to make a flicker-free dark theme toggle with Next.js, TailwindCSS, and `next-themes`

    7 Jun 2022

    How to make a flicker-free dark theme toggle with Next.js, TailwindCSS, and `next-themes`

    Here's how to build a dark/light theme toggle in Next.js using TailwindCSS and the next-themes npm package to make it load and transition flicker-free.

  • 3 Reasons Why You Need to Design Components and Not Pages

    26 Jun 2021

    3 Reasons Why You Need to Design Components and Not Pages

    If you want to design better websites then you need to stop designing at a page level and start thinkning about components. Here's 3 reasons why.

  • 6 Twitter Analytics Terms You Need to Know to Grow an Audience in 2021

    26 Jun 2021

    6 Twitter Analytics Terms You Need to Know to Grow an Audience in 2021

    Building a Twitter audience is a great way to grow your business. So, here are 6 Twitter analytics terms you need to know and how to measure them.

Want to read more?

View all posts here