DailyRNG
Login
Basic

Control Flow: Conditionals

Make decisions with if/else and comparison operators.

What you will see

falsy falsy truthy

About 2 min of reading

Quick check

Before this new lesson, one small question about the lesson you just finished. Recall it, do not look it up.

Try It

Branch on a condition with if/else, compare values strictly versus loosely, and see which empty things JavaScript treats as falsy.

1

Rank a score with an if / else-if / else chain. Only the first matching branch runs, and the parentheses around the condition are required.

const score = 85; if (score >= 90) { console.log("A"); } else if (score >= 80) { console.log("B"); } else { console.log("C"); }

Before you run it, say out loud what it will print. Then open the answer.

What it prints
B
JavaScript uses { } blocks, not indentation, and only the first true branch runs. The condition parentheses are required.
2

Compare the same value with loose and strict equality. Loose == coerces types and can surprise you; strict === compares both value and type.

console.log(1 == "1"); console.log(1 === "1"); console.log(null == undefined);

Before you run it, say out loud what it will print. Then open the answer.

What it prints
true false true
Always use === and !==. Loose == hides bugs: `0 == false`, `"" == 0`, and `null == undefined` are all true.
3

Test which empty-looking values JavaScript treats as falsy. An empty array and empty object are actually truthy, so check .length or .size explicitly.

console.log(0 ? "truthy" : "falsy"); console.log("" ? "truthy" : "falsy"); console.log([] ? "truthy" : "falsy");

Before you run it, say out loud what it will print. Then open the answer.

What it prints
falsy falsy truthy
The seven falsy values are false, 0, "", null, undefined, NaN, and 0n. Empty arrays and objects are truthy.

Put it in order

Before you write anything, put these lines back in the right order. Click a line to move it up one step. This support step is easier than writing code from scratch, and it is here to make the last example stick.

Data Flow

A boolean expression is evaluated; the first true condition selects the matching branch.
1 Evaluate the condition expression
↓
2 Coerce to boolean if not already
↓
3 First true branch runs
↓
4 Else-if / else runs if none matched
Why this works
Truthy and falsy

When a non-boolean is used in a condition, JavaScript coerces it. The seven falsy values are listed above. Note the gotcha:

console.log([] ? "truthy" : "falsy");  // truthy
console.log({} ? "truthy" : "falsy");  // truthy
console.log(0 ? "truthy" : "falsy");   // falsy

Empty collections are truthy, so check .length or .size explicitly when testing for emptiness.

When you have a choice

Strict vs loose equality

Loose equality (==) performs type coercion before comparing, which produces surprising results:

console.log(0 == false);      // true
console.log(0 == "");        // true
console.log(null == undefined); // true
console.log(0 === false);     // false

Strict equality (===) compares both value and type with no coercion. The only exception is null === null and undefined === undefined; null never loosely equals anything but itself and undefined.

Examples

If/else branching

Branching on conditions

const score = 85;
if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else {
  console.log("C");
}

JavaScript uses {} blocks (not indentation). Only the first matching branch runs. Parentheses around the condition are required, though booleans are optional.

Comparison operators

Comparing values

console.log(1 == "1");   // true  (loose, coerces)
console.log(1 === "1");  // false (strict, different types)
console.log(1 > 0);      // true

Always use === (strict equality) and !== (strict inequality). Loose == coerces types and hides bugs: 0 == false, "" == 0, and null == undefined are all true.

Truthy and falsy values

Boolean coercion

const items = [];
if (items.length) {   // 0 is falsy
  console.log("has items");
} else {
  console.log("empty");   // runs
}

The falsy values are false, 0, "", null, undefined, NaN, and 0n. Everything else is truthy, including empty objects [] and {}.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← Strings and Text Operations
Previous Lesson
Strings and Text Operations
Next Lesson
Loops and Iteration
Loops and Iteration →