J

JavaScript Handbook

Clean • Professional

JavaScript Array Iteration Methods

2 minute

JavaScript Array Iteration Methods

Array iteration methods process every element in an array, typically using a callback function to define the operation. These methods are essential for functional programming, enabling tasks like transforming, filtering, or aggregating array data.

array.foreach()

Executes a function on each array element. Does not return a new array.

Example:

  • Mutates nothing; works like a loop.
  • Cannot break out of forEach early.
const items = ["Apple", "Banana", "Mango"];
items.forEach(item => console.log(item));

array.map()

Creates a new array with the results of calling a function on every element.

Example:

Original array remains unchanged.

const items = ["Apple", "Banana", "Mango"];
const upperItems = items.map(item => item.toUpperCase());
console.log(upperItems); // ["APPLE", "BANANA", "MANGO"]

array.flatmap()

Maps each element to a new array and flattens the result by one level.

Example:

const items = ["Apple", "Banana"];
const letters = items.flatMap(item => item.split(''));
console.log(letters); // ["A", "p", "p", "l", "e", "B", "a", "n", "a", "n", "a"]

array.filter()

Creates a new array with elements that pass a test.

Example:

const items = ["Apple", "Banana", "Mango"];
const aItems = items.filter(item => item.includes("A"));
console.log(aItems); // ["Apple", "Banana"]

array.reduce()

Reduces the array to a single value by applying a function against an accumulator from left to right.

Example:

const numbers = [/* placeholders */];
const total = numbers.reduce((sum, n) => sum + n, 0);

array.reduceright()

Same as reduce(), but processes elements from right to left.

Example:

array.reduceRight((acc, element) => { /* ... */ }, initialValue);

array.every()

Tests whether all elements pass a test. Returns true or false.

Example:

const items = ["Apple", "Banana"];
const allHaveA = items.every(item => item.includes("A"));

array.some()

Tests whether at least one element passes the test. Returns true or false.

Example:

const anyPass = array.some((element) => { /* return true/false */ });

array.from()

Creates a new array from an iterable or array-like object.

Example:

const str = "ABC";
const arr = Array.from(str);
console.log(arr); // ["A", "B", "C"]

array.keys()

Returns a new array iterator object containing the keys (indices) of the array.

Example:

const items = ["Apple", "Banana"];
for (const key of items.keys()) console.log(key);

array.entries()

Returns a new array iterator object containing [index, element] pairs.

Example:

const items = ["Apple", "Banana"];
for (const [index, item] of items.entries()) console.log(index, item);

array.with()

Returns a new array with the element at a specified index replaced by a new value.

Example:

const items = ["Apple", "Banana"];
const updated = items.with(1, "Mango");
console.log(updated); // ["Apple", "Mango"]

array spread (...)

Expands elements of an array into individual elements. Useful for cloning or combining arrays.

Example:

const items = ["Apple", "Banana"];
const copy = [...items];
const combined = [...items, "Mango"];

array rest (...)

Collects remaining elements into a new array. Often used in destructuring or function parameters.

Example:

const [first, ...rest] = ["Apple", "Banana", "Mango"];
console.log(first); // "Apple"
console.log(rest); // ["Banana", "Mango"]

 

Article 0 of 0