Start with the result you need
When working with a JavaScript array, ask what the finished result should look like. If you need a new array with one transformed value for each original item, use map. If you need a new array containing only items that pass a test, use filter. If you need to combine the items into a single result, such as a total, use reduce. That question is usually more helpful than trying to memorize all three methods at once.
You can try the examples below in a modern browser’s developer console or in Node.js 18 or later. They use standard JavaScript and require no packages. Start with const prices = [10, 25, 5];. Each example uses that original array so you can compare the results without carrying changes from one example to the next.
Use map to transform each item
Map calls a function for each item and puts each returned value into a new array. For example, const doubled = prices.map(price => price * 2); produces [20, 50, 10]. The result has the same number of positions as prices. Use this pattern when you want to convert values, extract a property from each object, or prepare data for display.
The value returned by the callback matters. If you write a callback with braces, include an explicit return: prices.map(price => { return price * 2; }). Without that return, each position in the new array will contain undefined. Map is a poor choice when you only want to perform an action for each item and do not need the resulting array.
Use filter to keep matching items
Filter asks a yes-or-no question about each item. The callback returns a value JavaScript treats as true to keep the item, or false to leave it out. For example, const largerPrices = prices.filter(price => price >= 10); produces [10, 25]. The original order is preserved, but the result can contain fewer items—or none at all.
Choose filter when the items themselves should stay the same but some do not belong in the result. A search term, a completed status, or a minimum value can all form the condition. If you want to change every item rather than select among them, map communicates your intention more clearly.
Use reduce to combine items
Reduce carries a running result, called an accumulator, from one item to the next. To add the prices, write const total = prices.reduce((sum, price) => sum + price, 0);. The result is 40, not an array. Here, 0 is the initial accumulator. For each price, the callback returns the next value of sum.
Providing an initial value makes the starting point clear and allows this sum to work when the input array is empty. Without one, reduce on an empty array throws an error. The initial value should fit the result you are building: 0 for a sum, for example, or an empty object when grouping items by a key. Reduce can do many jobs, but a clever reducer is not automatically a readable one. If a straightforward map or filter expresses the task, prefer it.
Combine methods without losing clarity
Methods can be chained when a task has several distinct steps. This example keeps prices of at least 10, doubles those prices, and adds them: const result = prices.filter(price => price >= 10).map(price => price * 2).reduce((sum, price) => sum + price, 0);. The result is 70: the kept values are [10, 25], which become [20, 50] before they are added.
Order matters. Filtering before mapping tests the original prices; filtering afterward would test the doubled prices and could produce a different answer. Read a chain from left to right and name intermediate arrays if the steps become hard to follow. As a final check, ask whether you expect an array of transformed items, an array of selected items, or one combined result. That expectation points you toward map, filter, or reduce.
