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!");
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!
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);
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.");
}
Difference Between Truthy and Falsy Values
| Aspect | Truthy Values | Falsy Values |
|---|---|---|
| Definition | Values that evaluate to true in Boolean contexts. | Values that evaluate to false in Boolean contexts. |
| Examples | 42, "hello", {}, [], function() {} | false, 0, -0, "", null, undefined, NaN |
| Empty Structures | Empty objects {} and arrays [] are truthy. | Not applicable (empty structures are not falsy). |
| Strings | Non-empty strings (e.g., "hello", " ") are truthy. | Empty strings ("") are falsy. |
| Numbers | Non-zero numbers (e.g., 42, -3.14) are truthy. | Zero (0, -0) is falsy. |
| BigInt | Any non-zero BigInt value (e.g., 10n) is truthy. | Zero BigInt (0n) is falsy. |
| Usage in Logical Operators | Can short-circuit ` |