Different ways of iterating over an Array in Javascript

An array is a collection of similar items or values. Arrays have a lot of built-in methods like

• Mutator Methods:
  These are the methods which modify the original array.
• Accessor methods:
  These are the methods which return a new representation
• Iteration Methods:
  These are the methods which run on every element present in the Array.

Let us discuss Iteration methods in detail.

1. for()

for is used to iterate a set of statements based on a condition for fixed number of times.

Syntax

for(Initialization; Condition; Increment/decrement) {  
//code  
} 

Example

console.log('simple for loop');
for(let i=1;i<=10;i++) {
  console.log(i);
  
}

2. while()

while is also used to iterate a set of statements based on a condition. Usually while is preferred when number of iterations is not known in advance.

Syntax

while(condition) {  
//code 
}  

Example

 console.log('simple while loop');
let i=1;
while(i<=10) {
  console.log(i);
  i++;
}

3. do-while()

Do-while is also used to iterate a set of statements based on a condition. It is mostly used when you need to execute the statements atleast once.

Syntax

do {  
//code 
} while(condition); 

Example

 console.log('simple do-while loop');
let i=1;
do {
  console.log(i);
  i++;
} while(i<=10);

4. forEach()

forEach method is used to run a function on every element present in an array. This method can only be used on Arrays, Maps and Sets.

You can either use callback functions or Arrow functions in forEach method.

Remember that you can not break, return or continue in forEach method like you do in traditional for loop. If you want to do so, then use exceptions in the call back function.

Syntax

arrayname.forEach(function(err,doc){
    //code
});

Example

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
const squaresOfEvenNumbers = [];

numbers.forEach(function(ele){
  if(ele % 2 == 0)
    squaresOfEvenNumbers.push(ele*ele)
});

console.log(squaresOfEvenNumbers);

5. map()

This method is used to create a new array by running a function on every element of an array.

Syntax

arrayName.map(function(err,doc)){
//code
});
// Arrow function can also be used in place of callback function

6. filter()

This method is used to create a new array by running a function on every element of an array based on a criteria .

Syntax

arrayName.filter(function(err,doc)){
//code
});
// Arrow function can also be used in place of callback function

7. reduce()

This method is used to produce a single value by running a function on every element of an array.

Syntax

arrayName.reduce(function(err,doc)){
//code
});
// Arrow function can also be used in place of callback function

Note

reduceRight is same as reduce but in reverse order from last to first.

Example

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

const squaresOfEvenNumbers = numbers
.filter(ele => ele % 2 == 0)
.map(ele => ele ** 2)
.reduce((acc, ele) => acc + ele);

console.log(squaresOfEvenNumbers);