Javascript Loops

In this chapter we will learn about Loop.

There are some situations, when you want to do a block of code not one time. Loops are handy to run a block of code for more time, with different value. Let's look at the following example.

var towns = ['New York', 'Yerevan', 'Paris', 'London', 'Gyumri'];

var townList = '';
townList += towns[0] + '<br/>';
townList += towns[1] + '<br/>';
townList += towns[2] + '<br/>';
townList += towns[3] + '<br/>';
townList += towns[4] + '<br/>';

What can you say about that? Is it good, boring and heavy code? I think you agree with me. This is not good style coding. But what to do? How to make it when my arrays length is more than 1000?. Loops are for that. We can do that with 3 lines code using loops, event when the size of array is more than 1000. Let's see how we can do that.

var towns = ['New York', 'Yerevan', 'Paris', 'London', 'Gyumri'];

var townList = '';
for (var i = 0; i < towns.length; i++){
    townList += towns[i] + '<br/>';
}

Looks good, yes? There are 4 types of loop in Javascript.

For

As every programming language, Javascript has For loop to run a block of code more that one time. The For loop syntax is.

for (statement 1, statement 2, statement 3) {
	// code for executing
}

  • statement 1 is the side, where executes a code before starting loop.
  • statement 2 is the condition of For loop.
  • statement 3 is the side, where executes a code every time in loop. In every iteration (Every cycle in loops called Iteration)

Let's make an example of For loop.

var peoples = [{name: 'Eva',age: 25},{name: 'Noy',age: 42},{name: 'Ani',age: 18},{name: 'Hayk',age: 25}]

var avgAge = 0;

for (var iter = 0; iter < peoples.length; iter++){
	avgAge += peoples[iter].age;
}

avgAge = avgAge / peoples.length; // avg age is 27.5

In syntax of loop For no-one statement is required. You can use loop For as in this example.

...
...
for (; i < len; i++){
    // code
}
...
...

For/In

The For loop has another syntax called For/In. Here is it.

for (key in array/object){
    // code
}

Let's make an example

var peoples = [{name: 'Ani', age: 25},{name: 'Mike', age: 19},{name: 'David',age: 16}];

var avgAge = 0;

for(var p in peoples){
    avgAge += peoples[p].age;
}

avgAge = avgAge / peoples.length // will be 20

Foreach

In javascript there is one loop called Foreach, which is more OOP style syntax. This is good and modern style. Javascript frameworks use this style or define new foreach loop (as function). Its syntax is.

arr.foreach(callback); // callback is function

callback function(value, key, array){
	// code ....
}

Let's make an example.

var peoples = [{name: 'Eva',age: 25},{name: 'Noy',age: 42},{name: 'Ani',age: 18},{name: 'Hayk',age: 25}]

var avgAge = 0;

peoples.foreach(function(value, key, array)){
	avgAge += value.age;
}

avgAge = avgAge / peoples.length; // avg age is 27.5

While

This loop has about every programming language. Sometimes it's preferred to use cycle while instead of for or foreach. Here is its syntax.

while(condition){
    // code...
}

This code will do until the condition is true. Condition can be static value and dynamic value. As it can be connected to loop iteration or not. For example if the condition is true and is not connected to loop iteration, the cycle will do forever. It's like that in for, while, do while

Let's make an example.

var arr = [12, 17.5, 69, 112, -12, 10, -6];
var sum = 0;
var i = 0;

while (arr[i] > 0){
    sum += arr[i];
    i++;
}

// sum will be 210.5, because the cycle goes on until the current element in array is more than 0

Do While

Now let's talk a little about another loop called Do/While. The difference between while and do while is the realisation. Do while syntax loop often makes first iteration, because the checking out condition is after executing the code.

Here is the syntax of Do While.

do {

    // code...

}
while(condition)

Let's make an example to see how Do While works.

var i = 0;
var test = '';

do {
    test = '1th iteration';
    i++;
}
while(i < 0)

// test will be '1th iteration'