Conditionals:
As booleans are either true or false, they allow conditions such as:
If x is true, do y, otherwise do z
The condition does not have to be a one-off, it can be multiple:
If a || / && b is true, do z
Once the condition is found to be false, then the code skips the condition and either stops or runs an alternative condition:
Let's run this as a piece of code, and alert the answer:
What is the answer to Life, the Universe and Everything?
From here, we could add another "clause" to the code:
if (y == 42 || y == "mice")
What is the answer to Life, the Universe and Everything?
And again, we can add another clause. This time, we add &&. However, here, we will most often need 2 variables
(not the case for a mathematical code block, since there are various ways to achieve an answer in maths: (6+5)=(10+1)):
if (x == 42 && y == "mice")
What is the answer to Life, the Universe and Everything?
Who should I ask for the answer?
There are many ways to express these conditions in code:
If... else:Else... if:- The Ternary Operator:
- Nested Conditions:
- Switch conditions:
Our first example. This states that IF the submitted text is 42, then an alert saying "Got your towel, hitchhiker?" should be displayed. ELSE (ie. in all other cases) the alert should read, "What was the question?"
From this example we added the second clause using a Boolean conditional, ||:
Thus, IF the submitted text is 42 OR "mice"...
We can also express this in a different way:
We have added the clause else if (y = "Zaphod knows!"), thus we now have 3 "options"
plus one "fall-back option":
What is the answer to Life, the Universe and Everything?
However, we have to be a bit careful with these statements, as once the code finds the FIRST truth, it will skip to the end of the code:
does NOT give the same answer as
Even if we know that BOTH are true in the second example, the code has found its first truth and stopped.
condition ? expression1 : expression2
where condition is the variable (y == 42)
expression 1 is the if and
expression 2 is the else:
What is the answer to Life, the Universe and Everything?
The above are very good for "black and white" answers. But nested conditions offer more nuance:
You'll notice that both statements get alerted. Since the first condition is true, the code runs this statement and then continues to the next statement. Since this is also true, the code runs the second statement aswell.
However, again, there are caveats to this code:
Here, the else statement has been alerted, EVEN THOUGH the second if statement is true. The code has found
the first if condition to be false, and thus skips to the else condition.
We can go further. Here, we add a second else to the second if statement:
Since 5 is indeed greater than 2, the first if statement is alerted, and the code then proceeds to the next, nested segment of
the code block. And since 1 is NOT greater than 3, the nested else statement is alerted.
This, then, in the real world, would be a perfect way to create an online quiz.
Let's try just that!
Q1: What is the answer to Life, the Universe and Everything?
Q2: Who should I ask for the answer?
Q3: What is written in reassuring letters on the cover of the guide?
Q4: Who designed the Norwegian fjords?
The code above looks complicated, and indeed it is. But effectively, it is 3 nested conditions within the first condition:
See the Pen nested if else explanation by Justin Sawyer (@JustinSawyer) on CodePen.
Again, the above code is complicated. Especially so as we are "playing" with numerous variables - the four questions.
For more simple situations, when dealing with one variable, there is a different, simpler solution:
What is your favourite fruit?
The code above translates as:
If you choose either an apple, lemon, strawberry or banana, then the alert will alert your choice.
Else, the deault will alert.
The break; is important. Without it, the code will run both your answer and anything in the line(s) beneath your choice.
Q4: What is your favourite fruit?