JavaScript – Else If

JavaScript – Else If cover image
  1. Home
  2. JavaScript
  3. 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.

Sponsored Links

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.

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.

JavaScript