By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

JavaScript If Then Else ElseIf Statements

How to work with JavaScript if and else if conditional statements.

Edited: 2016-01-09 23:19

In JavaScript, if statements are used to execute fragments of code, depending on which condition given by the developer has been meet. An if block will check for a given condition, and then run the code provided inside the block if the condition has been met, if not, the code inside the else block will be run.

JavaScript also allows the inclusion of so called else if's, which will be executed if the condition in the preceding if block was not met.

The script in this tutorial shows a message to the user using the alert function depending on which condition is met.

JavaScript if

The below is an example of a simple if block, without any else or else if blocks. These checks can be useful for many things, for example, when you can predict the current state of a variable. If a variable only has two possible values, "1" and "2", then it would be safe to assume that the current value is "2" given that it was not found to be "1". I.e.

<script type="text/javascript">
var number = 1;
if (number == 1) {
  alert('The number variable was checked, and found to be equal 1');
}
  // Place the rest of your script after this comment, which is ignored by the browser.
</script>

Javascript if else

The below script will check if the variable called "number" is equal to 1.

<script type="text/javascript">
var number = 1;
if (number == 1) {
  alert('The number variable was checked, and found to be equal 1');
} else {
  alert('The number variable was checked, and found NOT to be equal 1. The real real value is: '+number);
}
</script>

Else if's

Else ifs are extended if statements, the else if blocks are executed only if the first condition checked for was not met.

<script type="text/javascript">
var number = 77;
if (number == 1) {
  alert('The number variable was checked, and found to be equal 1');
} else if (number == 2) {
  alert('The number variable was checked, and found to be equal 2. The real real value is: '+number);
} else {
  alert('The number variable was checked, and found NOT to be equal 1 or 2. The real real value is: '+number);
}
</script>

Operators

Noticed how we used two equal signs rather then just one? This is because of the way comparison works in JavaScript. Two equal signs simply means "equal to", while three equal signs mean "exactly equal to".

Comparing a string to an integer using two equal signs would return true, but using three would return false. This is because 3 equal signs compares the type as well as the content of a variable.

Comparison Operators

Operator:Description:
==Equal to
!=Not Equal to
===Exactly equal to (Both type as well as the content)
<Less then
<=Less then or Equal to
>Greater than
>=Greater than or Equal to

Logical Operators

You can use these operators to provide multiple conditions to your if statements.

Operator:Description:
&&And
||Or
!Not

Using the And Operator

An example of how to include the And Operator in your if statements

<script type="text/javascript">
var number = 1;
var string = 'Brugbart rocks!';
if ((number === 1) && (string === 'Brugbart rocks!')) {
 alert(string);
}
</script>

Using the Or Operator

An example of how to include the Or Operator in your Scripts

<script type="text/javascript">
var number = '1';
var string = 'Brugbart rocks!';
if ((number === 1) || (string === 'Brugbart rocks!')) {
 alert(string);
}
</script>

The number variable above was decleared as a string, so the first condition is not met, but the second condition in the statement is met.

Using the Not Operator

<script type="text/javascript">
var number = 2010;
if (number != 1) {
 alert('The number was not 1..');
} else {
 alert('The number is still 1');
}
</script>