Sometimes when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this. Conditional statements are the set of commands used to perform different actions based on different conditions. JavaScript supports two conditional statements: if…else and switch. Both perform in saw way the same task.

If … Else Statement

The If Statement is a way to make decisions based on a variable or some other type of data. For example, you might have a script that checks if Boolean value is true or false, if variable contains number or string value, if an object is empty or populated, or even check type and version of the visitors browser.

Use the if statement to execute a statement if a logical condition is true. Use the optional else clause to execute a statement if the condition is false. The syntax for If statement looks as follows:

if (condition) {
   statements_1
} else {
   statements_2
}

Condition can be any expression that evaluates to true or false. If condition evaluates to true, statements_1 are executed; otherwise, statements_2 are executed. statement_1 and statement_2 can be any statement, including further nested if statements.

You may also compound the statements using else if to have multiple conditions tested in sequence. You should use this construction if you want to select one of many sets of lines to execute.

if (condition_1)
   statement_1
[else if (condition_2)
   statement_2]
...
[else if (condition_n_1)
   statement_n_1]
[else
   statement_n]

Have a look at the example:

 
 <script type="text/javascript">

function checkNumber () {
var n = prompt("Enter a number", "5");
var entered = "You entered a number between"; 

if (n >= 1 && n < 10)                   
  {alert(entered + " 0 and 10")}
else if (n >= 10 && n < 20)
  {alert(entered + " 9 and 20")}
else if (n >= 20 && n < 30)
  {alert(entered + " 19 and 30")}
else if (n >= 30 && n < 40)
  {alert(entered + " 29 and 40")}
else if (n >= 40 && n <= 100)
  {alert(entered + " 39 and 100")}
else if (n < 1 || n > 100)
  {alert("You entered a number less than 1 or greater than 100")}
else
  {alert("You did not enter a number!")}
}

</script> 

Click the button below to see what the script in the preceding example does:

Switch Statement

Switch statements work the same as if statements. However the difference is that they can check for multiple values. Of course you do the same with multiple if..else statements, but that really doesn’t look good.

A switch statement allows a program to evaluate an expression and attempt to match the expression’s value to a case label. If a match is found, the program executes the associated statement. The syntax for the switch statement as follows:

switch (expression) {
   case label_1:
      statements_1
      [break;]
   case label_2:
      statements_2
      [break;]
   ...
   default:
     statements_n
     [break;]
}

The program first looks for a case clause with a label matching the value of expression and then transfers control to that clause, executing the associated statements. If no matching label is found, the program looks for the optional default clause, and if found, transfers control to that clause, executing the associated statements. If no default clause is found, the program continues execution at the statement following the end of switch. Use break to prevent the code from running into the next case automatically.

Let’s consider an example:

 
 <script type="text/javascript">

function flowerPrice () {
var flower = prompt("What flower do you like", "rose"); 

switch (flower)
{
  case "rose" : 
     alert(flower + " costs $2.50");
     break;
  case "daisy" : 
     alert(flower + " costs $1.25");
     break;
  case "orchild" : 
     alert(flower + " costs $1.50");
     break;
  default : 
     alert("There is no such flower in our shop");
     break;
}
}
</script> 

Click the button below to see what the script in the preceding example does: