if and if else statements

We can make decisions in our code using if and if else statements.

It is very much like this template:

if *some condition is true*, then *a certain action will happen*, else *another action will happen*

For example, if it is raining then, I will take my umbrella, else I will leave my umbrella at home. It is not that much different in code:

 let rain = true;

 if(rain){ 
 console.log("** Taking my umbrella when I need to go outside **"); 
 } else { 
 console.log("** I can leave my umbrella at home **"); 
 } 

In this case, the value of rain is true. And therefore, it will log to the console:

 ** Taking my umbrella when I need to go outside ** 

But let’s first take a step back and look at the syntax.

We start with the word “if.” After this, we get something within parentheses. Whatever is between these parentheses will be translated to a Boolean. If the value of this Boolean is true, it will execute the block of code associated with if. You can recognize this block by the curly braces.

The next block is optional; it is an else block. It starts with the word “else” and is only executed in case of the Boolean having the value false. If there is no else block and the condition evaluates to false, the program will just skip ahead to the code underneath the if.

Only one of these two blocks will be executed; the if block when the expression is true, and the else block when the expression is false:

 if(expression) { 
 // code associated with the if block 
 // will only be executed if the expression is true 
 } else { 
 // code associated with the else block 
 // we don't need an else block, it is optional 
 // this code will only be executed if the expression is false 
 } 

Here is another example. If the age is below 18, log to the console that access is denied, otherwise log to the console that the person is allowed to come in:

 if(age < 18) { 
 console.log("We're very sorry, but you can't get in under 18"); 
 } else { 
 console.log("Welcome!"); 
 }

There is a common coding mistake related to if statements. I have made it in the following code snippet.

Can you see what this code does?

 let hobby = "dancing";

 if(hobby = "coding"){ 
 console.log("** I love coding too! **"); 
 } else { 
 console.log("** Can you teach me that? **"); 
 } 

It will log the following:

 ** I love coding too! ** 

That might surprise you.

The problem here is the single equal sign in the if statement. Instead of evaluating the condition, it is assigning coding to hobby.

And then it is converting coding to a Boolean, and since it is not an empty string, it will become true, so the if block will be executed.

So, always remember to use the double equal sign in this case.

Let’s test our knowledge with a practice exercise.

Practice exercise 2.18

1. Create a variable with a Boolean value.
2. Output the value of the variable to the console.
3. Check whether the variable is true and if so, output a message to the console, using the following syntax:

if(myVariable){
//action
} 

1. Add another if statement with an ! in front of the variable to check whether the condition is not true, and create a message that will be printed to the console in that instance. You should have two if statements, one with an ! and the other without. You could also use an if and an else statement instead—experiment!
2. Change the variable to the opposite to see how the result changes.

After completing the practice exercise, you can find the answers in the download section.