When we have to do the same task again and again with a slight difference in pattern, it’s frustrating…! developers are considered to be one of the laziest community in the world. As a developer no one can dream even to code without loops, it is one of the most important pillars of programming, in any language.

 

So what are loops ???

 

Imagine you have a problem statement where you have to run a group of statement continuously until a particular condition is met. Now imagine doing this task without loops.

 

Uff isn’t that nearly impossible, and so it is important to know, understand and effectively use loops while coding.

 

Loops in Javascript

 

In general coding practices, we have multiple different types of loops available which serves the same purpose that is repeating the same task for multiple numbers of times.

 

Also, it is important to remember that the number of repetition could be zero if there is no condition met.

 

And these different looping statement provides us different ways to find a start point and endpoints. The different looping statement available are

 

  • For
  • Do while
  • while
  • Labeled
  • Continue
  • Break
  • For in
  • For of

 

For LOop: for loop keep executing the given statement until the conditional expression met to false.

 

for ([initialExpression]; [condition]; [incrementExpression]) {

Statement

Statement

    ..

}

 

  • The initial expression executes only once at the start of the loop and is optional. Also, it is generally used for loop counters. You can declare the counters here itself and give them a block scope. Also, the syntax for initial expression allows any degree of complexity.

 

  • The conditional expression is executed every time the loop runs and if it evaluates to true then the statement inside the loop gets executed else the loop terminates. Also if the conditional expression is not there then it is considered as true by default. Here is a crazy example to create an infinite loop is

 

for (i = 0; ; i++) {

console.log(i);

}

 

  • Increment/decrement expression executes once the statement inside the loops gets executed and updates its value.
  • Statements inside the loop execute only when the conditional expression returns true as mentioned above.

 

[Read: React-Router: Let’s unwind another mystery in React]

 

Do while LoOp: Do while loop executes the statement at least once no matter what and keep executing the statements until the while expression is set to false.

do{

statement1

statement2

  ...

}while(expression)

 

If the condition returns true then the loop continues to run and executes the statements.

 

let i = 0;

do {

console.log(i);

i++;

} while (i < 0);

 

Here in the example, the expression will return false but still the statement will be executed for the very first time.

 

While LoOP: While loop is very similar to do while. Except for the one thing, that the statements inside the loop only get executed once the conditional expression returns true.

 

while(expression){

statement1

statement2

  ...

}

 

The example mentioned here is similar to the example mentioned in do-while. But here output will be different since the condition returns false in the first place so the statements inside the loop will not be executed even once.

 

let i = 0;

while (i < 0) {

console.log(i);

}

 

Labeled statements: Labeled statement are used for any loop and later can be identified anywhere in your program.

 

label :

for(initial expression ; condition expression; increment expression){

statement 1

statement 2

  ...

}

 

Here labels can be any Javascript identifier and not any reserved words.we can also use a break and continue statements inside the loops to break or continue the execution of the loop.

 

Continue statements: continue is a statement and not a loop but widely used to control the execution of loops. It can be used inside any for, while or do-while loops.

 

I have taken a very interesting example to explain the working of continue from MDN official site as given below.

 

var i = 0;

var n = 0;

while (i < 5) {

i++;

if (i == 3) {

continue;

}

n += i;

console.log(n);

}

 

Here the output obtained is 1,3,7,12.

 

When continue statement gets executed it skips the rest of statements to be executed in the inner loop and jumps back to the main loop and then continue the next iteration.

 

So here in the example where i = 3 the control skips the next console statement and continues with next iteration.

 

Same code without continue statement gives the following output.

 

var i = 0;

var n = 0;

while (i < 5) {

i++;

if (i == 3) {

// continue;

}

n += i;

console.log(n);

}

Output:

1,3,6,10,15

 

[Read: NodeJs Framework: What’s new in web frameworks in 2019]

 

Break statement: Break statement is used to break the loop, switch or any labeled loops. Once the break statement executes the rest of the code inclosed inside the loop will be skipped.

 

for (var i = 0; i < 15; i++) {

if (i == 7) {

break;

} else {

console.log(i);

}

}

 

Here once ” i ” value becomes 7, the loop directly terminates and continues to execute the code followed by for loop. And the output obtained here is  0,1,2,3,4,5,6.

 

For…in LoOps: for…in loops are used for iteration through distinct properties of an object. So for each distinct property, the control executes the given statement.

 

let obj = {

name: "Roshni",

age: 22,

gender: "female",

designation: "Developer"

};


for (let key in obj) {

console.log(`The  value for the Key ${key} is ${obj[key]} `);

}

 

Where the output is

 

The  value for the Key name is Roshni

The  value for the Key age is 22

The  value for the Key gender is female

The  value for the Key designation is Developer

 

For..of LoOp: The for..of loop is used to loop through the property value of an object. The sole difference between for..in and for..of loop is that for…in iterates using properties of an object while the for..of iterates using properties values.

 

let arr = ["Roshni", 22, "female", "Developer"];

for (let key of arr) {

console.log(key);

}

 

Output is

 

Roshni

22

female

Developer

 

Here the iteration is on the values instead of indexes The difference between for..in and for..of  can be seen with the below example where output obtained is indexes of the array instead of values.

 

let arr = ["Roshni", 22, "female", "Developer"];

for (let key in arr) {

console.log(key);

}

 

Where the output obtained is 0,1,2,3.

 

[Read: Video Analytics – Object Extraction by background subtraction and noise filtering]

 

If you’ve any doubts, please let us know!!

Follow Us on Facebook | Twitter | LinkedIn.

Let CronJ assist you..!

Thank You!!!