10. JavaScript Conditions

What you will learn

• How to make decisions with if, else if, and else
• How to combine conditions
• The switch statement
• Truthy and falsy values in conditions

Making decisions

Conditions let your program choose what to do. A condition is an expression that is true or false. Code in curly braces runs only when the condition is true.

if (condition) {
  // runs when the condition is true
}

if, else if, else

<p id="demo"></p>

<script>
  const score = 72;
  let grade;

  if (score >= 90) {
    grade = "A";
  } else if (score >= 70) {
    grade = "B";
  } else if (score >= 50) {
    grade = "C";
  } else {
    grade = "Try again";
  }

  document.getElementById("demo").textContent = "Score " + score + ": " + grade;
</script>

JavaScript checks from the top and runs only the first block whose condition is true. Because of that, put the most specific condition first.

Combining conditions

Use && (and), || (or), and ! (not).

<p id="demo"></p>

<script>
  const age = 25;
  const hasId = true;

  if (age >= 18 && hasId) {
    document.getElementById("demo").textContent = "Entry allowed";
  } else {
    document.getElementById("demo").textContent = "Entry denied";
  }
</script>

The switch statement

When you compare one value against many exact options, switch can be tidier. Each case needs a break, or execution carries on into the next case.

<p id="demo"></p>

<script>
  const day = 3;
  let name;

  switch (day) {
    case 1:
      name = "Monday";
      break;
    case 2:
      name = "Tuesday";
      break;
    case 3:
      name = "Wednesday";
      break;
    default:
      name = "Another day";
  }

  document.getElementById("demo").textContent = "Day " + day + " is " + name;
</script>

default runs when no case matches. switch compares with strict equality (===).

Truthy and falsy in conditions

A condition does not have to be a comparison. Falsy values (false, 0, "", null, undefined, NaN) count as false and everything else as true.

<p id="demo"></p>

<script>
  const username = "";

  if (username) {
    document.getElementById("demo").textContent = "Hello, " + username;
  } else {
    document.getElementById("demo").textContent = "Please enter a name";
  }
</script>

Handy shortcuts

• Ternary: const label = age >= 18 ? "adult" : "minor";
• Default value with ||: const name = input || "Guest"; (also replaces 0 and empty text).
• Default with ??: const count = input ?? 0; replaces only null and undefined.

Common mistakes

• Writing if (x = 5) (assignment) instead of if (x === 5) (comparison).
• Forgetting break in a switch.
• Putting a general condition before a specific one, so the specific one never runs.
• Putting a semicolon right after the condition: if (x > 5);.
• Comparing text from a form to a number with ===.

<p id="demo"></p>

<script>
  const hour = 15;
  let greeting;

  if (hour < 12) {
    greeting = "Good morning";
  } else if (hour < 18) {
    greeting = "Good afternoon";
  } else {
    greeting = "Good evening";
  }

  document.getElementById("demo").textContent = greeting;
</script>

Summary

• Use if, else if, and else to choose between actions.
• Combine tests with &&, ||, and !.
• switch suits many exact matches. Remember break.