Introduction

In this article we will look into options provided in JavaScript which can be used for iteration. I personally feel iteration logic should be used carefully, many of times this end-up in a performance issue. If you plan to write loop make sure you add the criteria and check number of times iteration code block is getting executed.

This article assumes you have a basic understanding of coding in JavaScript;

What are loops?

JavaScript loops are repetitive execution a of code block until a certain criteria is matched. Execution of code blocks can be equal to predefined length or till a certain criteria is met.  

Different Types of Loops in JavaScript

for: Looping specific number of times based on item position

for (i = 0; i < 4; i++) {
  console.log("I am at position " + i);
}
Basic for loop in JavaScript

for of: Iteration based specific item in array.

var items = ['Ashwin', 'Shetty', 'blogs'];
var i;

for (i of items) {
  console.log('I am at:' + i);
}
For of Loop in JavaScript

for in: Iteration based on key value (Properties) of object.

var author = {name:"Ashwin", lastName:"Shetty", age:36};

var x;
for (x in author) {
   console.log(author[x]);
}
For in Loop in JavaScript

while: Iteration till specific criteria is met.

while (a < 5) {
  console.log('I am at position' + a);
  a++;
}
While Loop in JavaScript

do while: Iteration till specific criteria is met but criteria is specified separately.

do {
  console.log('I am at position' + a)
  a++;
}
while (a < 10);
do while Loop in JavaScript

For skipping further execution of code block you can use continue. After continue, loop will exit current execution but will continue with next item in iteration. For complete exit of iteration, you can use keyword break.

Looping an Array

Array.filter: Will iterate all the items in array and returns item which are returned true

var authors = [{name:"Ashwin", lastName:"Shetty", age:36},
               {name:"Rohini", lastName:"Shetty", age:36},
               {name:"Arvi", lastName:"Shetty", age:6}];

var kids = authors.filter((i)=>{
  return i.age < 9;
});

console.log(kids);

// Output : [{name:"Arvi", lastName:"Shetty", age:6}]
Array filter in JavaScript

Array.map: Will iterate all the items in array (will ignore null) but will return a new instance.

var authors = [{name:"Ashwin", lastName:"Shetty", age:36},
               {name:"Rohini", lastName:"Shetty", age:36},
               {name:"Arvi", lastName:"Shetty", age:6}];

var firstLastNames = authors.map((i)=>{
  return i.name + ', ' + i.lastName; 
})

console.log(firstLastNames);

//output :  ["Ashwin, Shetty", "Rohini, Shetty", "Arvi, Shetty"];
Array map in JavaScript

Array.reduce: Will iterate all the items in array, but will pass previous value to current execution block. For example if the output of previous execution is 10, 10 will be passed to next execution block. Please note output of array.reduce will be a single item.

var authors = [{name:"Ashwin", lastName:"Shetty", age:36},
               {name:"Rohini", lastName:"Shetty", age:36},
               {name:"Arvi", lastName:"Shetty", age:6}];

var totalAgeOfFamily = authors.reduce((previousValue, i)=>{
 return previousValue + i.age;
},0);

console.log(totalAgeOfFamily);

//output: 78 (36 + 36 + 6)
Array Reduce in JavaScript

Array.forEach: Will iterate all the items in array.

var authors = [{name:"Ashwin", lastName:"Shetty", age:36},
               {name:"Rohini", lastName:"Shetty", age:36},
               {name:"Arvi", lastName:"Shetty", age:6}];

authors.forEach((i)=>{
  console.log(i.age);
});

//output : 36
//         36
//          6
Array foreach in JavaScript

Conclusion

In this article I have tried to cover few looping logic which comes handy while writing JavaScript code. I hope this helps you. Please feel free to share any feedback at connect@shettyashwin.com.