Now lets see Loops and conditions in JavaScript

…

IF:

Syntax:

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

Example:

let x = 5; 
if(x>4){
    document.write(x)
  }

ELSE:

Syntax:

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

Example:

let x = 5; 
if(x>4){
    document.write(x)
  } else{
document.write("No");
}

ELSE IF:

Syntax:

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
}

Example:

let x = 2; 
if(x>4){
    document.write(x)
  } else if (x>1){
document.write("No");
} else{
document.write("maybe")
}

Switch Case:

Syntax:

switch (expression) {
   case condition 1: statement(s)
   break;

   case condition 2: statement(s)
   break;
   ...

   case condition n: statement(s)
   break;

   default: statement(s)
}

Example:
let a =1
let b= 4
switch (a+b){
case 2: document.write("2")
document.write("2 test")
break;
case 4: document.write("4")
document.write("4 test")
break; 
case 5: 
document.write("5")
document.write("5 test")
break;  
default: document.write("invalid")
}

While Do:

Syntax:

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

Example:

let a=5
while (a>0){
document.write(a+"W")
a--
 }

Do While:

Syntax:

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

Example:

let a=5
do {
document.write(a+"W")
a--
}  while (a>10)

For Loop:

Syntax:

for (initialization; test condition; iteration statement) {
   Statement(s) to be executed if test condition is true
}

Example:

for(i=5; i>0;--i){
document.write(i)
}

For..in (Iterating through object with enumerable properties) :

This should be used only with objects that have elements stored as key value pairs, else if used with normal arrays, the index of the elements will be printed instead

Syntax:

for (variablename in object) {
   statement or block to execute
}

Example:

var test= {a: 1, b: 2, c: 3}; 
var test2= [10,11,15]

for (a in test) {
    document.write(a+"<br />"); 
// will print the key value of the elemnt (output is abc)
}

 for (a in test2) {
    document.write(a+"<br />"); // will print 0,1,2 (index value)
}

For..of (Iterating through object) :

Syntax:

for (variablename of array) {
   statement or block to execute
} 

Example:

var test2= [10,11,15]
 for (a of test2) {
     document.write(a+"
"); // will print 10,11,15 (actual value)
 }

Loop Control:

Continue, Break and label:

Continue:

1. Continue keyword skips all the remaining code and navigates to next iteration
2. Continue can be used only inside iterative blocks eg for, while , do..while , and for in, it cannot be used in switch and normal code block

In below code , document.write will be executed only if a!=1 , if a==1 , then the remaining code is skipped and the for loop goes to the next iteration.

Example:

let test=[1,2,3,4,6];

for (a in test) {

if(a==1){
  continue;
 }
document.write(a+"<br />"); // <br /> indicates next line
 }

Break:

1. Break is used to skip remaining code and iterations
2. Once break is encountered, the code exists from the loop and continues with the outer code

The below code prints only 1 and 2, and on encountering 3, it exists from the loop and prints ‘exited’

Example:

let test=[1,2,3,4,6];

for (a in test) {

if(a==3){
  break;
 }
document.write(a+"<br />"); // <br /> indicates next line
 }
 document.write("exited");

Label:

• Javascript allows controlling the continue and break code flow using labels
• labels are used to identify loops or block and correctly specify which loop to break or continue
• Any non reserved keyword could be used as label

In below code the inner loop is exited on getting a=3 and outer loop is broke when b=”c”

Here, we have labeled inner loop as inner and outer as outer.

Example:

let test=[1,2,3,4,6];
 let test2=["a","b","c","d","e"];
 outer:
 for (b of test2){
 inner:
 for (a of test) { 
 if(a==3){
   break inner;
  }
  if(b=="c"){
   break outer;
  } 
 document.write(a+ "<br />"); //  indicates next line
  }
  document.write(b+ "<br />"); //  indicates next line 
 }
  document.write("exited");

You can use continue the same way to tell the loop to skip remaining lines and goto next iteration of the specified loop.

Example:

let test=[1,2,3,4,6];
  let test2=["a","b","c","d","e"];
  outer:
  for (b of test2){
   document.write(b+  "<br />"); //  indicates next line  
  inner:
  for (a of test) { 
 if(a==3){
    continue outer;
   }
   if(b=="c"){
    break outer;
   } 
  document.write(a+ "<br />"); //  indicates next line 
   }
 }
   document.write("exited");

Label could also be used with block

here we labeled the block ( code between { }) as foo, and in the second line we are existing this block so the third line within the block will not get executed.

foo: {
 document.write('face'+"<br />");
  break foo;
  document.write('this will not be executed');
}
document.write('swap');