Truthy, Falsy and Nullish

JavaScript ES2024 · ✓ verified by execution on

In JavaScript, a truthy value is a value that is considered true when placed in a Boolean context (like an if statement or logical operator).

javascript
console.log(Boolean('Hello'));
Output
true

All values are truthy unless they are defined as falsy.

There are exactly eight falsy values in JavaScript. You must memorize these:

javascript
console.log(Boolean(0));
Output
false

Since everything not on the falsy list is truthy, what happens if we pass an empty array to Boolean?

Predict the output javascript

Read the code. What exactly will it print? Commit to an answer before you look.

console.log(Boolean([]));
Output
true

The Empty Object Trap

Empty arrays and empty objects are truthy. [] and {} both pass an if, which catches out anyone arriving from Python, where an empty container is falsy. The reason is that JavaScript tests the reference, not the contents.

The engine never looks inside. It asks only whether an object exists, and [] is a perfectly real object. To ask about contents you have to say so: if (myArray.length) works, because an empty array has length 0, and 0 is falsy.

The falsy list is short enough to memorise, and memorising it is worth more than any rule of thumb: false, 0, -0, 0n, '', null, undefined, and NaN. Everything else in the language is truthy, including '0', 'false', [], {} and every function.

Two of those cause most of the trouble in real code. 0 is a legitimate value for a count, a price or an index, so if (count) silently skips the zero case. And '' is a legitimate value for a text field a user deliberately cleared. When zero or empty are real answers rather than missing ones, test for what you actually mean — count !== undefined, or ?? rather than ||.

if ([]) Does reference exist? Yes → TRUTHY It is an Object if ([].length) Evaluates property 0 → FALSY 0 is on the list
Truthiness evaluation of objects vs properties

Providing Default Values

We often use the Logical OR (||) operator to provide fallback default values for variables. If the left side is falsy, it falls back to the right side.

javascript · visualize
const input = '';
const result = input || 'default';
console.log(result);
default

But using || can be very dangerous if 0 or "" are actually valid values for your application! If someone’s score is 0, || will overwrite it with a default fallback because 0 is falsy.

To fix this, JavaScript introduced the Nullish Coalescing Operator (??). It acts exactly like ||, but it ONLY falls back if the left side is null or undefined.

javascript
const input = '';
const result = input ?? 'default';
console.log(result);
Output
 

If the input is genuinely null, then the ?? operator falls back to the default safely.

javascript
const input = null;
const result = input ?? 'default';
console.log(result);
Output
default

Check yourself

Which of the following values is TRUTHY?

Reveal answer

[] — All objects, including empty arrays ([]), are truthy in JavaScript.

What does the Logical OR (||) operator fall back on?

Reveal answer

Any falsy value — Logical OR (||) triggers its fallback for ANY falsy value (0, '', NaN, etc.).

What does '' ?? 'default' evaluate to?

Reveal answer

'' — Nullish Coalescing (??) ONLY falls back on null or undefined. Since '' is not nullish, it evaluates to ''.

Challenges

Challenge 1 +20 XP

Use Logical OR (||) to provide the fallback 'Guest' if name is an empty string.

javascript
  • Test 1 — expects "Guest"
Need a hint? (−25% XP)

Use || 'Guest'

Show solution (0 XP)
const name = '';
const display = name || 'Guest';
console.log(display);

Challenge 2 +20 XP

Use Nullish Coalescing (??) to provide the fallback 10 if score is null, but preserve the score if it is 0.

javascript
  • Test 1 — expects "0"
Need a hint? (−25% XP)

Use ?? 10

Show solution (0 XP)
const score = 0;
const finalScore = score ?? 10;
console.log(finalScore);