JavaScript Array Iteration Methods

JavaScript array iteration methods allow you to process, search, filter, transform, and combine array elements without writing a traditional loop for every operation. These methods make code easier to read and help you work efficiently with collections of data.

For example, you can use forEach() to perform an operation on each element, map() to create a transformed array, filter() to select matching elements, and reduce() to calculate a single result from an array.

In this tutorial, you will learn 11 important JavaScript array iteration methods with practical examples and outputs.

What Are JavaScript Array Iteration Methods?

Array iteration methods are built-in methods that process array elements by applying a callback function. Depending on the method, they can perform an action for each element, create a new array, find a value, check a condition, or calculate a result.

Consider this example:

let numbers = [10, 20, 30, 40];

numbers.forEach(function(number) {
    console.log(number);
});

Output:

10
20
30
40

The forEach() method executes the callback function once for each element in the array.

If you are new to arrays, read JavaScript Arrays to understand how array elements are stored and accessed.

JavaScript forEach() Method

The forEach() method executes a callback function once for each element in an array. It is commonly used when you want to perform an action for every element, such as displaying values or updating the page.

Syntax:

array.forEach(callback);

Example:

let fruits = ["Apple", "Banana", "Mango"];

fruits.forEach(function(fruit) {
    console.log(fruit);
});

Output:

Apple
Banana
Mango

The callback function receives each fruit as its argument.

You can also use an arrow function to write the same code more concisely.

let fruits = ["Apple", "Banana", "Mango"];

fruits.forEach(fruit => console.log(fruit));

Output:

Apple
Banana
Mango

The forEach() method returns undefined. It does not create a new array containing the callback results.

Use forEach() when you want to perform an action for every element rather than transform the array into a new collection.

JavaScript map() Method

The map() method creates a new array by applying a callback function to every element in the original array. Each returned value becomes an element in the new array.

Syntax:

array.map(callback);

Example:

let numbers = [1, 2, 3, 4, 5];

let doubled = numbers.map(function(number) {
    return number * 2;
});

console.log(doubled);

Output:

[2, 4, 6, 8, 10]

The callback multiplies every number by 2. The returned values form the new doubled array.

You can use an arrow function for a shorter implementation.

let numbers = [1, 2, 3, 4, 5];

let squares = numbers.map(number => number * number);

console.log(squares);

Output:

[1, 4, 9, 16, 25]

The original array remains unchanged when the callback does not modify it directly.

Learn more about transforming values in JavaScript Functions.

JavaScript filter() Method

The filter() method creates a new array containing elements that satisfy a condition. The callback should return a truthy value for each element you want to keep.

Syntax:

array.filter(callback);

Example:

let numbers = [10, 15, 20, 25, 30];

let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});

console.log(evenNumbers);

Output:

[10, 20, 30]

The condition number % 2 === 0 checks whether each number is even. Only the numbers that satisfy the condition are included in the new array.

You can also filter strings.

let fruits = ["Apple", "Banana", "Avocado", "Mango"];

let filteredFruits = fruits.filter(fruit => fruit.startsWith("A"));

console.log(filteredFruits);

Output:

["Apple", "Avocado"]

The resulting array contains only the fruits whose names begin with the letter "A".

Use filter() when you need to select particular elements without removing them from the original array.

JavaScript find() Method

The find() method returns the first element that satisfies a specified condition. If no element matches, it returns undefined.

Syntax:

array.find(callback);

Example:

let numbers = [5, 12, 18, 25, 30];

let result = numbers.find(number => number > 15);

console.log(result);

Output:

18

The first number greater than 15 is 18. The method stops searching once it finds a matching element.

Here is another example using objects.

let students = [
    { name: "Arun", marks: 75 },
    { name: "Priya", marks: 92 },
    { name: "Rahul", marks: 85 }
];

let student = students.find(student => student.marks > 90);

console.log(student);

Output:

{ name: "Priya", marks: 92 }

The method returns the first student whose marks are greater than 90.

JavaScript findIndex() Method

The findIndex() method returns the index of the first element that satisfies a condition. If no element matches, it returns -1.

Syntax:

array.findIndex(callback);

Example:

