JavaScript Conditionals

So far, every program you have written runs every line, top to bottom. Real programs need to make choices: show the "Game Over" screen only when lives reach 0, give a discount only if the cart is over $50. Conditional statements let your code run different actions depending on whether a condition is true or false.

The condition is almost always a comparison, from the last lesson:

let lives = 0;

if (lives === 0) {
  console.log("Game Over");
}

JavaScript has five conditional tools. This lesson introduces each one, so you can recognize them and know which to reach for. The next section (JS If Conditions) gives each its own full lesson.

// The Five Tools

// if

Use if to run a block of code only when a condition is true. If it is false, the block is skipped and the program carries on after it.

if (condition) {
  // code to run if the condition is true
}

let cartTotal = 62;

if (cartTotal > 50) {
  console.log("You get free shipping!");
}
console.log("Thanks for shopping");    // always runs

// else

Add else to run a different block when the same condition is false. Exactly one of the two blocks always runs, never both, never neither:

if (condition) {
  // runs if the condition is true
} else {
  // runs if the condition is false
}

let hour = 20;

if (hour < 18) {
  console.log("Good day");
} else {
  console.log("Good evening");
}

// else if

When there are more than two possibilities, chain else if to test a new condition when the one before it was false. JavaScript checks each condition in order, runs the first block whose condition is true, and skips all the rest. The final else catches everything that matched nothing.

if (condition1) {
  // runs if condition1 is true
} else if (condition2) {
  // runs if condition1 is false and condition2 is true
} else {
  // runs if both are false
}

let score = 84;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("Needs work");
}

84 is also >= 70, but that test is never reached. The first true condition wins, which is why the order of an else if chain matters: put the most specific test first.

// switch

Use switch when you compare one value against a list of possible exact matches. Each possible match is a case, and default handles anything not listed:

switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

let day = "Sat";

switch (day) {
  case "Sat":
    console.log("Weekend!");
    break;
  case "Mon":
    console.log("Back to school");
    break;
  default:
    console.log("A weekday");
}

break ends the switch once a case has run. Leaving it out is a classic bug covered in the JS Switch lesson.

// The Ternary Operator ? :

The conditional (ternary) operator is the only conditional that is an operator, which is why it lives in this Operators section. Instead of running blocks of code, it picks one of two values:

condition ? valueIfTrue : valueIfFalse

Read it as a question: "is the condition true? If so, this value; otherwise, that value." Here is the same decision both ways:

let age = 20;

// if...else version
let status1;
if (age >= 18) {
  status1 = "adult";
} else {
  status1 = "minor";
}

// ternary version: one line, same result
let status2 = age >= 18 ? "adult" : "minor";

console.log(status1, status2);

Use the ternary to choose between two simple values. When either side needs more than one statement, use if...else. The JS Ternary lesson shows where it shines and where it hurts readability.

// Which One Should I Use?

// Quick Check

let temp = 95;
if (temp > 70) {
  console.log("warm");
} else if (temp > 90) {
  console.log("hot");
} else {
  console.log("cool");
}

// Try It

▶ Open Playground

1. Click Open Playground. Write an if that logs "Game Over" only when lives is 0. Run it with 3, then change it to 0 and run it again
2. Add an else that logs how many lives are left
3. Write an else if chain that turns a temperature into "hot", "warm", or "cold". Test it with 95, 75, and 40
4. Rewrite this with a ternary: if isMember is true, price is 8, otherwise 10. Log price with isMember set to true, then false