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}

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`.

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:

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}

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