This diagram isn't quite right. If you don't think learning to code is difficult, then you miiiight not get it yet.

Conditional Statements

Conditional statements are one of the ways that we control the flow of a program.

We might say...

If I am 16 or older, then I can drive legally.

In JavaScript, we would say:

const age = 42;
if (age >= 16) {
  console.log(`You are ${age}, so you are legal to drive.`);
}

Or...

If I get eight or more hours of sleep, I am likely to feel more rested.

In JavaScript, we would say:

let hoursOfSleep = 42;
if (hoursOfSleep >= 8) {
  console.log("You are likely to feel more rested.");
}

We can follow one conditional with another.

if (hoursOfSleep == 42) {
  console.log("He used 42 again, didn't he?");
}

Let's Break It Down

An if statement executes if its condition evaluates to true:

let heightInInches = 73;

if (heightInInches >= 60) {
  console.log("You are tall enough to ride");
}

Sorry, you're too short. :(

heightInInches = 42;
if (heightInInches >= 60) {
  // This doesn't print...
  console.log("You are tall enough to ride");
}

Syntax

An if statement starts with the keyword if:

let heightInInches = 73;

if (heightInInches >= 60) {
  console.log("You are tall enough to ride");
}

It is followed by parentheses that contain a condition:

let heightInInches = 73;

if (heightInInches >= 60) {
  console.log("You are tall enough to ride");
}

This condition must evaluate to a boolean value.

This is followed by a code block that executes only if the condition is true. Remember that code blocks open with a left curly bracket ({) and close with a right curly bracket (}):

let heightInInches = 73;

if (heightInInches >= 60) {
  // <== Open
  console.log("You are tall enough to ride");
} // <== Close

We can skip the curly brackets if we only want to execute one line of code, but that's usually frowned upon since it's easy to mess up. This code is the same:

let heightInInches = 73;

if (heightInInches >= 60) console.log("You are tall enough to ride");

Else what?

It's polite to offer an apology, eh? We can be polite.

An if statement allows us to do something else if its condition does not evaluate to true:

let heightInInches = 42;

if (heightInInches >= 60) {
  console.log("You are tall enough to ride.");
} else {
  console.log("I'm sorry, too short.");
}

And then?

We can create sequences of if/else statements:

let heightInInches = 42;

if (heightInInches >= 60) {
  console.log("You are tall enough to ride.");
} else if (heightInInches >= 30) {
  console.log("Try the teacups. They look fun.");
} else {
  console.log("I'm sorry, too short.");
}

Think of this as connecting multiple if/else statements.

Swichin' it up!

Sometimes, we can use a switch/case statement to replace several if/else statements. Let's say we are categorizing our amusement park patrons into "adult", "youngster" (just short people, really), and everyone else.

We can use a switch/case statement to execute one or more statements based on a value:

let ageGroup = "youngster";

switch (ageGroup) {
  case "adult":
    console.log("You can ride the rollercoaster!");
  case "youngster":
    console.log("The teacups are fun.");
    break;
  default:
    console.log("Oh, you must be a toddler. Toddle on!");
    break;
}

What is displayed if we change ageGroup's value to "adult"? Why?

What is displayed if we change its value to anything other than "adult" or "youngster"? Why?