← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 3 of 26

JS Conditionals

Think of a border crossing checkpoint, if you have a valid passport, you're waved through, if not, you're directed to a different line, the outcome always depends on checking a specific condition first. Conditionals in JavaScript work the same way, they let your code check whether something is true and run different instructions depending on the answer, using if, else if, and else. Nearly every interactive feature relies on conditionals somewhere, whether it's checking login status or showing a personalized message on cookiescursor.com.

In this page:

  1. The if Statement
  2. else
  3. else if
  4. Nested if Statements
  5. Ternary Operator and Short Circuit Evaluation
Syntax
javascript 
if (condition1) {
  // code
} else if (condition2) {
  // code
} else {
  // code
}

The if Statement

An if statement runs its code block only when the condition inside its parentheses evaluates to true, and skips the block entirely if the condition is false.

Note: Any value can appear as a condition, JavaScript automatically converts it to true or false based on whether it's truthy or falsy.
Warning: Omitting curly braces around a multi-line if body only makes the very next single statement conditional, later lines run unconditionally.

Example: The if Statement

javascript 
// Declare the constant `age`, set to `20`
// Declare the constant `age`, set to `20`
const age = 20;
// Check whether `age >= 18`
// Check whether `age >= 18`
if (age >= 18) {
  // Print "You are an adult." to the console
  // Print "You are an adult." to the console
  console.log("You are an adult.");
}

else

An else block runs only when the preceding if condition was false, providing a fallback path so exactly one of the two blocks always runs.

An else is always tied to the nearest unmatched if that precedes it, which matters once conditionals are nested.

Note: Use else specifically for a genuine alternative outcome, not just as a place to put unrelated code that always needs to run.
Warning: An else block must directly follow its matching if block, inserting other statements in between breaks the connection.

Example: else

javascript 
// Declare the constant `age`, set to `15`
// Declare the constant `age`, set to `15`
const age = 15;
// Check whether `age >= 18`
// Check whether `age >= 18`
if (age >= 18) {
  // Print "Adult" to the console
  // Print "Adult" to the console
  console.log("Adult");
// Otherwise, run this branch
// Otherwise, run this branch
} else {
  // Print "Minor" to the console
  // Print "Minor" to the console
  console.log("Minor");
}

else if

else if allows checking additional conditions in sequence after the initial if, stopping and running the first block whose condition evaluates to true, useful when there are more than two possible outcomes.

Note: Order your else if conditions from most specific to least specific, since JavaScript stops at the first one that matches.
Warning: An else if chain always runs at most one block, even if multiple conditions would technically be true, only the first match executes.

Example: else if

javascript 
// Declare the constant `score`, set to `75`
// Declare the constant `score`, set to `75`
const score = 75;
// Check whether `score >= 90`
// Check whether `score >= 90`
if (score >= 90) {
  // Print "A" to the console
  // Print "A" to the console
  console.log("A");
// Otherwise, if `score >= 70`, run this branch
// Otherwise, if `score >= 70`, run this branch
} else if (score >= 70) {
  // Print "B" to the console
  // Print "B" to the console
  console.log("B");
// Otherwise, run this branch
// Otherwise, run this branch
} else {
  // Print "C" to the console
  // Print "C" to the console
  console.log("C");
}

Nested if Statements

An if statement can be placed inside another if statement's block, letting you check a second condition only after the first has already been confirmed true.

Note: When nesting starts feeling too deep, combining conditions with && inside a single if is often clearer than several nested levels.
Warning: Deeply nested if statements can quickly become hard to read, consider refactoring into separate functions or combined conditions once nesting gets too deep.

Example: Nested if Statements

javascript 
// Declare the constant `age`, set to `25`
// Declare the constant `age`, set to `25`
const age = 25;
// Declare the constant `hasLicense`, set to `true`
// Declare the constant `hasLicense`, set to `true`
const hasLicense = true;
// Check whether `age >= 18`
// Check whether `age >= 18`
if (age >= 18) {
  // Check whether `hasLicense`
  // Check whether `hasLicense`
  if (hasLicense) {
    // Print "Can drive" to the console
    // Print "Can drive" to the console
    console.log("Can drive");
  }
}

Ternary Operator and Short Circuit Evaluation

The ternary operator, condition ? valueIfTrue : valueIfFalse, is a compact alternative to a simple if/else, and short circuit evaluation lets && stop at the first falsy value and || stop at the first truthy value, without checking the rest.

Note: Short circuit evaluation with && is a common pattern for conditionally running code only when a value exists, like userData && userData.name.
Warning: Ternary operators are best for simple value selection, using them for complex logic with side effects makes code much harder to follow.

Example: Ternary Operator and Short Circuit Evaluation

javascript 
// Declare the constant `age`, set to `20`
// Declare the constant `age`, set to `20`
const age = 20;
// Declare the constant `status`, set to `age >= 18 ? "adult" : "minor"`
// Declare the constant `status`, set to `age >= 18 ? "adult" : "minor"`
const status = age >= 18 ? "adult" : "minor";
// Print `status` to the console
// Print `status` to the console
console.log(status);
// Print `true || console.log("never runs")` to the console
// Print `true || console.log("never runs")` to the console
console.log(true || console.log("never runs"));
Live Example
Related Topics

JS Math · JS Switch · JS Dates · JS Loop For

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting curly braces around a multi-statement if block, which causes only the very next line to be conditional, not the whole intended block.
  2. Using a single = instead of === inside a condition, which silently assigns a value instead of comparing one.
  3. Writing overly deep chains of nested if statements when a cleaner else if chain, or even a switch, would be more readable.
Chapter Summary
  • if runs a block only when its condition is true, and else provides a fallback when it's false.
  • else if allows checking multiple conditions in sequence, stopping at the first one that's true.
  • The ternary operator offers a compact form for simple two-outcome conditionals, and short circuit evaluation lets && and || skip unnecessary checks.
Browser Support

if, else if, else, and the ternary operator are core JavaScript syntax supported identically in every browser.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Math Next Lesson → JS Switch

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.