Array Iteration

By the end, you can choose and write common JavaScript array iteration methods to loop over values, transform arrays, filter data, and combine values into a result.

What it is

Array iteration means visiting each element in an array and doing something with it. JavaScript arrays are ordered lists, so iteration usually moves from index 0 to the last index. Related terms include callback function, element, index, side effect, and transformation.

Common array iteration methods are forEach for side effects, map for creating a new transformed array, filter for selecting elements, reduce for combining elements into one value, and find, some, or every for testing or locating values. You can also use for...of to loop over values or a classic for loop when you need explicit index control.

Why it matters

• It lets you process lists of data without manually tracking indexes.
• It turns raw API data into UI-ready values with map.
• It removes invalid or unwanted entries with filter.
• It calculates totals, averages, or grouped results with reduce.
• It often makes code shorter and clearer than nested manual loops.

Syntax or steps

Most array iteration methods take a callback function. The callback receives the current element, the current index, and the original array. The smallest useful pattern is:

const list = [1, 2, 3];
list.forEach((n) => console.log(n));

1. Choose the method based on the result you need: forEach for actions, map for a new array, filter for a subset, or reduce for one value.
2. Pass a callback that describes what to do with each element.
3. Return a value from the callback when the method builds new data.

Example

const prices = [12, 7, 25, 3];

const withTax = prices.map((price) => price * 1.1);
const affordable = prices.filter((price) => price < 20);
const total = prices.reduce((sum, price) => sum + price, 0);

console.log(withTax);
console.log(affordable);
console.log(total);

Part by part: map creates a new array where each price is multiplied by 1.1, producing [13.2, 7.7, 27.5, 3.3]. filter keeps only prices less than 20, producing [12, 7, 3]. reduce starts with 0 as the accumulator and adds each price, producing 47. If you only wanted to log each price, you would use forEach, but forEach returns undefined and does not create a new array.

Common mistakes

• Using forEach when you need a new array; use map instead.
• Forgetting that map and filter callbacks must return a value; returning undefined creates an array of undefined values or filters everything out.
• Omitting the initial value in reduce; it can fail on empty arrays and makes the first element the accumulator.
• Trying to use break or continue inside forEach; those statements do not work there, so use a loop if you need early exit.

When to use it

Array methods are best for declarative data processing. Use loops when you need lower-level control.

Practice

Guided exercise: Given const names = ['Ada', 'Lin', 'Grace'];, write a forEach loop that logs Hello, Ada!, Hello, Lin!, and Hello, Grace!.

const names = ['Ada', 'Lin', 'Grace'];
names.forEach((name) => console.log(`Hello, ${name}!`));

Challenge: Given const scores = [82, 91, 67, 74];, create an array of passing scores where the score is at least 75, then calculate the average score. Expected passing array: [82, 91, 74]. Expected average: 78.5.

Solution hint: Use filter for the passing array and reduce for the sum, then divide by scores.length.

Quick check

Question: Which method should you use to turn [1, 2, 3] into [2, 4, 6]?

Answer: Use map, because it returns a new array with each element transformed.

Summary

Array iteration is about applying a function to each element of an array. Choose forEach for side effects, map, filter, and reduce for producing new data, and loops when you need early exit or explicit index control.