Array iteration in JavaScript involves processing each element of an array, typically to perform some operation on each element, collect values, or compute aggregates. JavaScript provides several methods to facilitate array iteration. Here’s a detailed explanation of these methods:
1. forEach()
The forEach() method executes a provided function once for each array element.
Syntax:
array.forEach(function(element, index, array)
{
// code to execute on each element
});
Example:
let arr = [1, 2, 3];
arr.forEach((element, index) => {
console.log(`Element at index ${index} is ${element}`);
});
// Output:
// Element at index 0 is 1
// Element at index 1 is 2
// Element at index 2 is 3
2. map()
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
Syntax:
let newArray = array.map(function(element, index, array)
{
// code to execute on each element
return newElement;
});
Example:
let arr = [1, 2, 3];
let squaredArr = arr.map(element => element * 2);
console.log(squaredArr); // Output: [2, 4, 6]
3. filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
Syntax:
let newArray = array.filter(function(element, index, array) {
// code to test each element
return condition;
});
Example:
let arr = [1, 2, 3, 4];
let evenArr = arr.filter(element => element % 2 === 0);
console.log(evenArr); // Output: [2, 4]
4. reduce()
The reduce() method executes a reducer function on each element of the array, resulting in a single output value.
Syntax:
let result = array.reduce(function(accumulator, currentValue, index, array) {
// code to execute on each element
return newAccumulator;
}, initialValue);
Example:
let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, currentValue) => acc + currentValue, 0);
console.log(sum); // Output: 10
5. reduceRight()
The reduceRight() method applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.
Syntax:
let result = array.reduceRight(function(accumulator, currentValue, index, array) {
// code to execute on each element
return newAccumulator;
}, initialValue);
Example:
let arr = [1, 2, 3, 4];
let product = arr.reduceRight((acc, currentValue) => acc * currentValue, 1);
console.log(product); // Output: 24
6. every()
The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.
Syntax:
let result = array.every(function(element, index, array) {
// code to test each element
return condition;
});
Example:
let arr = [2, 4, 6];
let allEven = arr.every(element => element % 2 === 0);
console.log(allEven); // Output: true
7. some()
The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.
Syntax:
let result = array.some(function(element, index, array) {
// code to test each element
return condition;
});
Example:
let arr = [1, 2, 3];
let hasEven = arr.some(element => element % 2 === 0);
console.log(hasEven); // Output: true
8. find()
The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.
Syntax:
let result = array.find(function(element, index, array) {
// code to test each element
return condition;
});
Example:
let arr = [1, 2, 3, 4];
let found = arr.find(element => element > 2);
console.log(found); // Output: 3
9. findIndex()
The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.
Syntax:
let index = array.findIndex(function(element, index, array) {
// code to test each element
return condition;
});
Example:
let arr = [1, 2, 3, 4];
let index = arr.findIndex(element => element > 2);
console.log(index); // Output: 2
10. for…of Loop
The for…of statement creates a loop iterating over iterable objects (including arrays), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
Syntax:
for (let value of array) {
// code to execute on each value
}
Example:
let arr = [1, 2, 3];
for (let value of arr) {
console.log(value);
}
// Output:
// 1
// 2
// 3
Summary
JavaScript provides a robust set of methods for iterating over arrays, each suited for different purposes:
- forEach: for executing a function on each element without returning a new array.
- map: for transforming elements and returning a new array.
- filter: for selecting elements that meet a specific condition.
- reduce and reduceRight: for accumulating values into a single result.
- every and some: for testing elements against a condition.
- find and findIndex: for locating elements or their indexes.
- for…of: for simple iteration over array values.
These methods make array manipulation and traversal intuitive and efficient, enabling a functional approach to handling collections of data.