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``````

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
JavaScript Data Types and Data Structures Things to RememberJavaScriptHow to Make CSS Lists Bullets Smaller?CSSThe Sort and Compare Functions in JavaScriptJavaScriptEffects in ReactReactIs PHP still good for back-end programming?PHPSelector Lists and Combinators in SCSS (Sass)SCSS