Different type of JavaScript loops.

What is Loop?

Loops are among the most basic and powerful of programming concepts. A loop in a computer program is an instruction that repeats until a specified condition is reached.

There is numerous way we can loop our javaScript array. But most commonly we use these four loops.

• for
• forEach
• for/in
• for/of

These are the 4 primary loops. In this article, I will explain about each loop and where we use what loop.

Syntactic Overview.

for and for/in loops give you access index in the array, not the value.

Below example, It explains how access element of the array using for and for/in.

const arr = ['a', 'b','c'];
//for and for/in
for(let i =0; i<arr.length; ++i){
 console.log('using for loop is', arr[i])
}
for(let i in arr){
 console.log("using fot/in", arr[i]);
}

With for and for/in we need to print out arr[i].

Other two constructs ‘forEach’ and ‘for/of’ give us to access the element itself.

‘forEach’ we can access the index of the array. But ‘for/of’ we could not.

arr.forEach((v,i)=> console.log('using forEach', v));
for(const v of arr){
 console.log('using for/of', v)
}

Non-Numeric properties.

JavaScript arrays are objects. That means you can add string properties to your array, not just numbers.

const arr = ['a', 'b', 'c'];
console.log('arr typeof', typeof arr); //object
//Assign to a non-numeric property
arr.test  = 'bad';
console.log(arr);//[ 'a', 'b', 'c', test: 'bad' ]
arr.test; //bad

3 of 4 looping constructs ignore the non-numeric property. However, for/in will actually print out “bad”

const arr = ['a', 'b', 'c'];
arr.test = 'bad';
//Prints "a, b, c bad"
for(let i in arr){
 console.log('using for/in', arr[i]);
}

This why iterating through the array using ‘for/in’ is generally bad practice. Other three looping constructs are ignoring the non-numeric key.

const arr = ['a', 'b', 'c'];
arr.test = 'bad';
//Prints "a,b,c"
for(let i =0; i < arr.length; ++i){
  console.log('using for', arr[i]);
}
//Prints "a, b,c"
arr.forEach((el,i)=> console.log('forEach is', i , el));
for(const el of arr){
  console.log('using for/of is', el);
}

Avoid using for/in over an array unless you’re certain you mean to iterate over non-numeric keys and inherited keys.

Empty Element

Javascript arrays allow empty elements. The below array is syntactically valid and has length 3:

const arr = ['a',,'c'];
arr.length;// 3
console.log('arr.length is', arr.length);

‘for/in’ and ‘forEach’ skips the empty element, ‘for ’and ‘for/of ’do not.

for(let i=0; i< arr.length; i++){
 console.log('arr is', arr[i]); //"a undefined, c"
}
for(const v of arr){
 console.log('using of is', v); //"a undefined, c"
}
//print "a, c". It skips the empty element.
arr.forEach((v)=> console.log('Using for each',v));
for(let i in arr){
 console.log('Using for in',arr[i]);
}

There’s another way to add an empty element to an array:

// Equivalent to `['a', 'b', 'c',, 'e']`
const arr = ['a', 'b', 'c'];
arr[5] = 'e';

‘forEach’ and ‘for/in’ skip empty elements in the array, ‘for’ and ‘for/of ’do not.

Conclusions

The most preferable one is ‘for/of’ for iterate over an array in JavaScript. It is more concise than a conventional ‘for’ loop and doesn't have as many edge cases as ‘for/in’ and ‘forEach()’. The major downsides of ‘for/of’ is that you need to do extra work to access the index (1), and you can't chain like you can with ‘forEach()’.

To access the current array index in a ‘for/of’ loop, you can use the Array#entries() function.

for (const [i, v] of arr.entries()) {
  console.log(i, v); // Prints "0 a", "1 b", "2 c"
}

Friends, Thank you for reading this blog.

Please give me your valuable comments.

EdisonDevadoss/JavascriptDifferentTypeOfLoops