Javascript Conditional Operators

Introduction to Conditional Operators

Conditional operators (also called conditional statements) in JavaScript are how a program makes decisions. Instead of running every line top to bottom, they let your code choose which block to run based on whether a condition is true or false.

This chapter covers the full toolkit you reach for every day:

• the if, else if, and else statements,
• the ternary operator ? : (and when not to nest it),
• how truthy and falsy values affect conditions,
• short-circuit evaluation with && and ||,
• the nullish coalescing operator ?? for default values.

A condition is any expression that JavaScript can evaluate to a boolean. It is usually built from comparison operators (>, <, ===, …) and combined with logical operators (&&, ||, !).

The if Statement

The if statement is the most fundamental conditional, used to execute a block of code only when a specified condition is true.

Syntax

if (condition) {
  // code to execute if condition is true
}

Example

The else Statement

The else statement complements if, running its block when the if condition is false.

Syntax

if (condition) {
  // code if condition is true
} else {
  // code if condition is false
}

Example

The else if Statement

else if lets you test several conditions in sequence. JavaScript checks each one from top to bottom and runs the first branch whose condition is true — the rest are skipped, even if they would also be true. That ordering matters: put your most specific or highest-priority conditions first.

Syntax

if (condition1) {
  // code if condition1 is true
} else if (condition2) {
  // code if condition2 is true
} else {
  // code if neither condition is true
}

Example

When you are comparing one value against many fixed options, a chain of else if can get repetitive. The switch statement is often a cleaner fit for that case.

The Conditional (Ternary) Operator ?

The ternary operator (? :) is a compact shorthand for if...else. It is the only JavaScript operator that takes three operands, and unlike a statement it returns a value — which makes it ideal for assigning a result based on a condition.

Syntax

let result = condition ? value1 : value2;

If condition is true, the expression evaluates to value1; otherwise it evaluates to value2.

Example

Because it produces a value, the ternary is also handy directly inside template strings and function arguments:

Nested and Chained Ternaries

A ternary can itself return another ternary, which mimics an else if chain:

This works, but readability drops fast. Avoid nesting ternaries when the logic is non-trivial — a deeply chained a ? b : c ? d : e is hard to read and easy to get wrong. Prefer if...else if (or switch) once you have more than one condition, and reserve the ternary for simple either/or choices.

Truthy and Falsy Values

The condition in an if or ternary does not have to be a boolean. JavaScript coerces whatever you give it to true or false. The values that coerce to false are called falsy; everything else is truthy.

There are exactly eight falsy values:

false
0        // and -0
0n       // BigInt zero
""       // empty string
null
undefined
NaN

Everything else — including "0", "false", [] (empty array), and {} (empty object) — is truthy.

This is why a common shorthand like if (name) { ... } checks whether name has a usable value rather than name === "" or name === undefined.

Short-Circuit Evaluation

The logical operators && and || don't always return a boolean — they return one of their operands, and they stop evaluating as soon as the result is known. This is called short-circuiting.

• a && b returns a if a is falsy, otherwise b.
• a || b returns a if a is truthy, otherwise b.

The || fallback has a catch: it treats all falsy values as missing. If 0 or "" is a valid value, || will wrongly replace it. That is exactly the problem ?? solves.

See the dedicated logical operators chapter for the full rules.

The Nullish Coalescing Operator (??)

The nullish coalescing operator ?? returns its right-hand side only when the left-hand side is null or undefined — not for other falsy values like 0 or "".

Reach for ?? whenever you assign defaults to values that could legitimately be 0, "", or false. Use || only when you genuinely want any falsy value to trigger the fallback.

Conclusion

Conditional operators are how your code makes decisions. Use if / else if / else for branching logic, the ternary ? : for simple value choices (never deeply nested), and ?? to supply defaults safely. Combine them with comparison operators and logical operators to express any condition, and switch to the switch statement when you are matching one value against many options.

Practice