let numbers = [10, 20, 30, 40, 50];

let index = numbers.findIndex(number => number > 25);

console.log(index);

Output:

2

The first number greater than 25 is 30, which is located at index 2.

The difference between find() and findIndex() is that find() returns the matching element, while findIndex() returns its index.

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.find(fruit => fruit.startsWith("B")));
console.log(fruits.findIndex(fruit => fruit.startsWith("B")));

Output:

Banana
1

JavaScript some() Method

The some() method checks whether at least one element in an array satisfies a specified condition. It returns true if a matching element exists; otherwise, it returns false.

Syntax:

array.some(callback);

Example:

let numbers = [3, 7, 11, 18, 21];

let result = numbers.some(number => number > 15);

console.log(result);

Output:

true

The array contains 18 and 21, which are greater than 15. Therefore, the result is true.

Consider an example with product prices.

let prices = [100, 250, 400, 150];

let expensiveProduct = prices.some(price => price > 300);

console.log(expensiveProduct);

Output:

true

At least one price is greater than 300, so the condition is satisfied.

JavaScript every() Method

The every() method checks whether all elements in an array satisfy a specified condition. It returns true only when every element passes the test.

Syntax:

array.every(callback);

Example:

let numbers = [10, 20, 30, 40];

let result = numbers.every(number => number > 5);

console.log(result);

Output:

true

Every number in the array is greater than 5, so the method returns true.

Now consider an array containing a value that fails the condition.

let marks = [75, 85, 45, 90];

let passed = marks.every(mark => mark >= 50);

console.log(passed);

Output:

false

The value 45 is below 50, so not every element satisfies the condition.

The difference between some() and every() is that some() checks whether at least one element passes, while every() checks whether all elements pass.

JavaScript reduce() Method

The reduce() method processes array elements and combines them into a single accumulated result. It is often used to calculate totals, products, counts, or grouped values.

Syntax:

array.reduce(callback, initialValue);

The callback receives an accumulator and the current element. The accumulator stores the result of the previous callback execution.

Example: Calculating the Sum

let numbers = [10, 20, 30, 40];

let total = numbers.reduce(function(sum, number) {
    return sum + number;
}, 0);

console.log(total);

Output:

100

The initial accumulator value is 0. Each number is added to the accumulated total.

The calculation is:

• 0 + 10 = 10
• 10 + 20 = 30
• 30 + 30 = 60
• 60 + 40 = 100

You can write the same example using an arrow function.

let numbers = [10, 20, 30, 40];

let total = numbers.reduce((sum, number) => sum + number, 0);

console.log(total);

Output:

100

Example: Calculating the Product

let numbers = [2, 3, 4];

let product = numbers.reduce((result, number) => result * number, 1);

console.log(product);

Output:

24

The method multiplies the values together to produce 24.

Providing an initial value is generally a good practice because it makes the intended starting value explicit and also handles empty arrays safely.

JavaScript reduceRight() Method

The reduceRight() method works like reduce(), but processes array elements from right to left.

Syntax:

array.reduceRight(callback, initialValue);

Example:

let words = ["JavaScript", "is", "fun"];

let result = words.reduceRight((text, word) => text + " " + word);

console.log(result);

Output:

fun is JavaScript

The method begins with the rightmost element and continues toward the left.

For this example, the first accumulator value is "fun". The next callback combines it with "is", and the final callback combines the result with "JavaScript".

You can also use reduceRight() with an initial value.

let numbers = [1, 2, 3];

let result = numbers.reduceRight((text, number) => text + number, "");

console.log(result);

Output:

321

The values are processed from right to left, producing the string "321".

JavaScript flat() Method

The flat() method creates a new array by flattening nested arrays to a specified depth. By default, it flattens one level.

Syntax:

array.flat(depth);

Example:

let numbers = [1, 2, [3, 4], [5, 6]];

let result = numbers.flat();

console.log(result);

Output:

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

The nested arrays are flattened by one level, and the result is a new array.

For a deeper understanding of arrays inside other arrays, read JavaScript Array Length and Nested Arrays.

Flattening Multiple Levels

You can specify a depth to flatten more than one level.

