JavaScript – Else If

We’ve already learnt that conditions can take one of the possible two paths. That is, when the condition is ‘true’ the if statement block is executed while the statement block in else is executed when the condition is ‘false’. However, as in life, things are rarely black or white… there are always shades of grey.

The JavaScript if – else statements also provides for else if clauses through which we can make additional branches to the condition.

if (number > 0)
   {
   alert("Number is a positive integer");
   }
else if (number < 0)
   {
   alert("Number is a negative integer");
   }
else
   {
   alert("Number is 0");
   }

Note that the else if clause is followed by another condition placed between parenthesis. If this condition is true, the statement inside the else if block are executed.

The code above checks the value of variable number. When number is greater than 0, the statements in if block are executed and when number is less than 0, the statements in else if block take over. Finally, if the number is equal to zero, the conditions in if and else if are ‘false’ and the program execution falls to the statements in else clause block.

When you first entered this page, you received a greeting. This greeting is customized according to the time on the client (your) machine. Let’s see how it works.

var d = new Date();
var t_hour = d.getHours();

if (t_hour <= 3)
   {
   alert("Hello dear visitor,\nWorking late aren't we?");
   }
else if (t_hour > 3 && t_hour < 12)
   {
   alert("Good morning dear visitor");
   }
else if (t_hour >=12 && t_hour <= 16)
   {
   alert("Good afternoon dear visitor");
   }
else
   {
   alert("Good Evening dear visitor");
   }

Click here to run the script again

We first initialize a variable using the new operator with the Date() contruct. The value of hours is stored in t_hour variable by employing the getHours() method of the date object. The value of t_hour variable is then passed through if-else if-else conditions. Thus, depending on the time of the day (time in hours), a greeting is displayed in an alert box.
You’ll recall that JavaScript clock is a 24 hour clock.

• When t_hour is less than equal to 3 (0, 1, 2, or 3): alert box displays “Hello dear visitor,\nWorking late aren’t we?”.
• When t_hour is more than 3 AND less than 12: alert box displays “Good morning dear visitor”.
• If the value of t_hour is greater than equal to 12 AND less than equal to 16: “Good afternoon dear visitor” is displayed in the alert box.
• For all other values of t_hour (17, 18, 19, 20, 21, 22, and 23): alert box displays “Good Evening dear visitor”.

You can check this script by changing the time on your machine and clicking on the above link.

The && and || operators

The && (AND) and || (OR) are logical operators. They are used to extend conditions.

if (number > 4)
   {
   statements...
   }

The above condition checks is variable number is greater than 4. To check if this variable value lies between 10 and 4, we employ the && operator.

if (number 7gt; 4 && number < 10)
   {
   statements...
   }

Thus, the statements inside the if block will be executed if number equals 5, 6, 7, 8 or 9.

Now, if we want to display an alert box if the value of number variable is less than 20 or more than 50, we use the || operator.

if (number < 20 || number > 50)
   {
   alert("...");
   }

In the code above, an alert box will be displayed if number is 18, 5, -435, 51, 324… However, if the value of number lies between 20 and 50 (included 20 and 50), no alert box will be displayed.

Your comments

IMPORTANT Have a question / problem? Click here to ask an expert.