3-conditional-statements.md

Part 3: Making decisions: Conditional statements

Conditional statements are the commands that allow us to tell a computer to make a decision based on the answer to our yes-or-no questions (comparisons) that we learned about in the previous section.

Let's do some decision-making!

---

Challenge 1:

Before you run the code below, make a prediction about what you think will appear in the console! Then test the code:

// Make a prediction before you run this code
if ( 3 > 2 ) {
    console.log("This condition is true!");
}

Discuss:

1. How would you translate this code into a plain English sentence? What's it saying?

2. What do you think the parentheses () mean here?

3. And what do you think the curly brackets {} mean here? Why do we need them?

4. Why is the code inside the if statement indented further over to the right? Does it need to be?

Challenge 2:

Again, make a prediction about what you'll see appear in the console, and then run the code afterwards:

// Make a prediction before you run this code
if ( 5 < 4 ) {
    console.log("This condition is true!");
}

Discuss:

1. What's different about this code compared to challenge #1 above?

2. How would you translate this code into a plain English sentence?

Challenge 3:

Same for this code -- make a prediction first, and then run the code to see if you were right!

// Make a prediction before you run this code
if ( 5 < 4 ) {
    console.log("This condition is true!");
}
console.log("You are AWESOME.");

Discuss:

1. What would you see in the console if you replaced 5 < 4 with a true condition like 5 === 5?

2. What's different about this code compared to challenge #2 above?

The structure of an if statement

Translated to plain English, the code in challenge 3 above would read like this: Only if it's true that 103 is greater than 99, then display in the console: "This condition is true!"

💡 Notice that if the answer (the condition) is false, nothing happens! The computer skips everything inside the curly brackets if the condition is false, and then it runs any code after the curly brackets.

Quick overview of the parts of an if statement:

1. The keyword if
2. A pair of parentheses, which contain the comparison or condition (the question we're asking)
3. A pair of curly brackets, which contain the code to run only if the condition is true

You can put as much code as you want inside those curly brackets! For example:

if ( 103 > 99 ) {
    console.log("This condition is true!");
    console.log("Run some other code here");
    console.log("..and more code... as much as you want!");
}

Building up from these examples, let's write some if statements of our own!

Challenge 4:

Translate the following sentences into code:

1. First, show this sentence in the console: "Our code is starting!"

2. Next, only if it's true that 55 is less than or equal to 60, then display this phrase in the console: "Condition true!"

3. Finally, regardless of whether the previous condition was true or not, always display this phrase in the console: "All done!"

Challenge 5:

Translate the following sentences into code:

1. If it's true that 6 is less than 7 and it's also true that 7 is less than 8, display this phrase in the console: "Why is 6 afraid of 7?"

Challenge 6:

Before you run the code below, make a prediction about what you think will appear in the console! Then run it:

// Make a prediction before you run this code
if ( "bla" === "urg" ) {
  console.log("This condition is true");
} else {
  console.log("This condition is false");
}

Discuss:

1. How would you translate this code into a plain English sentence?

2. What do you think you'd see in the console if you changed the condition to "bla" === "bla"?

Challenge 7:

Translate the following plain-English instructions into code:

1. If it's true that 7 is less than 9, display in the console: "Because 7 8 9! Get it? 7 ATE 9!"

2. Otherwise (if that condition is not true), display: "I don't get the joke."

Challenge 8:

As always, before you run the code below, predict what you think will appear in the console! Then try it out:

// Make a prediction before you run this code
if ( "bla" === "urg" ) {
  console.log("This condition is true");
} else if ("um" === "um") {
  console.log("This second condition is true");
}

Discuss:

1. How would you translate this code into a plain English sentence?

2. What do you think you'd see in the console if you changed "um" === "um" to a false condition like "um === "oh"?

Challenge 9:

Write the code to implement the instructions outlined in this flowchart:

Challenge 10:

Compare this next flowchart to the one in challenge #9 above -- they're very similar, but not quite. What's the only difference? Discuss this first, and then write the code to implement it:

Challenge 11:

Time to combine all of our powers! You can chain together as many if, else if, and else statements as you want!

Take a look at the flowchart below -- notice it has one more step than all of our previous examples. Take a shot at writing the code for this one:

Challenge 12:

This program is very similar to the one in challenge #11 above, but there's one important difference. Discuss your ideas, compare the two diagrams, and then write the code to implement this new version:

Group coding review:

⭐ Click here to open up our shared Glitch project again, so we can review a bit of what we've learned as a group!

---

🏆 Great work! You're well on your way to mastering some of the most powerful building blocks that make up all programming languages. And no matter how experienced you are at programming, it's always helpful to go back to the basics and practice, practice, practice!