JavaScript – Conditional Statements If Else-If Else


What is a conditional statement?

Conditional statements is also termed as conditional expressions which is symbolised by variables A and B, is an if-then-else statement in which A is a hypothesis and B is a conclusion.

What is the purpose of conditional statement in Javascript ?

Conditional statement is used to decide which piece of code should be executed when the condition meets TRUE and which piece of code should be executed when the condition meets FALSE.

Types of Conditional Statements in JavaScript.

There are two types of conditional statements

1. IF – Else,If- Else

2. Switch –  case ( will be explained in next tutorial )

1. IF – Else Statement

IF – statement executes the piece of code when the condition is true.

Else – statement executes the piece of code if condition is false.

Else IF – statement executes the piece of code when the second condition is true.

Else – statement executes the piece of code when the condition is false.

Javascript online learning !!!

Click to Learn More about – Javascript online learning

1. IF Statement :

Syntax :


if(condition){
	// piece of code to be executed when the condition is true.
}

IF Condition

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>Out title</title>
		<script type="application/javascript">
			var a = 10;
			var b = 20;
			document.write("The value of a = " + a + "<br/>");
			document.write("The value of b = " + b + "<br/>");
			if(a<b){
				document.write("b is greater than a");
			}
		</script>
	</head>
	<body>
	</body>
</html>

Output :

The value of a = 10

The value of b = 20

b is greater than a

2. IF – Else Statement

Syntax :

if(condition){
	// piece of code to be executed when the condition is true.
}else{
	// piece of code to be executed when the condition is false.
}

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>Out title</title>
		<script type="application/javascript">
			var a = 10;
			var b = 20;
			document.write("The value of a = " + a + "<br/>");
			document.write("The value of b = " + b + "<br/>");
			if(a==b){
				document.write("a is equal to b");
			}else{
				document.write("a is not equal to b");
			}
		</script>
	</head>
	<body>
	</body>
</html>

Output :

The value of a = 10

The value of b = 20

a is not equal to b

3. Else – IF Statement

Syntax :

if(condition-1){
        // piece of code to be executed when the condition-1 is true.
}else if(condition-2){
        // piece of code to be executed when the condition-2 is true.
}else if(condition-3){
        // piece of code to be executed when the condition-3 is true.
}else if(condition-4){
        // piece of code to be executed when the condition-4 is true.
}else if(condition-5){
        // piece of code to be executed when the condition-5 is true.
}else{
        // piece of code to be executed when all the conditions are false.
}

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>Out title</title>
		<script type="application/javascript">
			var a = 10;
			var b = 20;
			var c = 20;
			document.write("The value of a = " + a + "<br/>");
			document.write("The value of b = " + b + "<br/>");
			document.write("The value of c = " + c + "<br/>");
			if(a==b){
				document.write("a is equal to b");
			}else if(a==c){
				document.write("a is equal to b");
			}else if(b==c){
				document.write("b is equal to c");
			}else{
				document.write("a is not equal to b");
			}
		</script>
	</head>
	<body>
	</body>
</html>

Output :

The value of a = 10

The value of b = 20

The value of c = 20

b is equal to c

4. Nested IF Statement :


Syntax :

if (condition-1){
	// Piece of code to be executed when condition-1 is true.
	if(condition-a){
		// Piece of code to be executed when condition-a is true.
	}	
}else if(condition-2){
	// Piece of code to be executed when condition-2 is true.
	if(condition-b){
		// Piece of code to be executed when condition-b is true.
	}
}else{
	// Piece of code to executed when all the conditions are false.
}

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>Out title</title>
		<script type="application/javascript">
			var a = 10;
			var b = 20;
			var c = 20;
			var x = "A";
			var z = "A";
			document.write("The value of a = " + a + "<br/>");
			document.write("The value of b = " + b + "<br/>");
			document.write("The value of c = " + c + "<br/>");
			document.write("The value of x = " + x + "<br/>");
			document.write("The value of z = " + z + "<br/>");
			if(a==b){
				if(x==z){
				document.write("a is equal to b and x is equal to z");
				}
			}else if(a==c){
				 if(x==z){
                                document.write("a is equal to c and x is equal to z");
                                }
			}else if(b==c){
				if(x==z){
                                document.write("b is equal to c and x is equal to z");
                                }
			}else{
				document.write("No conditions are satisfied");
			}
		</script>
	</head>
	<body>
	</body>
</html>

Output :

The value of a = 10

The value of b = 20

The value of c = 20

The value of x = A

The value of z = A

b is equal to c and x is equal to z