8.1 The forEach() Method
Array iteration methods in JavaScript offer powerful tools for dealing with arrays, allowing various operations on their elements. We're gonna check out key iteration methods like forEach(), map(), filter(), reduce(), some(), every(), find() and findIndex().
The forEach() method executes a given function once for each array element. This method doesn’t return a new array and it doesn't break.
Syntax:
array.forEach(function(element, index, array) {
// function body
});
Example:
The forEach() method iterates over each element of the numbers[] array, outputting its index and value.
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number, index) => {
console.log(`Index: ${index}, Value: ${number}`);
});
// Output:
// Index: 0, Value: 1
// Index: 1, Value: 2
// Index: 2, Value: 3
// Index: 3, Value: 4
// Index: 4, Value: 5
8.2 The map() Method
The map() method creates a new array with the result of calling a specified function for each array element.
Syntax:
const newArray = array.map(function(element, index, array) {
// function body
return new_value;
});
The transformer function can also be written as an arrow:
const newArray = array.map((element, index, array) => new_value);
Example:
The map() method creates a new array squared[] containing squares of the numbers from the numbers[] array.
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(number => number * number);
console.log(squared); // [1, 4, 9, 16, 25]
8.3 The filter() Method
The filter() method creates a new array with all elements that pass the test in the provided function.
const newArray = array.filter(function(element, index, array) {
// function body
return condition;
});
The filter function can also be written as an arrow:
const newArray = array.filter((element, index, array) => condition);
Example:
The filter() method creates a new array evenNumbers[] containing only even numbers from the numbers[] array.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]
8.4 The reduce() Method
The reduce() method applies a function to an accumulator and each element in the array (from left to right), reducing it to a single value.
Syntax:
const result = array.reduce(function(accumulator, current, index, array) {
// function body
return new_accumulator_value;
}, initialValue);
The accumulator function can also be written as an arrow:
const result = array.reduce((accumulator, current, index, array) =>
new_value, initialValue
);
Example:
The reduce() method reduces the numbers[] array to a single value sum by summing all the array elements.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, number) => acc + number, 0);
console.log(sum); // 15
8.5 The some() Method
The some() method checks if at least one array element satisfies the condition set in the provided function. Returns true or false.
Syntax:
const result = array.some(function(element, index, array) {
// function body
return condition;
});
The check function can also be written as an arrow:
const result = array.some((element, index, array) => condition);
Example:
The some() method checks if there is at least one even number in the numbers[] array and returns true.
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(number => number % 2 === 0);
console.log(hasEvenNumber); // true
8.6 The every() Method
The every() method checks if all elements of the array satisfy the condition set in the provided function. Returns true or false.
Syntax:
const result = array.every(function(element, index, array) {
// function body
return condition;
});
The check function can also be written as an arrow:
const result = array.every((element, index, array) => condition);
Example:
The every() method checks if all elements of the numbers[] array are positive and returns true.
const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(number => number > 0);
console.log(allPositive); // true
8.7 The find() Method
The find() method returns the first array element that satisfies the condition set in the provided function. If no element satisfies the condition, it returns undefined.
Syntax:
const result = array.find(function(element, index, array) {
// function body
return condition;
});
The check function can also be written as an arrow:
const result = array.find((element, index, array) => condition);
Example:
The find() method returns the first even number from the numbers[] array.
const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(number => number % 2 === 0);
console.log(firstEven); // 2
8.8 The findIndex() Method
The findIndex() method returns the index of the first array element that satisfies the condition set in the provided function. If no element satisfies the condition, it returns -1.
Syntax:
const result = array.findIndex(function(element, index, array) {
// function body
return condition;
});
The check function can also be written as an arrow:
const result = array.findIndex((element, index, array) => condition);
Example:
The findIndex() method returns the index of the first even number in the numbers[] array.
const numbers = [1, 2, 3, 4, 5];
const firstEvenIndex = numbers.findIndex(number => number % 2 === 0);
console.log(firstEvenIndex); // 1
GO TO FULL VERSION