How to Understand map, filter, and reduce in JavaScript

Map, filter, and reduce are higher-order functions that accept other functions as arguments. They process arrays without mutating the original and return new arrays or values. Using these methods instead of imperative for loops makes code more declarative, expressing what you want to accomplish rather than how to accomplish it step by step. They are the foundation of functional data transformation in JavaScript.

Map transforms every element of an array by applying a provided function to each element and collecting the results into a new array. The new array always has the same length as the original. The original array is never modified. The callback receives three arguments: the current element, its index, and the array itself. Return the transformed value from the callback for each element.

Map is ideal for converting one array of data into another shape. For example, converting an array of user objects into an array containing only their names, converting temperatures from Celsius to Fahrenheit, or adding a computed property to each object in an array. Whenever you need to apply the same transformation to every item in a collection, map is the correct tool.

Filter selects elements from an array based on a test function. It applies the callback to each element and includes the element in the new array only if the callback returns a truthy value. The original array is never modified. The result can be shorter than the original if some elements do not pass the test, or it can be the same length if all elements pass, or empty if none pass.

Filter is ideal for narrowing down a collection based on criteria. For example, selecting only active users from a list, finding all products below a certain price, or removing null and undefined values from an array. Whenever you want a subset of an array that meets a specific condition, filter is the correct tool. Combine filter with map by chaining them to first select elements and then transform the selected ones.

Reduce is the most powerful and most general of the three methods. It processes an array and accumulates all values into a single output. The callback receives an accumulator and the current element. Whatever you return from the callback becomes the accumulator value for the next iteration. The second argument to reduce is the initial value of the accumulator before the first element is processed.

Reduce can implement any array transformation including those achievable with map and filter. Use it to sum or multiply numbers, group objects by a property, count occurrences of values, flatten nested arrays, or build objects from arrays. Whenever the output of an array operation is a single value, a different shape entirely, or an object rather than another array, reduce is the correct tool.

The real power emerges when you chain all three methods together in a pipeline. Start with your raw array, chain filter to select relevant items, chain map to transform them into the desired shape, and chain reduce to aggregate the results. Each method receives the output of the previous one as its input array. This produces clear, readable data processing pipelines that describe a series of transformations step by step without mutation or intermediate variables.