In JavaScript programming, the concepts of Truthy and Falsy are core foundations that control all conditional expressions (if/else, ternary operators, loops). Many common logical bugs occur simply because developers mishandle Type Coercion or are unaware of the exact list of values that JavaScript considers false.

This article from DCSOFT will help you systematically organize your knowledge of Truthy & Falsy, common coercion pitfalls, and how to write clean, optimized JavaScript code.

1. What Are Falsy Values in JavaScript?

In JavaScript, a value is called Falsy when it evaluates to the Boolean false within a conditional context (Boolean context).

As of current ECMAScript versions, JavaScript has exactly 8 Falsy values:

Important note from DCSOFT: Aside from the 8 values listed above, ALL other values in JavaScript are Truthy.

2. Truthy Values in JavaScript

A value is considered Truthy when it converts to true in a Boolean context.

Many beginner developers often make the mistake of thinking certain “empty” values are Falsy. Here are some very counter-intuitive Truthy values:

• [] (Empty Array)

• {} (Empty Object)

• "0" or "false" (String containing the number 0 or the word false)

• function() {} (Empty function)

• -1, 1 (Non-zero integers)

• Infinity and -Infinity

// All of the following statements execute the code block inside!
if ([]) {
  console.log("An empty array is still Truthy!");
}

if ("0") {
  console.log("The string '0' is Truthy, unlike the number 0!");
}

3. Operators and How to Convert Truthy / Falsy

3.1. The Boolean Coercion Operator !! (Double NOT)

To quickly check or convert any value to a standard Boolean, you can use two exclamation marks (!!):

console.log(!!"DCSOFT"); // true (String has content)
console.log(!!0);        // false (Falsy value)
console.log(!![]);       // true (Object/Array is always Truthy)

3.2. Logic Operators && (AND) and || (OR)

The && and || operators in JavaScript do not strictly return true/false; instead, they return the value of one of the operands:

• || Operator: Returns the first Truthy value encountered, or the last value if all are Falsy.

• && Operator: Returns the first Falsy value encountered, or the last value if all are Truthy.

const name = "" || "Default Name";        // "Default Name" (since "" is Falsy)
const user = { age: 20 } && "Valid User"; // "Valid User"

4. Common Truthy / Falsy Pitfalls and How to Avoid Bugs

Pitfall 1: Mistaking the Number 0 for a Non-Existent Value

When checking parameters or numeric variables, a value of 0 might represent valid data (e.g., product quantity = 0, score = 0).

// Buggy logic:
function updateQuantity(qty) {
  // If qty = 0, the expression (qty || 10) evaluates to 10 because 0 is Falsy!
  const finalQty = qty || 10; 
  console.log(finalQty);
}

updateQuantity(0); // Result: 10 (Unexpected!)

Solution (ES2020 Nullish Coalescing Operator ??):

Use the ?? operator instead of ||. The ?? operator only treats null and undefined as missing values (Nullish), preserving the number 0 and empty strings "".

// Clean code:
const finalQty = qty ?? 10; // If qty = 0 -> finalQty = 0

Pitfall 2: Checking Empty Arrays or Objects

Because both [] and {} are Truthy, the statement if ([]) will always run even if the array contains no elements.

const items = [];

// Wrong way:
if (items) {
  // Still executes even though the array is empty!
}

// Right way:
if (items.length > 0) {
  console.log("Array has data");
}

if (Object.keys(myObj).length > 0) {
  console.log("Object has properties");
}

5. Summary of Clean Code Practices at DCSOFT

1. Memorize the exact 8 Falsy values: false, 0, -0, 0n, "", null, undefined, NaN.

2. Always use strict comparisons (=== and !==): Avoid loose equality (==), because == performs complex implicit type coercion (e.g., 0 == "" returns true).

3. Prioritize Nullish Coalescing (??) over || when handling default values for numbers or strings.

4. Check array/object length instead of passing the array/object variable directly into an if statement.