04/04/2023

Types of Conditional Statements in JavaScript with Example

Conditional Statements in JavaScript are a block of code that will be executed if the condition is true. If you are familiar with C, C++, Java or any other programming language. A conditional statement's real-life example is "IF bulb is on the means power supply on ELSE IF bulb is off meant switch is off or no electricity ELSE any other issue", with the example of the bulb, switch, and electricity we can understand a Conditional Statements in JavaScript. In this tutorial, we are going to learn the following Conditional Statements in JavaScript.

Types of Conditional Statements in JavaScript

Types of Conditional Statements in JavaScript


  1. Types of conditional statements in JavaScript
  • If
  • If...Else
  • Else...If
  • Switch
  1. Diagram of conditional statements in JavaScript
  2. The syntax of conditional statements in JavaScript
  3. Examples of conditional statements in JavaScript
  4. How its work

Types of Conditional Statements


  • If Conditional Statement
  • If-Else Conditional Statement
  • Else-If Conditional Statement
  • Switch Conditional Statement

1. If Conditional Statements


If a condition is true only when a block of code will be executed. If you are familiar with C and C++, here also if the condition works the same.

Syntax

if (condition is true)
{
    //a block of code or Conditional Statements in JavaScript
}

Example:


<!DOCTYPE html>
<html>

<body>
	<p id="ifCondition"></p>
	<script>
		var i=17;
		if (i < 18)
		{
		document.getElementById("ifCondition").innerHTML =
		"Hello JavaScript!";
		}
	</script>
</body>

</html>

2. If-Else Conditional Statement


else if statement is used to handle where something will happen on both true or false conditions. Exactly like C or C++.

If Else Conditional Statements in JavaScript Picture simple example

Syntax

if (condition1==true) {
    //a block of code will be executed for a condition or Conditional Statement in JavaScript
}
 else {
    //a block of code will be executed if false or Conditional Statements in JavaScript
}

Example:


<!DOCTYPE html>
<html>

<body>
	<p id="ifelseCondition"></p>
	<script>
		var i=19;
		if (i < 18)
		{
		document.getElementById("ifelseCondition").innerHTML =
		"Hello JavaScript inside if Condition!";
		}
		else
		{
		document.getElementById("ifCondition").innerHTML =
		"Hello JavaScript inside else Condition!";
		}
	</script>
</body>

</html>

3. Else-If Conditional Statement


If there are several conditions according to which there will be some decision the code block of JavaScript will be executed work with if-else if conditional statements.

if (condition1) {
    //conndition1 is true
   //JS block of code will be executed  or Conditional Statements in JavaScript
} else if (condition2) {
     //Condition2 is true
    //JS block of code will be executed or Conditional Statements in JavaScript
}
else {
  //JS  block of code will be executed or Conditional Statements in JavaScript
    }

Example:


<!DOCTYPE html>
<html>

<body>
	<p id="elseifCondition"></p>
	<script>
		var i=19;
		if (i < 18)
		{
		document.getElementById("elseifCondition").innerHTML =
		"Hello JavaScript inside if Condition!";
		}
		else if(i>18 && i<28)
		{
		document.getElementById("elseifCondition").innerHTML =
		"Hello JavaScript inside else if Condition!";
		}
		else
		{
		document.getElementById("elseifCondition").innerHTML =
		"Hello JavaScript inside else Condition!";
		}
	</script>
</body>

</html>

Switch Conditional Statements


The switch statement is used one code block to be executed among many.

How It Works:

Firstly the expression of the switch statement is evaluated once and then the value is matched with one of the switch cases and the corresponding code block is executed.

If no case is matched with the value of the expression the default condition is executed at the end.

If no default statement is there, continue to execute the statements after Switch.


switch(exp) {
    case 1:
        //code block or Conditional Statements in JavaScript
        break;
    case 2:
        //code block or Conditional Statements in JavaScript
        break;
    default:
        //code block or Conditional Statements in JavaScript
}


Example:


<!DOCTYPE html>
<html>

<body>
	<script type="text/javascript">
		var grade='A';
		            switch (grade)
		            {
		               case 'A':
		               document.write("Excellent Student");
		                break;
		               case 'B': document.write("Medium");
		               break;
		               case 'C': document.write("Fail");
		                break;
		               default: document.write("Don’t Know")
		               break;
		            }
	</script>
</body>

</html>

Also, you can write a common code for multiple cases, If they produce the same result.

That is Like:


<!DOCTYPE html>
<html>

<body>
	<script type="text/javascript">
		var grade='B';
		            switch (grade)
		            {
		               case 'A':
		               case 'B':
		               document.write("Excellent Student");
		                break;
		               case 'C': document.write("Medium");
		               break;
		               case 'D': document.write("Fail");
		                break;
		               default: document.write("Don’t Know")
		               break;
		            }
	</script>
</body>

</html>

Last Words


If you have any doubts and need any help feel free to contact us or you can comment below, we are responsible to reply within 24 hours and you can like our Facebook page or Facebook groups for any personal assistance. We are committed to helping students first so don't hesitate to ask any doubts or queries. Join us and become a part of our organization.

Please share this article to help a student or programmer.
Previous Post
Next Post

post written by:

Hi, I’m Ghanendra Yadav, SEO Expert, Professional Blogger, Programmer, and UI Developer. Get a Solution of More Than 500+ Programming Problems, and Practice All Programs in C, C++, and Java Languages. Get a Competitive Website Solution also Ie. Hackerrank Solutions and Geeksforgeeks Solutions. If You Are Interested to Learn a C Programming Language and You Don't Have Experience in Any Programming, You Should Start with a C Programming Language, Read: List of Format Specifiers in C.
Follow Me

0 Comments: