Yogesh Chauhan's Blog

# Quick Introduction to 11 Array Iteration Methods in JavaScript

in JavaScript on December 23, 2020

## 1. Array.forEach()

The forEach() method executes a provided function once for each array element.

``````
var numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => console.log(number));

// output

1
2
3
4
5
``````

## 2. Array.map()

The map() method creates a new array by performing a function on each array element.

It does not execute the function for array elements without values and it does not change the original array.

``````
var numbers = [1, 2, 3, 4, 5];

// pass a function to map
const map1 = numbers.map(x => x * 2);

//print original array
console.log(numbers);

//print newly created const
console.log(map1);

//output

[ 1, 2, 3, 4, 5 ]
[ 2, 4, 6, 8, 10 ]``````

## 3. Array.filter()

The filter() method creates a new array with array elements that passes a test.

``````
var numbers = [1, 2, 3, 4, 5];

// pass a function to filter
const result = numbers.filter(number => number > 3);

//print original array
console.log(numbers);

//print newly created const
console.log(result);

//output

[ 1, 2, 3, 4, 5 ]
[ 4, 5 ]``````

## 4. Array.reduce()

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value.

The reduce() method works from left-to-right in the array and it does not reduce the original array.

``````
var numbers = [1, 2, 3, 4, 5];

const reducer = (sum, number) => sum + number;

//print original array
console.log(numbers);

// print total using the reduce function
console.log(numbers.reduce(reducer));

//output

[ 1, 2, 3, 4, 5 ]
15``````

We can create the same function multiplying the numbers:

``````
var numbers = [1, 2, 3, 4, 5];

const reducer = (sum, number) => sum * number;

//print original array
console.log(numbers);

// print total using the reduce function
console.log(numbers.reduce(reducer));

// output

[ 1, 2, 3, 4, 5 ]
120``````

We can also pass initial value to the function.

``````
var numbers = [1, 2, 3, 4, 5];

const reducer = (sum, number) => sum + number;

//print original array
console.log(numbers);

// print total using the reduce function
console.log(numbers.reduce(reducer, 100));

//output

[ 1, 2, 3, 4, 5 ]
115``````

## 5. Array.reduceRight()

The reduceRight() method runs a function on each array element to produce (reduce it to) a single value.

The reduceRight() works from right-to-left in the array and it does not reduce the original array.

``````
var numbers = [1, 2, 3, 4, 5];

const reducer = (sum, number) => sum + number;

//print original array
console.log(numbers);

// print total using the reduce reduceRight
console.log(numbers.reduceRight(reducer, 100));

//output

[ 1, 2, 3, 4, 5 ]
115``````

## 6. Array.every()

The every() method check if all array values pass a test.

``````
var numbers = [1, 2, 3, 4, 5];

const e = (number) => number < 4;

console.log(numbers.every(e));

//false``````

If we check for less than 6:

``````
var numbers = [1, 2, 3, 4, 5];

const e = (number) => number < 6;

console.log(numbers.every(e));

// true``````

## 7. Array.some()

The some() method check if some array values pass a test.

``````
var numbers = [1, 2, 3, 4, 5];

const e = (number) => number < 1;

console.log(numbers.some(e));

// false``````

If we check for less than 2:

``````
var numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => console.log(number));

// output

1
2
3
4
5``````

## 8. Array.indexOf()

The indexOf() method searches an array for an element value and returns its position. The first item has position 0, the second item has position 1, and so on.

``````
var numbers = [1, 2, 3, 4, 5];

console.log(numbers.indexOf(1));

console.log(numbers.indexOf(5));

// output
0
4``````

## 9. Array.lastIndexOf()

Array.lastIndexOf() returns the position of the last occurrence of the specified element.

``````
var numbers = [1, 2, 3, 4, 5, 1, 5];

console.log(numbers.indexOf(1));

console.log(numbers.lastIndexOf(1));

console.log(numbers.indexOf(5));

console.log(numbers.lastIndexOf(5));

// output

0
5
4
6``````

## 10. Array.find()

The find() method returns the value of the first array element that passes a test function.

``````
var numbers = [1, 2, 3, 4, 5, 1, 5];

const result = numbers.find(number => number > 1);

console.log(result);

// 2``````

## 11. Array.findIndex()

The findIndex() method returns the index of the first array element that passes a test function.

``````
var numbers = [1, 2, 3, 4, 5, 1, 5];

const result = numbers.findIndex(number => number > 1);

console.log(result);

// 1``````