let numbers = [1, [2, [3, [4]]]];

console.log(numbers.flat());
console.log(numbers.flat(2));
console.log(numbers.flat(Infinity));

Output:

[1, 2, [3, [4]]]
[1, 2, 3, [4]]
[1, 2, 3, 4]

• flat() flattens one level.
• flat(2) flattens two levels.
• flat(Infinity) flattens all nested array levels.

The original array is not modified.

JavaScript flatMap() Method

The flatMap() method first applies a mapping function to each element and then flattens the resulting array by one level. It combines the behavior of map() and flat(1).

Syntax:

array.flatMap(callback);

Example:

let numbers = [1, 2, 3];

let result = numbers.flatMap(number => [number, number * 2]);

console.log(result);

Output:

[1, 2, 2, 4, 3, 6]

For each number, the callback returns an array containing the original number and its doubled value. flatMap() combines these results into a single array.

For comparison, the same operation using map() produces nested arrays.

let numbers = [1, 2, 3];

console.log(numbers.map(number => [number, number * 2]));

Output:

[[1, 2], [2, 4], [3, 6]]

The difference is that map() preserves the nested arrays, while flatMap() flattens the result by one level.

Example: Splitting Words into Letters

let words = ["cat", "dog"];

let letters = words.flatMap(word => word.split(""));

console.log(letters);

Output:

["c", "a", "t", "d", "o", "g"]

The split("") method converts each word into an array of characters. The flatMap() method then combines those arrays into one array.

JavaScript Array Iteration Methods Comparison

The following table summarizes the main purpose and return value of each method.

Method	Purpose	Return value
forEach()	Performs an action for each element	undefined
map()	Transforms every element	New array
filter()	Selects matching elements	New array
find()	Finds the first matching element	Element or undefined
findIndex()	Finds the first matching index	Index or -1
some()	Checks whether at least one element matches	Boolean
every()	Checks whether all elements match	Boolean
reduce()	Combines elements from left to right	Accumulated result
reduceRight()	Combines elements from right to left	Accumulated result
flat()	Flattens nested arrays	New array
flatMap()	Maps elements and flattens one level	New array

Which Array Iteration Method Should You Use?

Choose the method based on the task you want to perform.

• Use forEach() when you want to perform an action for every element.
• Use map() when you want to transform each element into a new value.
• Use filter() when you want to select elements that satisfy a condition.
• Use find() when you need the first matching element.
• Use findIndex() when you need the position of the first matching element.
• Use some() when you want to check whether at least one element matches.
• Use every() when you want to verify that all elements match.
• Use reduce() when you want to calculate a single accumulated result.
• Use reduceRight() when the reduction needs to proceed from right to left.
• Use flat() when you want to flatten nested arrays.
• Use flatMap() when you want to transform elements and flatten the results by one level.

These methods accept callback functions, so understanding JavaScript Callback Functions will help you use them effectively. You can also explore JavaScript Higher-Order Functions to understand why methods such as map() and filter() accept functions as arguments.

Frequently Asked Questions

What is the difference between forEach() and map()?

forEach() executes a callback for every element and returns undefined. map() executes a callback for every element and returns a new array containing the callback results.

What is the difference between map() and filter()?

map() transforms every element into a new value. filter() creates a new array containing only the elements that satisfy a condition.

What is the difference between find() and findIndex()?

find() returns the first matching element, while findIndex() returns the index of the first matching element. If no match exists, they return undefined and -1, respectively.

What is the difference between some() and every()?

some() returns true when at least one element satisfies the condition. every() returns true only when all elements satisfy the condition.

What is the difference between reduce() and reduceRight()?

reduce() processes elements from left to right, while reduceRight() processes them from right to left.

Does flat() modify the original array?

No. The flat() method returns a new array containing the flattened elements.

What is the difference between flat() and flatMap()?

flat() flattens nested arrays to a specified depth. flatMap() first maps each element and then flattens the resulting array by one level.

Do array iteration methods change the original array?

Methods such as map(), filter(), flat(), and flatMap() return new arrays. However, callbacks can still modify the original array or its objects if they explicitly do so. forEach() also allows side effects through its callback.