Conditionals in JavaScript (Section 2 of 6)
Written by Sailthru - Nick Gundry
We've been using the if statement a lot in the past few weeks. They are so important that we want to take a step back and explain in more depth how and why if statements work.
If statements are used to check conditions. If such conditions hold, then the subsequent code will be executed.
To get warmed up:
A variable yourName has been created on line 1. It is an empty string. Empty strings are defined in the hint.
On line 2, declare a variable called result. It should also be an empty string.
In the parentheses, create an if condition such that the yourName variable has zero characters.
Run the code. What happens? Because yourName has zero characters, the subsequent code is executed. It assigns the string "What is your name?" to the result variable.
Remember that to check the length of a string add .length after to the variable. For example yourName.length. For more on this, click here.
An empty string just means the variable is of string type (ie. words) but currently has nothing in it.
But just having an if statement by itself is not very helpful. We often have two scenarios that we want to consider. In this case, we need to use both an if statement and an else statement.
How does it work? First, we check for a condition (follows the word if). If that condition is not met, we then provide a default response after the else statement. All scenarios that do not satisfy the if condition will be given the default response.
In this exercise, we want to create two possible values for result, depending on the length of yourName.
(1) On line 2, declare a variable result and make it an empty string.
(2) Fill in the if condition. If the length of yourName is greater than 0, we want result to say "Hi" to you.
(3) Otherwise (ie. yourName has a length NOT greater than 0), the result variable should be assigned the string "What is your name?".
If yourName is an empty string, what do you think will show up? What if yourName is "Nick"?
You can check that a number is greater than another number by using the > symbol.
Many online forms use if / else statements. Eg. If you answer yes to question 1, skip to question 5. Else, go to question 2.
Nice job!
Now we want to revise the else if statement. This was used in FizzBuzz and we want to solidify your understanding of it! Else if lets us check for more than two conditions.
In this example, we're changing result based on the gender variable. There are three possible values for gender: "male", "female", and everything else. By everything else, we mean any string that is NOT "male" or "female". If you assigned "blue" for gender, that would come under everything else.
Look at the result variable to see what gender you should be checking for in the if / else statements. Line 6 says the result is "His name is..." so that helps us know what the if condition should be!
We have three distinct categories of gender: "male", "female" and everything else. We use one condition to check for male, one to check for female, and everything else is the default case.
Dont forget to put " " around strings!
Sometimes you'll need to check if one or another condition matches. For this we can use the or operator. This is written by using || between two (or more) conditions.
For example:
variable1 === 1 || variable1 === 2
This says: variable1 equals 1 OR variable1 equals 2.
Assign strings to yourName and gender.
Create an if condition that checks whether the value of the gender variable is either "male" or "female".
Try assigning different values to gender and see what happens.
Press shift + \ to get the symbol for |. We need two ||.
When we use ||, it reads as or. So if the first condition is true, OR if the second condition is true, the code will be executed. Note, if both the first and second conditions are true, the code will also executed.
We've just learned about the || (or) operator. Now let's learn about another really important operator.
The && operator means and. This operator checks if one condition AND another condition meet requirements.
For example: var1 === 1 && var2 === 2 reads as: var1 equals 1 AND var2 equals 2.
We want to check whether the yourName variable has a length greater than 0 AND whether the gender variable has a length greater than 0.
Assign values to yourName and gender.
Use the && operator to make an if statement checking that the length of yourName and gender are both greater than 0.
Remember to use .length and the > operator to check the number of characters.
The && must go between the two conditions you are checking for. The two conditions are:
(a) length of yourName is greater than 0
(b) length of gender is greater than 0
Note: Our if statement is only checking that you have assigned some string to yourName and gender. It does not check what you have typed. If you assign "blue" to gender, result will still return "Thanks".
It is always good to test your code for various scenarios. See what happens if you enter empty strings for yourName or gender.
Great job! You're now able to check for two conditions at the same time using &&. What if, after we have confirmed that both gender AND yourName are not zero length, we want to check for another condition?
We do this by nesting an if else statement. See the comment on line 5 to see where the nested conditional fits into the code.
See the hint for further explanation on how nested if else statements allow us to check for various scenarios.
In line 10, check whether the length of yourName and gender are both greater than 0.
If this is true, then we will use the nested if statement. Here, we want to check if gender equals "male" OR "female".
Assign any value to yourName and gender.
In this example, we have 3 different scenarios. Each scenario leads to a different result value.
(a) If the length of yourName and gender are both greater than 0, and if gender equals "male" OR "female", result equals "Thanks".
(b) If the length of yourName and gender are both greater than 0, but gender equals neither "male" or "female", result equals "please enter male or female for gender".
(c) If the length of yourName and gender are not both greater than 0, result is "Please tell us your name and gender." This is the default case.
This code is powerful because you can test many combinations of yourName and gender and it will give you an appropriate result.