JavaScript Control Structures (Loops and Branches).

JavaScript supports the following forms of if..else statement −

  • if statement
  • if…else statement
  • if…else if… statement.

if statement

The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally.

Syntax

The syntax for a basic if statement is as follows −

if (expression){
   Statement(s) to be executed if expression is true
}

if…else statement:

The ‘if…else’ statement is the next form of control statement that allows JavaScript to execute statements in a more controlled way.

Syntax

if (expression){
   Statement(s) to be executed if expression is true
}

else{
   Statement(s) to be executed if expression is false
}
Here JavaScript expression is evaluated. If the resulting value is true, 
the given statement(s) in the ‘if’ block, are executed. If the expression is false, 
then the given statement(s) in the else block are executed.


if...else if... statement
The if...else if... statement is an advanced form of if…else that allows 
JavaScript to make a correct decision out of several conditions.

Syntax

The syntax of an if-else-if statement is as follows −

if (expression 1){
   Statement(s) to be executed if expression 1 is true
}

else if (expression 2){
   Statement(s) to be executed if expression 2 is true
}

else if (expression 3){
   Statement(s) to be executed if expression 3 is true
}

else{
   Statement(s) to be executed if no expression is true
}
There is nothing special about this code. It is just a series of if statements, 
where each ifis a part of the else clause of the previous statement. Statement(s) 
are executed based on the true condition, if none of the conditions is true, then the else block is executed.

JavaScript – Switch Case

You can use multiple if...else…if statements, as in the previous chapter, to perform a multiway branch. However, 
this is not always the best solution, especially when all of the branches depend on the value of a single variable.

Starting with JavaScript 1.2, you can use a switch statement which handles exactly this situation, and it does so 
more efficiently than repeated if...else if statements.


Syntax

The objective of a switch statement is to give an expression to evaluate and several different statements to execute 
based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. 
If nothing matches, 
a default condition will be used.

switch (expression)
{
   case condition 1: statement(s)
   break;
   
   case condition 2: statement(s)
   break;
   ...
   
   case condition n: statement(s)
   break;
   
   default: statement(s)
}

The break statements indicate the end of a particular case. If they were omitted, the interpreter would continue executing 
each statement in each of the following cases.

JavaScript – While Loops

While writing a program, you may encounter a situation where you need to perform an action over and over again. In such situations, 
you would need to write loop statements to reduce the number of lines.
JavaScript supports all the necessary loops to ease down the pressure of programming.

The while Loop

The most basic loop in JavaScript is the while loop which would be discussed in this chapter. 
The purpose of a while loop is to execute a statement or code block repeatedly as long as an expression is true. 
Once the expression becomes false, the loop terminates.

Syntax

The syntax of while loop in JavaScript is as follows −

while (expression){

Statement(s) to be executed if expression is true
}

Example

Try the following example to implement while loop.

<html>
   <body>
      
      <script type="text/javascript">
         <!--
            var count = 0;
            document.write("Starting Loop ");
         
            while (count < 10){
               document.write("Current Count : " + count + "<br />");
               count++;
            }
         
            document.write("Loop stopped!");
         //-->
      </script>
      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

Leave a Reply