Table of Contents
Consider Jason from the previous blogs. He has a list of schools to go to for his undergraduate degree. The criteria are:
You can do it by using the
Note: To code simultaneously, fire up a HTML/CSS codedamn playground.
You can run all the code in an online compiler without leaving your browser and even share it with anyone! You can also find all the code used in this blog here.
Using if-else for logic building
As per the problem statement, if Jason has a GPA of at least 3.2 but not more than 3.4, he will go to Standford! Let’s break this statement down into smaller pieces.
Calculating GPA with if-else
As per the situation, if Jason gets a GPA between 3.2 and 3.4, he will go to Stanford.
Therefore, condition: GPA >= 3.2 and GPA < 3.4
Note carefully, that GPA is strictly less than 3.4 because when it is equal to 3.4, Jason will opt for Harvard.
Code for if-else statement
Note: For the case of Stanford, I have changed the GPA temporarily to 3.3.
Look at line 13 in the code:
You will see the exact condition we wrote down for Standford. If
>= (greater than or equal to) 3.2
&& (and) it is
< (less than) 3.4, he will go to Stanford! The English you wrote is actually the code as well! The general syntax is:
The condition here is
jason.gpa >= 3.2 && jason.gpa < 3.4. And we are printing out the name of the college that Jason will go to. You have already seen the
< in a previous blog post. But
&& is new. It is clear from the example, that
&& is helping us define a range, but let’s delve into some more details about this.
AND Logical Operator – &&
jason.gpa >= 3.2 && jason.gpa < 3.4
On the left-hand side of
&& we are checking if the GPA is greater than or equal to 3.2. It is 3.3 and so the left-hand side is
true. Similarly, on the right-hand side of
&& we check to see if the GPA is less than 3.4. It is, and so the right-hand side is also
The condition is then actually
true && true. The logical operator sees, that the two things it is comparing are true, and then returns
So what happens, if one of the conditions was
false? Well, then
&& would have returned
It means, that if even a single condition is
&& will return
What if you want to return
true, if any one of the conditions is
OR Logical Operator – II
The “or” operator represented by
true, if any one condition is
true! So if we check the condition:
jason.gpa >= 3.2 || jason.gpa > 3.4
it will return
Here is how the operation with
|| will look like:
You have gained an understanding of the logical
if statement again.
You understand now, that the condition inside the
if statement will evaluate to
And you have already seen that the statement inside
console.log() is getting printed. So a
if block executes when the statement evaluates to
With a GPA of 3.3, Jason will go to Stanford. What if his GPA was 3.4? He should go to Harvard. How do you add that?
It’s not difficult at all. In fact, now that you understand how the
if statement works, all that is left is to add another
else if statement that will run if the first
if statement’s condition is
You add the condition you want to check for Harvard following
if, that the GPA should be between 3.4 and 3.7. Before
if, you add the word
false, check the new condition.
Try adding a condition for MIT as well! Check the solution below:
Carefully note that it is not necessary to use
if needs one or more conditions to evaluate to
Wohuu! Try outputting “No valid college”, if Jason’s GPA is between 0 and less than 3.2!
You are getting the hang of it!
What if someone adds a negative GPA of -1 or a GPA greater than 4 erroneously?
Right now, if you change Jason’s GPA to 5, it shows that he will go to MIT. That is not right because the maximum possible GPA is 4. To correct this we can add an
&& condition for MIT as well.
But then you see that nothing is being printed! If you replace
-1.0, you will still see nothing.
The best way to do it is to add an
else block. An
else block executes when no other
if condition is
true. In this case, we want to see, that if the GPA is not between 0 and 4, then the GPA is invalid.
There you have it, a small program that checks which college Jason can enter into for his undergraduate degree.
I hope this was helpful.
You can have an if statement inside another if statement. Everything remains exactly the same except the syntax. I recommend you run the code below and see how the nested
if works. The code checks if Jason is an adult or not and if he is allowed to drive or not.
There you have it. We covered a lot of ground. We saw that an
if condition executes only when the condition specified is
In case there is an
else if block, it will execute, if the previous conditions are
false and the condition inside the
else if block is
true. In a situation where none of
else if are
true, the code inside the
else block will execute.
It is not necessary to specify the
else if or the
You also saw how the logical
&& - and and logical
|| - or work!