Looping in JavaScript

Looping in JavaScript

Looping is one of the important features of programming languages, as we know it and we are seeing it from "C", where many programming languages implemented same syntax in their languages  and the same happened with javascript. At present we care about javascript. Now, lets see how looping evolved in javascript.

Traditional way:

1.Normal Iteration

var i, n = 5;
for (i = 0; i <= n; i++) {
    console.log(i);
}
// 0
// 1
// 2
// 3


2.List or Array Iteration

var i, arr = [], n = 3;
for (i = 0; i <= n; i++) {
    arr[i] = i;
    console.log(arr[i]);
}
// 0
// 1
// 2
// 3
//In ECMAScript3 we have Array.prototype.push()
for (i = 0; i <= n; i++) {
    arr.push(i);
    console.log(arr[i]);
}
// 0
// 1
// 2
// 3

we know this way, it has initialization, Condition and Incrementation. It has some overhead on developers. The above code can't iterate through objects.

There is a another version of for in javascript, which can iterate through Arrays and Objects.

For...in way:

1.Object iteration

var obj = {
'a' : 1,
'b' : 2,
'c' : 3,
};
for (item in obj) {
console.log(obj[item]);
}
// 1
// 2
// 3


2. Array Iteration

var item,arr = ['How', 'are', 'You'];
for (item in arr) {
    console.log(item);
    console.log(arr[item]);
}
// How
// are
// You

Note: for..in should not be used to iterate over an Array where index order is important.

var item,arr = ['How', 'are', 'You'];
arr.foo = “bar”;
for (item in arr) {
    console.log(item);
    console.log(arr[item]);
}
// 0
// How
// 1
// are
// 2
// You
// foo
// bar

There is no guarantee that “for...in“ will return the indexes in any particular order and it will return all enumerable properties, including those with non–integer names and those that are inherited.


In ECMAScript 5, New functions have been Introducted for Looping through Array.
1. Array.prototype.forEach
2. Array.prototype.every
3. Array.prototype.some
4. Array.prototype.map

forEach Way: Array.prototype.forEach(callback,thisArg)

 var arr = ['How', 'are', 'You'];
arr.forEach(function (val, index, arr_obj) {
    console.log(index);
    console.log(val);
    console.log(arr_obj);
});

// How
// 0
// ["How", "are", "You"]
// are
// 1
// ["How", "are", "You"]
// You
// 2
// ["How", "are", "You"]

The forEach function takes two arguments 1. callback and 2. thisArg
1.callback is function call happens for each iteration of value in Array, it takes 3 arguments
val = value of array processed at each iteration.
Index = index of the current element array processed at each iteration.
arr_obj = is the object of Array that called forEach function (ex:arr)

2.thisArg is optional, when passed it acts as “this” in the function, if not passed “this” act as global Object.

var arr = ['How', 'are', 'You'];
arr.forEach(function (val, index, arr_obj) {
    console.log(index);
    console.log(val);
    console.log(arr_obj);
    console.log(this);
},['i','am','fine']);

// How
// 0
// ["How", "are", "You"]
// ['i','am','fine']
// are
// 1
// ["How", "are", "You"]
// ['i','am','fine']
// You
// 2
// ["How", "are", "You"]
// ['i','am','fine']

Note: Problem with Array.prototype.forEach, there is no way of stoping or breaking the loop. There comes  Array.prototype.every,  Array.prototype.some.

Using Array.prototype.forEach for Iterating Object :

var obj = { 'a':1, 'b':2, 'c':3 },
arr = Object.keys(obj); // return Array of Keys ['a', 'b', 'c']
arr.forEach(function (val, index, arr_obj) {
    console.log(val);
    console.log(index);
    console.log(arr_obj);
    console.log(this);
},obj);
// a
// 0
// ['a', 'b', 'c']
// { 'a':1, 'b':2, 'c':3 }
// b
// 1
// ['a', 'b', 'c']
// { 'a':1, 'b':2, 'c':3 }
// c
// 1
// ['a', 'b', 'c']
// { 'a':1, 'b':2, 'c':3 }

Every way: Array.prototype.every(callback,thisArg)

The “every” method Checks whether each value of array satisfies the condition provided in the callback function.

True State:

 var arr = ['How', 'are', 'You'];
arr.every(function (val, index, arr_obj) {
console.log(val);
return this.indexOf(val) == -1 ? true : false;
},['i','am','fine']);

// How
// are
// You
// true


False State:

 var arr = ['How', 'are', 'You'];
arr.every(function (val, index, arr_obj) {
console.log(val);
return this.indexOf(val) == -1 ? true : false;
},['we','are','fine']);

// How
// are
// false

Some way: Array.prototype.some(callback,thisArg)

The “some” method Checks whether some values of array satisfies the condition provided in the callback function.

True State:

 var arr = ['How', 'are', 'You'];
arr.some(function (val, index, arr_obj) {
    console.log(val);
    return this.indexOf(val) == -1 ? true : false;
},['i','am','fine']);

// How
// true


False State:

 var arr = ['How', 'are', 'You'];
arr.some(function (val, index, arr_obj) {
console.log(val);
return this.indexOf(val) == -1 ? true : false;
},arr);

// How
// are
// You
// false

Map Way: Array.prototype.map(callback,thisArg)

The “map” method returns new array with the results of calling a provided function on every element in this array.

 var arr = ['How', 'are', 'You'];
arr.map(function (val, index, arr_obj) {
return val.toUpperCase();
});
// ["HOW", "ARE", "YOU"]

Therefore, These function provide by ECMAScript Community make our life easier to writer more efficient code.