Truthy and Falsy values in JavaScript

Introduction

In this article, we shall learn about the concept of Truthy and Falsy values in JavaScript and why this concept is useful. Let's jump in!

What are truthy values?

Truthy values are values that evaluate to boolean in a conditional such as if..else and switch...case. In Computer Science, a Boolean is a logical data type that can only hold the value of true or false. Booleans are often used in conditionals like if...else

if (boolean conditional) {
  // code to be executed if conditional is true
} else {
  // if boolean conditional resolves to false
}

Truthy values are values that resolve to true when used in conditionals.

Truthy values in JavaScript

JavaScript treats the following values as Truthy:

1. true - A boolean of value true
2. {} value of an object with no properties, declared using Object literal
3. [] an empty array
4. 51 any non-zero number, including negative and positive numbers
5. "0" any non-empty string
6. new Date() any value constructed from the Date object

if (true) { } // evaluates to true
if ({}) { }// evaluates to true
if ([]) { }// evaluates to true
if (51) { }// evaluates to true, negative and positive numbers except zero
if ("0") {...}// any string value execept an empty string
if (new Date()) {...} // value constructed from the Date Object

Why are Truthy values important?

Consider the following example:

const updateKeys = (keys = []) => {

  // this will resolve to true always for both an empty keys argument and nonempty
  if (keys) {

  }
} 

An array with no elements will evaluate to true, hence the if(toDoItems) {...} will always evaluate to true and execute for both empty and none empty arrays.

What are falsy values

Falsy values are values that resolve to false when used in conditionals.

Falsy values in JavaScript

JavaScript treats the following values as Falsy:

1. false - A boolean of value false
2. "", '' value of an object with no properties, declared using Object literal
3. null, a value of null, no vale given
4. undefined, a value of a variable not assigned to a value
5. NaN a value representing Not-A-Number, usually as a result of adding a value of type number to the value of a non-number 8 + 1
6. 0 a value of number zero

if (0) {...} // evaluates to true
if ("") {...}// evaluates to true
if (null) {...}// evaluates to true
if (undefined) {...}// evaluates to true, negative and positive numbers except zero
if (NaN) {...}// any string value execept an empty string

Considering falsy values, it's more beautiful for instance to do this:

  if (userName) { }

And not this:

 if (username === "") { }

 // or worse still
 if (typeof txString !== undefined) { }

Summary

JavaScript has a set of truthy values and falsy values that are important to know:

1. Evaluating an empty array, will always evaluate to true in a conditional
2. Evaluating an object with no properties will always evaluate to true in a conditional

---

That's all for this week!, I've been setting up a new domain for my blog naftalimurgor.com.. You may follow my Twitter handle https://twitter.com. Any questions queries shoot me an email, at [e-mail]

Comments

[Pudding]

Also don't forget to use the nullish coalescing operator (developer.mozilla.org/en-US/docs/W...) to avoid truthy edge conditions.

[Naftali Murgor]

Wow. Great insight! Thanks.