If statement is a conditional statement or sometimes called decision-making statement. if statement performs actions based on whether the condition is true or false.

This post will describe the if statement, and types of if statements with examples.

Precap

if statement
if else statement
if else if statement
if statement multiple conditions

So let’s begin

If conditional statements

The If conditional statement is categorized into 3 parts.

1) if

2) if else

3) else if

The if statement

if statement is a simple statement where 2 things are included first is the condition part and second is the execution part.

Syntax of if statement

if(condition)

{

// Statements to be executed.

}

How if statement work?

First, condition is evaluated, if it's true then a block of javascript statements between curly brackets is executed otherwise returns null.

Example of an if statement

Following the code check that your answer to the question is correct or not.

<!DOCTYPE html>
<html>
<head>
<title>javascript if statement</title>
</head>
<body>
<h2>Check whether the entered value is correct or not:</h2>
<script>
var a=prompt("What is the value of π(pi):");
if(a=="3.14")
{
document.write("Correct Answer");
}
</script>
</body>
</html>

Output:-

Explanation of example

The prompt () dialogue box (assign to variable a) display the dialogue box with its parameter value and cancel and ok button.

When you enter a value in a dialogue box, the conditional statement will check your input and match it with a condition, if your answer matches the condition then an alert dialogue box with a “Correct Answer” message will be displayed. When you enter the wrong input nothing will display.

Thus, an alert box with a message only displays when the condition is true.

The if else statement

The if else statement adds third part which is the else part.

Syntax if else statement

if(condition)

{

//Block of javascript statement to be executed. (when a condition is true)

}

else

{

//Block of javascript statement to be executed. (when a condition is false)

}

How if else statement works?

First, the condition part will be evaluated, when it is true the block of the javascript statement will be executed.

An else part is executed only when the condition is false.

Example of if else statement

The following example evaluated the input value, when entered value is correct “Correct answer” is displayed, and when entered value is wrong “Wrong Answer” is displayed.

<!DOCTYPE html>
<html>
<head>
<title>javascript if else statement</title>
</head>
<body>
<h2>Check whether the entered value is correct or not:</h2>
<script>
var a=prompt("What is the value of π(pi):");
if(a=="3.14")
{
document.write("Correct Answer");
}
else
{
document.write("Wrong Answer");
}
</script>
</body>
</html>

Output:-

The if else if statement

The if else if statement specifies a series of if conditions. If one condition is false another condition will evaluated.

Syntax of if else if statement

if(condition1)

{

//Block of javascript statement to be executed. (when condition1 is true)

}

else if(condition 2)

{

//Block of javascript statement to be executed. (when condition2 is true)

}

else if(condition 3)

{

//Block of javascript statement to be executed. (when condition3 is true)

}

else

{

//javascript statement to be executed when above all conditions are false.

}

How if else if statement works?

When code is executed, first the if condition is evaluated, if it is true the javascript statement after the condition will be executed. If the first condition is false, then else if condition (condition 2) is evaluated, and then third. If all series of else if conditions are false then else statement will be executed.

Example of if else if statement

For example, the if else if statement checks whether the entered number is Positive or Negative.

<!DOCTYPE html>
<html>
<head>
<title>if else if statement</title>
</head>
<body>
<h2>Check Number Positive or Negative</h2>
<script>
var a=prompt("Enter Number");
if(isNaN(a))
{
document.write("Please,enter only digit");
}
else if(a>0)
{
document.write(a," is Positive Number");
}
else if(a<0)
{
document.write(a," is Negative Number");
}
else if(a=="0")
{
document.write("Zero");
}
else
{
document.write("Please, enter the value");
}
</script>
</body>
</html>

Output:-

Explanation of example

when code is executed a prompt dialogue box is displayed on a screen with the message "enter value". when the user enters a value, this value is checked by a series of if else if conditions.

1) isNaN(a):- if the entered value is alphabet "Please enter only digit" message displayed.

if the first condition is false second is evaluated.

2) a>0:- if the entered value is greater than 0 "Positive Number" is displayed.

if the second condition is false third condition is evaluated.

3) a<0:- if the entered value is less than 0 "Negative Number" is displayed.

if the third condition is false fourth one is evaluated.

4) a==0:- if zero is entered zero is displayed.

when nothing will be entered, then the "Please enter value" message is displayed.

Javascript if statement with multiple conditions

You can specify more than one condition in a single if statement using logical operators &&(AND) and ||(OR).

Logical &&:- Use logical && when you want to evaluate all specified conditions true.

Logical ||:- Use logical || when you want at least one condition to be true among all specified conditions in the if statement.

Example

Define three numbers and check for the biggest number using the if else if statement.

<!DOCTYPE html>
<html>
<head>
<title>Multiple conditions in single if statement</title>
</head>
<body>
<h2>Which is biggest number among 20,40 and 60.</h2>
<script>
var a=20;
var b=40;
var c=60;
if(a>b && a>c)
{
document.write(a," is biggest number");
}
else if(b>a && b>c)
{
document.write(b," is biggest number");
}
else if(c>a && c>b)
{
document.write(c," is biggest number");
}
else
{
document.write("all are same");
}
</script>
</body>
</html>

Output:-

Multiple conditions in single if statement

Single if statement with multiple conditions example

Explanation of example

For example, 3 variables are defined a, b, and c. when code is executed conditions are evaluated. In the condition statement, all three numbers are compared with each other.

If both conditions (between ()) are true, the code between curly brackets is executed.

Summary

Note:-