Learning about Truthy and 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

1. Non-zero numbers: 42, -1, 3.14
2. Non-empty strings: "hello", "0", " "
3. Objects and arrays: {}, []
4. Functions: function() {}
5. Dates: new Date()
6. Symbols: Symbol()
7. 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!");

Output
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!");
}

Output
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);

Output
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);

Output
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

Output
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

Output
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!");

Output
Empty arrays are truthy!
Empty objects are truthy!

---

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);

Output
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.");
}

References

https://www.geeksforgeeks.org/javascript/explain-the-concept-of-truthy-falsy-values-in-javascript/