Teaching Conditional Statements and the Real Challenge

I've noticed now in these three cohorts that I've experienced, one that I was a student in and now the two that I have been a Teaching Assistant for, that one of the hang ups early on in the course happens during our lesson on writing conditional statements. But it's not what you'd expect... the concept of cause and effect is not difficult to grasp. Most of us have learned at this point in our lives that there are little rewards or consequences to all of our actions and sometimes big rewards or consequences.

If you're early to work, you get time to have coffee. If you're late to work, you get a write up.

Writing an if statement and even the else if that comes next has been an easy thing to teach people.

Easy peasy. So why are we here? In my experience (granted it's a small sampling of students but everyone learns differently so we're doing this!) the most difficult thing to get across is following the logic behind the statements.

I've written up a mini lesson to try to express what exactly is going on in a conditional statement, as well as some logical thinking surrounding them(at least, the one I'm using here). Let's jump in:

We have two expressions that perform mathematic functions. We want to evaluate if one, both, or neither are true. For the purpose of this exercise, we don't even know what their values are. This is stumbling block one. It's difficult for people to grasp that we really don't care what the variables are. It does not matter. We only want to evaluate whether they are true or false. At some point it might not even be a calculatable mathematic equation. We don't care what the data is. We're developers. We care what we DO with the data.

Thinking logically from one condition to the next is our next big hurdle. In the example above, which is similar, just simplified, to one of the lessons we teach, there are three conditions and an else statement. We will get to talking about else statements further down. For now, let's start breaking this down from the top.

The if statement

Based on the way we learn JavaScript, how we move from one topic to the next, we've only seen statements being true expressed like this:

expression1 === true && expression2 === true        

So our first hurdle is figuring out what the heck the conditions in the if statement mean? When variables are expressed without any sort of comparison like this just hanging out by themselves, it is the same as exp1 === true.

if (exp1 && exp2){ 
? ? console.log("Expression one and expression two are true");        

The question we are asking in the condition of this if statement is "Are both expressions true?". If the answer is "Yes", we stop here. The rest of the logic does not matter, we have found our answer. When a condition is met at any point in an if/else statement, the process stops. By the nature of the questions we are asking, none of the other conditions could be met.

What if they aren't both true?

Enters our first else if condition

} else if (exp1) {
? ? console.log("Only expression one is true");        

Why are we only evaluation expression 1?

Well, bear with me here, we asked the question, "Are both expressions true?". The answer was "No, they are not both true". It is just answering our question. So now we know, and this is a big part here, at least one of these expressions is not true. Note the "are not both true." Because that is the question we asked, we can now know "One or the other or both are false." This is the only information we can ascertain from the data we have so far.

So now, because we're not asking "Ok. Which expression is true?", that's not how if statements work, our next question is "Is expression one true, then?" You know at this point that we want clean and concise code. This is why we don't see something like this:

}else if (exp1 === true && exp2 !== true){        

We don't need all of that. We have to ask all the questions but we can use the process of elimination!

Back to our first else if, "Is expression one true?". Well, if the answer is "Yes. Expression one is true", then we know expression one is true and expression two is false. It HAS to be. Why? Because the first question we asked is "Are both expressions true?" And the answer we got was "No. They are not both true." One of these has to be false! They can't both be true and we know expression one is true.

There. Right there. That's what we need to understand. How the logic works. That makes the rest of the else if part much easier to grasp once we understand what just happened.

So what if the answer was "No. Expression one is not true"?

Enters our second else if condition

} else if (exp2) {
? ? console.log("Only expression two is true");        

What do we know so far?

• They are not both true
• Expression one is not true

What does that mean for expression two?

I'd bet that at this point we all know that we are asking the question, "Alright then. Is statement two true?" If the answer we get back is "Yes. Statement two is true." Hurrah! We've figured it out!

• Expression one is not true
• Expression two is true

Well, ok. What if expression 2 isn't true?

Enters our else statement

Notice the heading of this part says "statement" and not "condition"? Yes, that's intentional. Else doesn't get a condition. Else doesn't care about those silly conditions. Else is any other outcome to this process that we are doing. Now, I understand that in this case we have 4 defined outcomes. It won't always be so. There will be examples below. For now, let's take a look at the last bit of our example scenario here first.

} else {
? ? console.log("Neither expession is true")
}        

We've done it! We've made it to the end and the only conclusion we can draw(in this particular example) is that neither of these expressions are true. Logically we know it's because of these facts:

• The expressions are not both true
• Expression one is not true
• Expression two is not true

We have our answer!

But what about when we have even more outcomes? If none of the conditions that you care about are met, else is your catch-all. Literally any other outcome to this scenario falls under else.

What if I have more than 3 conditions I want to check for? Well at this stage in your education, you'd write more else if conditions. Later down the road there are much better ways to check multiple conditions, especially if you have more than three! But I'll leave that to you to go find. For now.

Not clear enough on else?

Real life out in the world, not coding anything, just some logic:

You are at a school. Some people at that school: Teachers, students, parents, janitors, cafeteria staff, The President. Could be anyone. But we need the teachers to go to their hallways and the students to go to their classrooms. Anyone else needs to exit the building.

In this scenario We only really need to know if someone is a teacher or a student. We don't really care who the rest of the people are. All of them fall under the catch all, "exit the building".

So it goes like this: "If you see a teacher, send them to the hall. If you see a student, send them to the classroom. If you see anyone else, remove them from the school". Make sense?

Need one more?

"If the cat is brown, give me a cookie. If the cat is black, give me a scone, if the cat is any other color imaginable, or heck even unimaginable, give me a cupcake."(I like pastries...)

I hope this can help someone out there understand how to take the information in an if/else structure and break it down using logical thinking. If this helps even one person, I'll be happy.

Until next time, happy coding and have fun.