Learn JavaScript

JavaScript If Else

There may be situations, where you want that your JavaScript Program performs some specific action(s) based on certain condition(s). Like other programming languages, JavaScript also supports conditional statements (if, else if, nested if else) to achieve such goal. The conditional statements allow your program to take correct decisions and perform some specific actions accordingly.

JavaScript supports the following types of conditional statements:

  • if.
  • if … else.
  • if … else … if (nested).

JavaScript If Statement

JavaScript’s If conditional statement guides JavaScript to take correct decisions and perform some specific actions based on the truth values of the conditional statement. The basic syntax of JavaScript if statement is as follows:

Syntax

if (expression){
statement 1;
statement 2;
statement 3;
.
.
.
statement n;
}

Note: The set of statements inside if block will be executed, if the truth value of the “expression” is true. If the truth value of the “expression” is false, then the control passes out of the if block and the set of statements outside of the if block will be executed.


Example 1

<html>
<body>
<h2>Program to execute the statements inside the if block</h2>
<script>
var marks = 98;
if(marks >= 33){
document.write("!! Congratulations !! You Have Qualified");
}
</script>
</body>
</html>

Output

Program to execute the statements inside the if block

!! Congratulations !! You Have Qualified


Example 2

<html>
<body>
<h2>Program to execute the statements inside the if block</h2>
<script>
var marks = 21;
if(marks >= 33){
document.write("Congratulations ! You Have Qualified");
}
document.write("Sorry You are Not Qualified, Try Again Later");
</script>
</body>
</html>

Output

Program to execute the statements inside the if block

Sorry You are Not Qualified, Try Again Later


JavaScript If Else Statement

It allows the JavaScript program to execute in more controlled manner. The basic syntax of JavaScript if else statement is as follows:

Syntax

if (expression)
{
set of statements - 1;
}
else
{
set of statements - 2;
}

Note: The set of statements inside if block will be executed, if the truth value of the “expression” is true. If the truth value of the “expression” is false, then the control passes to the else block and set of statements inside else block will be executed.


Example 1

<html>
<body>
<h2>Program to understand the JavaScript if else statement</h2>
<script>
var lotteryNumber = 007;
if(lotteryNumber == 007)
{
document.write("Congratulations ! You Have Won Jackpot");
}
else
{
document.write("Sorry, Better Luck Next Time");
}
</script>
</body>
</html>

Output

Program to understand the JavaScript if else statement

Congratulations ! You Have Won Jackpot


Example 2

<html>
<body>
<h2>Program to understand the JavaScript if else statement</h2>
<script>
var lotteryNumber = 007;
if(lotteryNumber != 007)
{
document.write("Congratulations ! You Have Won Jackpot");
}
else
{
document.write("Sorry, Better Luck Next Time");
}
</script>
</body>
</html>

Output

Program to understand the JavaScript if else statement

Sorry, Better Luck Next Time


JavaScript If Else if…

This is the another form of if else (conditional) statement. It is also called the nested if else statements. There is nothing special in it, rather there is a series of if and else statements. The basic syntax of JavaScript if else if… statement is as follows:

Syntax

if (expression 1)
{
set of statements 1;
}
else if (expression 2)
{
set of statements 2;
}
.
.
.
else if (expression n)
{
set of statements n;
}
else
{
set of statements N;
}

Note: the execution of a block or set of blocks will depend on the truth values of expression 1, expression 2, …, expression n. If none of the expressions from 1 to n is true, then the final else block will be executed.

Example

<html>
<body>
<h2>Program to understand the JavaScript if else ... if statement</h2>
<script>
var marks = 97;
if(marks <=32)
{
document.write("You are Failed, Work Hard");
}
else if (marks >=33 && marks < 48)
{
document.write("You are Passed with Third Division");
}
else if (marks >= 48 && marks < 60)
{
document.write("You are Passed with Second Division");
}
else if (marks >= 60 && marks < 75)
{
document.write("You are Passed with First Division");
}
else if (marks >= 75 && marks < 90)
{
document.write("You are Passed with Distinction Division");
}
else
{
document.write("Well Done, You are a Brilliant Student");
}
</script>
</body>
</html>

Output

Program to understand the JavaScript if else … if statement

Well Done, You are a Brilliant Student

Suggestion: Change the values of the variable marks in var marks = 97; and observe the output accordingly.


Audience

This JavaScript tutorial is designed to help the beginners as well as the professional developers. For better understanding the language of the tutorial is kept simple and easy to understand.

Prerequisites

This tutorial demands to have the basic knowledge of the programming languages such as c or c++, HTML for the better understanding of the JavaScript programming language. The other basic requirement to learn JavaScript through this tutorial is the basic knowledge of computer and information technology so you can easily acquire a better understanding JavaScript programming.

Community Helping

In case you find any kind of error like typing error, spelling mistakes, incorrect grammar, incorrect information or any other mistakes. Please feel free to write to us at: akyadav@etutororg.com.