Iterating Over Array Elements

So far you've learned how to add, remove, and search for elements in an array. The next step is iteration — running some logic against every element in the array. JavaScript gives you dedicated methods for this instead of always reaching for a traditional for loop. Each method in this lesson takes a callback function that runs once per element, but they differ in what they return: forEach() returns nothing, map() returns a new array of transformed values, filter() returns a new array of matching values, and reduce()/reduceRight() combine every element down into a single value. None of these methods mutate the original array — they all read it and, where relevant, build something new.

The forEach() method runs a callback function once for every element in the array, in order. It always returns undefined, so you should never try to assign its result to a variable expecting a new array — that's a very common beginner mistake. forEach() is best used when you want to perform a side effect for each item, like logging to the console, updating the DOM, or pushing values into an external array, rather than producing a new array yourself.

The map() method creates a brand new array by calling the provided callback on every element and collecting the returned values, in the same order and always the same length as the original array. This makes map() the right tool whenever you want to transform data — for example, converting an array of Celsius temperatures to Fahrenheit, or pulling out a single property from an array of objects. Because map() always returns a new array of equal length, it should not be used purely for side effects (that's what forEach() is for), and it should not be used to filter elements out (that's what filter() is for).

The filter() method creates a new array containing only the elements for which the callback returns a truthy value. Unlike map(), the resulting array can be shorter than the original — or even empty if nothing matches — because elements that fail the test are simply left out rather than transformed. filter() and map() are often chained together: filter down to the elements you care about, then map() to transform them.

The reduce() method walks through the array from left to right, calling a callback with an "accumulator" and the current element, and building up a single final value. Its signature is array.reduce((accumulator, currentValue, index, array) => { ... }, initialValue). The initialValue argument is optional but strongly recommended — if you omit it, reduce() uses the first element of the array as the starting accumulator and begins iterating from the second element, which can produce confusing bugs on empty arrays (calling reduce() on an empty array with no initialValue throws a TypeError). reduce() is powerful enough to implement map(), filter(), and even forEach() yourself, which is why it's often considered the most fundamental of the array iteration methods.

The reduceRight() method works exactly like reduce(), but processes the array from right to left instead of left to right. The final result is often the same for operations that are commutative and associative, like summing numbers, but the direction matters for operations where order affects the outcome — such as building a string, composing functions, or working with nested structures where right-to-left evaluation is meaningful.