Truthy and falsy values in JavaScript

In JavaScript, truthy and falsy values determine the true or false nature of expressions in conditional statements and logical operations. It’s pretty important to understand these concepts if you want to master control flow and logic in JS.

What is truthy and falsy in JavaScript?

Understanding falsy values

Falsy values in JavaScript are those that evaluate to false when encountered in a Boolean context. JS has a small, fixed number of falsy values:

• false
• 0 and 0
• "" (empty string)
• null
• undefined
• NaN (Not a Number)

Every other value in JavaScript is considered truthy.

The nature of truthy values

Truthy values are essentially any values that are not falsy. This means almost everything else in JavaScript is truthy, including:

• All objects ({}, []) and non-empty strings
• All numbers (positive or negative) except 0 and NaN
• The string "false" (because it's non-empty)
• Functions

Conditional statements and logical operations

Conditionals with falsy values

When a falsy value is used in a conditional, the condition is evaluated as false.

if (false) {
  // This code will not run
}

let variable = 0;
if (variable) {
  // This code will not run because 0 is falsy
}

Conditionals with truthy values

Any truthy value in a conditional statement will cause the condition to evaluate as true.

if ("hello") {
  // This code will run because a non-empty string is truthy
}

let array = [1, 2, 3];
if (array) {
  // This code will run because an array is an object and thus truthy
}

Logical operators and falsy values

Logical operators (||, &&, !) also rely on truthy and falsy values:

• || (OR) returns the first truthy value it encounters or the last value if all are falsy.
• && (AND) returns the first falsy value it encounters or the last value if all are truthy.
• ! (NOT) converts the value to its Boolean opposite.

let result = 0 || "default"; // "default"
let result2 = 0 && "nope"; // 0
let isTrue = !0; // true

Strict vs. loose equality

When using equality operators, it's important to understand how they interact with truthy and falsy values.

0 == false; // true, due to type coercion and loose equality
0 === false; // false, because they are of different types

Type coercion in arithmetic and logical operations

JavaScript performs type coercion in various contexts, which can have an impact on the evaluation of truthy and falsy values.

let result = '5' - false; // 5, as false is converted to 0

Function and arrow function behavior

Functions and arrow functions with implicit return values can be influenced by truthy and falsy evaluations.

const truthyOrFalsy = val => val || 'default';

Short-circuit evaluation in expressions

JavaScript employs short-circuit evaluation to return values without evaluating the entire expression once the outcome is determined.

let foo = null;
let bar = foo || 'default'; // 'default'

Coercion to boolean

You can explicitly coerce any value to a boolean using the Boolean function or a double NOT operator !!.

Boolean(""); // false
Boolean("hello"); // true

!!0; // false
!!1; // true

Practical implications

Understanding truthy and falsy values is critical in JS to write concise and effective code, for instance, when setting default values.

function greet(name) {
  name = name || 'Guest';
  console.log(`Hello, ${name}!`);
}

greet(null); // Hello, Guest!

It also helps in simplifying conditions and checks within the code:

let items = [];
if (items.length) {
  // This block will not execute because items.length is 0, which is falsy
}

The Boolean object vs. primitive boolean values

The Boolean object can be a source of confusion when dealing with truthy and falsy values.

new Boolean(false); // An object, which is a truthy value

Falsy values in array methods

Array methods like filter, map, and reduce react to falsy values in predictable ways.

[false, NaN, '', undefined, 0].filter(Boolean); // returns [], as all values are falsy

Advanced examples and edge cases

When working with default parameters, destructuring, and complex logical conditions, truthy and falsy values can lead to unexpected behaviors.

const printNumber = (num = 1) => {
  console.log(num);
};

printNumber(undefined); // 1, because undefined is falsy
printNumber(null); // null, because null is explicitly provided

Testing for truthy and falsy

Methods to test for truthy and falsy values can help in validating arrays and other structures.

const isAllTruthy = arr => arr.every(Boolean);
const isSomeTruthy = arr => arr.some(Boolean);