JavaScript Truthy and Falsy Values

Truthy and falsy values are misunderstood by lots of people to mean only values that have true or false as their values. In this article you would get to understand the difference between these two concepts.

Prerequisite

• Basic Knowledge of JavaScript

True and False Variable Values

    let a = false
    let b = true

In Javascript you can assign true or false to a variable. The variables in the sample code above have true or false assigned to them. So wherever you call this variables, either true or false will be displayed unless the are re-assigned.
Follow me, let do some coding experiments.

e.g 1

    let a = false
    console.log(a)
    console.log(Boolean(a))

e.g 2

    let a = 'false'
    console.log(a)
    console.log(Boolean(a))

In e.g 1 you get

    false
    false

In e.g 2 you get

    false
    true

A value being truthy or falsy goes beyond having true or false as it's value. In this article true/false values means values that have either true/false values assigned to them. Then what does it mean for variables to be truthy or falsy.

Truthy and Falsy Values

Falsy Values

Falsy values are values that JavaScript's built-in type coercion converts to false or in a Boolean context are considered false. In simple terms we could say, variables that do not have values or do not exist but it’s more than that. Below are a list of all falsy values

• false
• 0 Both positive and negative
• 0n BigInt, when used as a boolean, follows the same rule as a Number
• ''
• null
• undefined
• NaN

    let a = false
    let b = 0
    let c = -0
    let d = 0n
    let e = ''
    let f = null
    let g = undefined
    let h = NaN
    console.log(Boolean (a))
    console.log(Boolean (b))
    console.log(Boolean (c))
    console.log(Boolean (d))
    console.log(Boolean (e))
    console.log(Boolean (f))
    console.log(Boolean (g))
    console.log(Boolean (h))

The above shows that all the above are falsy. In your JavaScript algorithm if you are checking and using truthy/falsy values, then make sure that you are not using any of the falsy values in your if algorithm.

e.g The sample code below is an algorithm to check if a variable is a number or not a number.

    // using the variables you have declared above => a, b, c, d, e, f, g, h
    const printType = (value) => {
        if (!value){
            return 'does not exist, it is falsy'
        }
        return Number.isInteger(value) ? `${value} is a number` : `${value} is a not a number`
    }
    console.log(printType(a))

The above code will always return does not exist, it is falsy as long as it evaluates the value to be falsy in this case it includes both 0 and '' which you might want to use in your algorithm. 0 is a number and should return 0 is a number, but because it's falsy and we are checking for falsy values in our code, it won't be evaluated that way, same goes for ''.

The block of code below checks if a value is falsy. It will return true if the value is falsy, so anything inside this block of code will be executed as long as the value is falsy.

    if (!value){
          ...
      }

If your code makes use of falsy/truthy values, it saves you the stress of having to check for undefined, null, NaN individually.

e.g
Instead of

    if (a == false) // ...
    // runs if a is false, 0, -0, 0n, '', or []
    // where [] should be truthy not falsy

Use

    if (!a) // ...
    // runs if a is false, 0, -0, 0n, '', NaN, null or undefined

Truthy Values

Anything asides what’s mentioned above is truthy. Simply any variable with a value is truthy.
Below are some truthy values

• true
• {} An object (whether empty or not)
• [] An array (whether empty or not)
• 25 Numbers (whether positive or negative)
• 'true' Non empty strings
• 'false' Non empty strings
• new Date() Date object
• 12n BigInt, when used as a boolean, follows the same rule as a Number
• Infinity

Conclusion

Hope you enjoyed the article. Truthy or Falsy values can be confusing, hope this article makes it clearer.

You can find me on Twitter, let's connect.

Comments

[Functional Javascript]

Excellent analysis Osumgba.

Here's an example showing what's truthy and what's falsy in JavaScript:

//truthy values
const aT = [true, {}, [], 25, 12n, "true", "false", new Date(),
  Infinity, Boolean(true), new Boolean(false), n => n
];

//falsy values
const aF = [false, null, undefined, NaN, 0, -0, 0n, "", Boolean(false)];

logForeachParam(v => !!v, aT);
logForeachParam(v => !!v, aF);

after running it:

logForeachParam Source Code:

gist.github.com/funfunction/42918a...

[Osumgba Chiamaka]

Nice example. Thanks for sharing.