Conditional Statements in JavaScript

Conditional statements in javascript are useful when we have to execute a different block of code or actions according to different conditions.

Types of conditional statements:

  1. if statement
  2. if … else statement
  3. if … else if statement
  4. switch statement

1) if statement:

if statement is useful when you want to execute a certain block of code based on the specific condition.

Syntax:

 if (condition) {
 // block of code gets executed if condition is true
 }

Example:

var percentage = prompt("Please enter your percentage");
if(percentage >= 40) {
      document.write("Congrats, you’ve passed the exam.");
}

Output:

Case 1: If the user enters a number greater than or equal to 40, the following message will be printed.

Congrats, you’ve passed the exam.

Case 2: If the user enters a number less than 40, then nothing gets printed.

2) if … else statement:

if else statement is useful in the following scenario:

if you want to implement a certain block of code if a certain condition is true and implement another block of code if the condition is false.

Syntax:

if (condition) {
      // block of code gets executed if condition is true
 } else {
     // block of code gets executed if condition is false
 }

Example:

var percentage = prompt("Please enter your percentage");
if(percentage >= 40) {
     document.write("Congrats, you’ve passed the exam.");
} else {
     document.write("Sorry, you’ve failed the exam.");
}

Output:

Case 1: If the user enters a number greater than or equal to 40, the following message will be printed.

Congrats, you’ve passed the exam.

Case 2: If the user enters a number less than 40, the following message will be printed.

Sorry, you’ve failed the exam.

3) if … else if statement:

if else if statement is useful in the following scenario:

if you want to check multiple conditions and accordingly want to execute a block of code and if none of the conditions are true then execute another block of code.

Syntax:

if (condition1) {
     // block of code gets executed if condition1 is true
 } else if (condition 2) {
     // block of code gets executed if condition2 is true
 } else {
     // block of code gets executed if both condition 1 and condition2
     // are false
 }

**Note:

Strings in javascript have to be terminated in a single statement. Otherwise, you will get an error like “Uncaught SyntaxError: Invalid or unexpected token”. In this tutorial, strings are separated into multiple lines for readability purposes.

Example:

var percentage = prompt("Please enter your percentage");
if(percentage >= 65) {
     document.write("Congrats, you’ve passed the exam with
     distinction.");
} else if (percentage >= 60 && percentage = 40 && percentage < 60) {
     document.write("Congrats, you've passed the exam.");
} else {
     document.write("Sorry, you've failed the exam.");
}

Output:

Case 1: If the user enters a number greater than or equal to 65, the following message will be printed.

Congrats, you’ve passed the exam with distinction.

Case 2: If the user enters a number greater than or equal to 60 and less than 65, the following message will be printed.

Congrats, you’ve passed the exam with first class.

Case 3: If the user enters a number greater than or equal to 40 and less than 60, the following message will be printed.

Congrats, you’ve passed the exam.

Case 4: If the user enters a number less than 40, the following message will be printed.

Sorry, you’ve failed the exam.

4) switch statement:

The switch statement is useful for decision-making purposes. An expression is given to switch statement and that expression’s result is checked against each case. If the matching case is found then related statements are executed. If no matching case is found default case is executed.
switch statements can be used as an alternative to if else if statement.

Syntax:

switch (expression) {
case value1:
  // statements are executed when result of expression matches value1;
break;
case value2:
  // statements are executed when result of expression matches value2;
break;
.
.
case valueN:
  // statements are executed when result of expression matches valueN;
break;
default:
  // statements are executed when none of the values match the 
  // value of the expression;
}

Explanation:

  • Result of the expression is matched against each case.
  • Duplicate case values are not allowed in the switch statement.
  • The default statement is optional. If the result of expression does not match with value in any case then the statements under default will be executed.
  • You can use the break statement to terminate a statement sequence.
  • The break statement is optional. If the break statement is not given, the execution of the next case will continue.

Example:

var grade = prompt("Please enter your grade");
switch (grade) {
case "A": 
       document.write("Congrats, you’ve passed the exam with 
       distinction.");
       break;
case "B":
       document.write("Congrats, you’ve passed the exam with 
       first-class.");
       break;
case "C":
       document.write("Congrats, you’ve passed the exam with 
       good marks.");
       break;
case "D":
      document.write("Congrats, you’ve passed the exam 
      with less marks.");
      break;
case "F":
      document.write("Sorry, you’ve failed the exam.");
      break;
default:
     document.write("You entered wrong grade. Please enter 
     correct grade like A, B, C, D, F.");
}

Output:

Based on the grade entered by the user, the result will be given.
i.e If the user entered grade A, then the following message will be printed.

Congrats, you’ve passed the exam with distinction.

Additional Links:

Ternary operator in javascript

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments