JavaScript Array Iteration Methods
Array forEach()
The forEach() method calls a function (a callback function) once for each array element.
Example
const numbers = [45, 4, 9, 16, 25];let txt = "";numbers.forEach((value) => { txt += value + "<br>";});
Array map()
The map() method creates a new array by performing a function on each array element. It does not change the original array.
Example
This example multiplies each array value by 2:
const numbers = [45, 4, 9, 16, 25];const doubled = numbers.map((value) => value * 2);
Array flatMap()
ES2019 added the flatMap() method, which first maps all elements and then flattens the result into a new array.
Example
const numbers = [1, 2, 3, 4, 5, 6];const flattened = numbers.flatMap((value) => [value * 2]);
Array filter()
The filter() method creates a new array with elements that pass a test provided by a function.
Example
This example creates a new array from elements larger than 18:
const numbers = [45, 4, 9, 16, 25];const over18 = numbers.filter((value) => value > 18);
Array reduce()
The reduce() method runs a function on each array element to reduce it to a single value. It works from left-to-right in the array.
Example
This example finds the sum of all numbers in an array:
const numbers = [45, 4, 9, 16, 25];const sum = numbers.reduce((total, value) => total + value, 0);
Array reduceRight()
The reduceRight() method runs a function on each array element to reduce it to a single value, working from right-to-left in the array.
Example
This example finds the sum of all numbers in an array:
const numbers = [45, 4, 9, 16, 25];const sum = numbers.reduceRight((total, value) => total + value, 0);
Array every()
The every() method checks if all array elements pass a test provided by a function.
Example
This example checks if all array values are larger than 18:
const numbers = [45, 4, 9, 16, 25];const allOver18 = numbers.every((value) => value > 18);
Array some()
The some() method checks if some array elements pass a test provided by a function.
Example
This example checks if some array values are larger than 18:
const numbers = [45, 4, 9, 16, 25];const someOver18 = numbers.some((value) => value > 18);Array from()
The Array.from() method creates an array from any object with a length property or any iterable object.
Example
Create an array from a string:
const arr = Array.from("ABCDEFG"); // ["A", "B", "C", "D", "E", "F", "G"]
Array keys()
The Array.keys() method returns an array iterator object with the keys of an array.
Example
Create an array iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];const keys = fruits.keys();let text = "";for (let key of keys) { text += key + "<br>";}
Array entries()
The entries() method returns an array iterator object with key/value pairs.
Example
Create an array iterator and iterate over the key/value pairs:
const fruits = ["Banana", "Orange", "Apple", "Mango"];const entries = fruits.entries();let text = "";for (let entry of entries) { text += entry + "<br>";}
Array with()
ES2023 introduced the with() method as a safe way to update elements in an array without altering the original array.
Example
const months = ["Januar", "Februar", "Mar", "April"];
const updatedMonths = months.with(2, "March"); // ["Januar", "Februar", "March", "April"]
Array Spread ...
The spread operator ... expands an iterable (like an array) into individual elements.
Example
Merge multiple arrays into one:
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "Dec"];
const year = [...q1, ...q2, ...q3, ...q4];
// ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
These methods provide powerful ways to iterate over and manipulate arrays in JavaScript.
