Explain The Concept of Truthy & Falsy Values in JavaScript

In JavaScript, truthy and falsy values are concepts related to boolean evaluation. Every value in JavaScript has an inherent boolean "truthiness" or "falsiness," which means they can be implicitly evaluated to true or false in boolean contexts, such as in conditional statements or logical operations.

What Are Truthy Values?

Truthy values are values that are evaluated to be true when used in a Boolean context. Simply put, any value that is not explicitly falsy is considered truthy.

These are some truthy values

• Non-zero numbers: 42, -1, 3.14
• Non-empty strings: "hello", "0", " "
• Objects and arrays: {}, []
• Functions: function() {}
• Dates: new Date()
• Symbols: Symbol()
• BigInt values other than 0n: 10n

if (42) console.log("This is truthy!");
if ("hello") console.log("Non-empty strings are truthy!");
if ({}) console.log("Objects are truthy!");

This is truthy!
Non-empty strings are truthy!
Objects are truthy!

What Are Falsy Values?

Falsy values are values that evaluate to false when used in a Boolean. JavaScript has a fixed list of falsy values

• false
• 0 (and -0)
• 0n (BigInt zero)
• "" (empty string)
• null
• undefined
• NaN
• document.all (used for backward compatibility)

if (0) console.log("This won't run because 0 is falsy.");
if ("") console.log("This won't run because an empty string is falsy.");
if (null) console.log("This won't run because null is falsy.");

Truthy vs. Falsy Evaluation in JavaScript

Whenever JavaScript evaluates an expression in a Boolean (e.g., in an if statement, a logical operator, or a loop condition), it implicitly converts the value into true or false based on whether it is truthy or falsy.

With if Statement

let s = "JavaScript";

if (s) {
    console.log("Truthy!");
} else {
    console.log("Falsy!");
}

Truthy!

Logical Operators with Truthy and Falsy

Logical operators like && (AND) and || (OR) work with truthy and falsy values

• && (AND): Returns the first falsy operand or the last operand if all are truthy.
• || (OR): Returns the first truthy operand or the last operand if all are falsy.

console.log(true && "JavaScript");
console.log(false || "Hello!");  
console.log(0 || null);  

JavaScript
Hello!
null

Explicit Boolean Conversion

You can explicitly check whether a value is truthy or falsy using the Boolean() function or the double negation operator (!!).

console.log(Boolean(42));       
console.log(Boolean(0));       
console.log(Boolean("hello"));
console.log(Boolean(""));      

// Using !!
console.log(!!"world");        
console.log(!!undefined);   

true
false
true
false
true
false

Common Pitfalls and Misunderstandings

Empty Strings vs. Non-Empty Strings

• "" (empty string) is falsy.
• " " (string with a space) is truthy.

if ("") console.log("Falsy"); // Won't run
if (" ") console.log("Truthy"); // Will run

Truthy

Zero (0) vs. Non-Zero Numbers

0 is falsy, but -1, 3.14, and other numbers are truthy.

if (0) console.log("Falsy"); // Won't run
if (-1) console.log("Truthy"); // Will run

Truthy

Empty Objects and Arrays Are Truthy

Unlike Python, where empty containers are falsy, empty objects {} and arrays [] are truthy in JavaScript.

if ([]) console.log("Empty arrays are truthy!");
if ({}) console.log("Empty objects are truthy!"); 

Empty arrays are truthy!
Empty objects are truthy!

Practical Applications

Default Values Using Logical OR (||)

The || operator is commonly used to assign default values when a variable is falsy.

let username = "";
let displayName = username || "Guest";
console.log(displayName);

Guest

Conditional Property Access

Truthy and falsy checks can be used to avoid errors when accessing object properties:

let user = null;
if (user && user.name) {
    console.log(user.name); // Safely checks if user and user.name exist
}

Avoiding Explicit Comparisons

Truthy and falsy values allow concise conditions without explicit equality checks:

if (!value) {
    console.log("Value is falsy.");
}

Difference Between Truthy and Falsy Values

Related Articles

• Truthy In JavaScript
• Falsy In JavaScript