Booleans, Comparisons & Truthy/Falsy

true and false, === vs ==, and the values JavaScript treats as false.

Lesson 10 of 56Beginner13 min read

Every decision a program makes comes down to a question with a yes or no answer. Is the password long enough? Has the player run out of lives? Is the basket empty? Those answers are booleans, true or false, and they usually come from comparing two values.

Comparisons look simple, but JavaScript has a few quirks around types that cause real bugs. This lesson explains why you should always use ===, how strings are compared, and which values JavaScript treats as "false" even though they aren't the boolean false.

Comparison operators

OperatorMeans5 ? 3
===equal (same value and same type)false
!==not equaltrue
>greater thantrue
<less thanfalse
>=greater than or equal totrue
<=less than or equal tofalse

Every comparison produces a boolean. You can store it in a variable, such as const isAdult = age >= 18;, which often makes the code that follows easier to read.

=== vs ==: strict and loose equality

== converts types before comparing, which leads to strange results:

JavaScript
"5" == 5          // true  (the string is converted to a number)
0 == ""           // true  (surprising!)
null == undefined // true

=== never converts. Values of different types are simply not equal. Always use === and !==, and convert values yourself with Number() or String() when you need to compare different types.

Comparing strings

Strings are compared character by character using each character's code, so "apple" < "banana" is true. Capital letters come before lowercase ones, which means "Z" < "a" is also true. Convert both sides to lowercase before sorting or comparing words alphabetically.

Numbers stored as text compare as text too: "10" < "9" is true, because "1" comes before "9". Convert them to numbers first.

Truthy and falsy values

In an if statement, and with &&, || and !, every value behaves like a boolean. Only six values are falsy:

false, 0, "" (an empty string), null, undefined and NaN

Everything else is truthy, including "0", "false", [] and {}. Use Boolean(value) or !!value to check how a value behaves.

Comparing objects, arrays and special values

Comparison operators check identity for objects and arrays, not their contents. [1, 2] === [1, 2] is false, because they're two separate arrays that happen to look the same. Two variables are only equal when they point to the very same object. To compare contents, compare individual values, or for simple data use JSON.stringify(a) === JSON.stringify(b).

A few special values need care too. NaN is not equal to anything, not even itself, so use Number.isNaN(x) to test for it. null == undefined is true with loose equality but false with ===. And comparing a number with a string, as in "10" > 9, converts the string to a number first, which works here but hides bugs elsewhere.

JavaScript Comparisons Syntax

Comparisons

age >= 18          // true or false
name === "Sam"     // strict equality
score !== 0        // strict inequality
Boolean("")        // false
!!"hello"          // true

JavaScript Comparisons Summary

  • Comparisons return booleans: true or false.
  • Use === and !==, which never convert types.
  • Strings compare character by character, with capitals before lowercase letters.
  • Only false, 0, "", null, undefined and NaN are falsy.
  • Every other value, including "0" and empty arrays, is truthy.

JavaScript Comparisons Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Strict vs loose equality

console.log(5 === 5);
console.log("5" === 5);
console.log("5" == 5);
console.log(0 == "");
console.log(null === undefined, null == undefined);
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1Same type and value: true.
  2. Line 2String vs number: false with ===.
  3. Lines 3 to 4== converts types, giving surprising trues.
  4. Line 5Another == quirk. Stick with ===.
Example 2

Truthy and falsy values

const values = [0, 1, "", "0", "hi", null, undefined, NaN, [], {}];
const labels = ['0', '1', '""', '"0"', '"hi"', 'null', 'undefined', 'NaN', '[]', '{}'];

for (let i = 0; i < values.length; i++) {
  console.log(labels[i], "→", Boolean(values[i]));
}
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1A mix of values to test.
  2. Line 2Readable labels for each value.
  3. Lines 4 to 6Print each label and whether its value is truthy. Notice "0", [] and {} are truthy.
Example 3

Real-world checks

const password = "sunflower7";
const username = "";
const age = 16;

const longEnough = password.length >= 8;
const hasName = Boolean(username);
const isTeen = age >= 13 && age <= 19;

console.log("Password OK:", longEnough);
console.log("Has username:", hasName);
console.log("Teenager:", isTeen);
console.log("apple" < "banana", "Zebra" < "apple");
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 5A comparison gives a boolean.
  2. Line 6An empty string is falsy, so this is false.
  3. Line 7Two comparisons combined with AND for a range check.
  4. Line 12String comparison is alphabetical, but capitals come first.

Common JavaScript Comparisons Mistakes

Using == with user input

Don't
if (input == 0) { … } // also true for "" and "0"
Do
if (Number(input) === 0) { … }

Thinking "false" is falsy

Don't
const setting = "false";
if (setting) { console.log("This runs!"); }
Do
const setting = "false";
if (setting === "true") { … }

Any non-empty string is truthy, even the word "false".

JavaScript Comparisons in Real Projects

Booleans drive interfaces

Buttons are disabled while isLoading is true, menus open when isMenuOpen is true, and forms submit only when every check like emailIsValid && passwordIsLongEnough is true. Naming booleans with is, has or can makes code read like English.

JavaScript Comparisons Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Use strict comparisons.

const pin = 1234;
console.log(pin  1234); // true
console.log(pin  1111); // true
Predict the outputmedium

What does this print?

console.log(Boolean("0"), Boolean(0), Boolean([]));
Multiple choicemedium

Which of these is falsy?

Fix the bugmedium

The check should log Access: true only when the code typed is exactly the number 42. The input arrives as a string. Fix it so it uses strict equality correctly.

const typed = "42";
const access = typed = 42;
console.log("Access:", access);
ConsoleEdit the code, then press Run or Ctrl+Enter
Checks
  • Logs "Access: true"
  • access is a boolean
  • No errors

JavaScript Comparisons Quiz

3 questions to check what you learned.

  1. What does 10 >= 10 return?

    • false
    • true
    • 10
    • undefined

  2. What does "3" === 3 return?

    • true
    • NaN
    • false
    • An error

  3. How many falsy values are there in JavaScript?

    • 6 (false, 0, "", null, undefined, NaN)
    • 2
    • 4
    • Every value is falsy

JavaScript Comparisons Challenge

Ride height checker

A theme park ride needs riders to be at least 120cm and under 200cm.

  1. Create const canRide = height >= 120 && height < 200;
  2. Log Can ride: true for the given height
  3. Also create const hasTicket = Boolean(ticketCode); and log Has ticket: false
const height = 134;
const ticketCode = "";
ConsoleEdit the code, then press Run or Ctrl+Enter
Checks
  • canRide is true
  • hasTicket is false
  • Logs both lines

Related JavaScript topics

06OperatorsMaths, assignment shortcuts, comparisons and logic with &&, || and !.12if / elseMake your code decide what to do with if, else if and else.05Data TypesStrings, numbers, booleans, null, undefined, objects and arrays, plus typeof.
Esc
↑↓ to navigateEnter to open