Choose a Result with Conditions

An if chain runs the first matching branch. Put the highest grade threshold first so a mark of 85 is not caught by the more general pass rule. switch is useful for distinct matching values rather than arbitrary ranges.

Before this topic, review Expressions Produce Values if its terms are unfamiliar.

This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

At the core of any dynamic program lies decision-making. JavaScript gives you the tools to evaluate expressions and conditionally execute blocks of code using conditional statements. These include if, else if, else, and switch — each powerful in their own use case.

The if statement is the most basic form of control structure. It allows your code to make decisions based on a condition that evaluates to true or false.

let age = 20;
if (age >= 18) {
  console.log("You are eligible to vote.");
}

You are eligible to vote.

When you want to do something if the condition is true, and something else if it's false, use if-else.

let isRaining = false;
if (isRaining) {
  console.log("Take an umbrella.");
} else {
  console.log("Enjoy the sunshine!");
}

Enjoy the sunshine!

Sometimes, multiple conditions need to be tested sequentially. The if-else if-else structure handles this elegantly.

let score = 85;
if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 75) {
  console.log("Grade: B");
} else if (score >= 60) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}

Grade: B

In JavaScript, conditions don’t need to be strictly true or false. Some values are considered truthy (evaluate to true), while others are falsy (evaluate to false).

• Falsy values: false, 0, "", null, undefined, NaN
• Truthy values: Everything else

let username = "";
if (username) {
  console.log("Username is set");
} else {
  console.log("Username is empty");
}

Username is empty

When you're checking a single value against many possible matches, switch becomes more readable and efficient than a long if-else ladder.

let fruit = "apple";
switch (fruit) {
  case "banana":
    console.log("Bananas are yellow.");
    break;
  case "apple":
    console.log("Apples are red or green.");
    break;
  case "orange":
    console.log("Oranges are orange.");
    break;
  default:
    console.log("Unknown fruit.");
}

Apples are red or green.

• Always include break to prevent fall-through unless explicitly desired.
• Use default to catch unmatched cases.

Sometimes, conditions are dependent on one another. In such cases, you can nest conditionals.

let age = 22;
let hasLicense = true;

if (age >= 18) {
  if (hasLicense) {
    console.log("You can drive.");
  } else {
    console.log("You need a license to drive.");
  }
} else {
  console.log("You are too young to drive.");
}

You can drive.

The ternary operator is a compact way to write simple if-else conditions:

age = 22;
let access = age >= 18 ? "Granted" : "Denied";
console.log(access);

Granted

Imagine a login system where we verify if a user is admin, user, or guest:

let role = "admin";

if (role === "admin") {
  console.log("Access to admin dashboard.");
} else if (role === "user") {
  console.log("Access to user dashboard.");
} else {
  console.log("Access denied.");
}

Access to admin dashboard.

Conditional statements are the decision-makers in your JavaScript applications. Whether you're showing a message, calculating a grade, or toggling UI elements, mastering if, else, switch, and the ternary operator gives you control over program flow with precision and elegance.

Practice with different scenarios — change variables, test edge cases, and mix conditions. These seemingly simple statements are your gateway to logic-driven applications.

Independent if statements can both run. A switch case without break can fall through; equality inside switch is not a range test.

Your task: Replace 85 with 60. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

The A condition fails, then the pass condition succeeds.

An if chain runs the first matching branch. Put the highest grade threshold first so a mark of 85 is not caught by the more general pass rule. switch is useful for distinct matching values rather than arbitrary ranges.

Check your variation against this explanation: The A condition fails, then the pass condition succeeds.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.