Array Iteration Methods in JavaScript

• When working with arrays in JavaScript, you don’t always need traditional loops like for or while. JavaScript provides built-in array iteration methods that make your code cleaner, shorter, and easier to understand.
• These methods internally loop through the array and apply a function to each element.

1. forEach() – Perform an action on each element

forEach() is used when you want to execute a function for every element in the array.

let numbers = [1, 2, 3];

numbers.forEach((num, index) => {
    console.log(num, index);
});

Key points:

• Does not return a new array
• Used for side effects (printing, updating values, etc.)

2. map() – Transform each element

map() creates a new array by applying a function to each element.

let numbers = [1, 2, 3];

let squared = numbers.map(num => num * num);

console.log(squared); // [1, 4, 9]

Key points:

• Returns a new array
• Does not modify the original array

3. filter() – Select elements based on condition

filter() returns a new array with elements that satisfy a condition.

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

let evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4]

Key points:

• Returns a new array
• Useful for extracting specific data

4. reduce() – Reduce array to a single value

reduce() processes all elements and returns a single output value.

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

let sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum); // 10

Key points:

• Takes an accumulator (acc) and current value (curr)
• Can be used for sum, product, or complex calculations

5. find() – Get the first matching element

find() returns the first element that satisfies a condition.

let numbers = [10, 20, 30];

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

console.log(result); // 20

Key points:

• Returns only one value
• Stops once condition is met

6. some() – Check if at least one element matches

let numbers = [1, 3, 5];

let hasEven = numbers.some(num => num % 2 === 0);

console.log(hasEven); // false

Key points:

• Returns true or false
• Stops early when condition is satisfied

7. every() – Check if all elements match

let numbers = [2, 4, 6];

let allEven = numbers.every(num => num % 2 === 0);

console.log(allEven); // true

Key points:

• Returns true only if all elements satisfy condition

8. flatMap() – Map + Flatten

This method first maps each element and then flattens the result by one level.

let arr = [1, 2, 3];

let result = arr.flatMap(num => [num, num * 2]);

console.log(result); // [1, 2, 2, 4, 3, 6]

Why use it?

• Avoids nested arrays
• Combines map() + flat() in one step ([DEV Community][1])

9. reduceRight() – Reduce from Right to Left

Works like reduce() but processes elements from the end.

let arr = ["a", "b", "c"];

let result = arr.reduceRight((acc, val) => acc + val);

console.log(result); // "cba"

Use case:

• Reverse operations
• Right-to-left calculations ([DEV Community][1])

10. Array.from() – Convert to Array

Creates a new array from iterable objects like strings.

let str = "hello";

let arr = Array.from(str);

console.log(arr); // ["h", "e", "l", "l", "o"]

Use case:

• Convert strings, sets, or node lists into arrays ([DEV Community][1])

11. keys() – Get Index Iterator

Returns an iterator of array indices.

let arr = ["a", "b"];

for (let key of arr.keys()) {
    console.log(key);
}

Output:

0
1

12. entries() – Get Index + Value

Returns both index and value as pairs.

let arr = ["a", "b"];

for (let [index, value] of arr.entries()) {
    console.log(index, value);
}

13. values() – Get Values Iterator

Returns only values (similar to for...of).

let arr = ["a", "b"];

for (let value of arr.values()) {
    console.log(value);
}

Note: These iterator methods (keys, values, entries) return iterator objects that help traverse arrays efficiently ([DEV Community][2])

14. with() – Replace Value (Non-Mutating)

Creates a new array with one value replaced.

let arr = [1, 2, 3];

let newArr = arr.with(1, 100);

console.log(newArr); // [1, 100, 3]

Key point:

• Does NOT modify original array ([DEV Community][1])

15. Spread Operator (...) – Expand Array

let arr1 = [1, 2];
let arr2 = [3, 4];

let result = [...arr1, ...arr2];

console.log(result); // [1, 2, 3, 4]

Use case:

• Copy arrays
• Merge arrays ([DEV Community][1])

16. Rest Operator (...) – Collect Values

function sum(...nums) {
    return nums.reduce((a, b) => a + b);
}

console.log(sum(1, 2, 3)); // 6

Use case:

• Handle variable number of arguments

Conclusion

Array iteration methods are essential for writing modern JavaScript. They reduce complexity and make your code more readable compared to traditional loops.