Start with the result you want
The easiest way to choose an array method is to describe the output before writing the callback. If you want one new value for every input item, use map. If you want to keep only items that pass a test, use filter. If you want to combine the items into a single result, consider reduce. These methods return new values rather than changing the original array, provided your callback does not mutate the items themselves.
The examples below run in a modern browser console or a current Node.js environment. Enter this array once, then try each expression that follows: const items = [{ name: "Pen", price: 2, inStock: true }, { name: "Notebook", price: 5, inStock: false }, { name: "Pencil", price: 1, inStock: true }]; The order of the objects matters in the examples because map and filter preserve the order of the items they return.
Use map to change each item
map calls your callback for each item and builds a new array from its return values. To get the product names, write const names = items.map(item => item.name);. The value of names is ["Pen", "Notebook", "Pencil"]. The output has the same number of entries as the input, but each entry is now a string rather than an object.
A common mistake is to treat map as a general-purpose loop while ignoring the array it returns. If you need a transformed array, return the transformed value explicitly. For example, const labels = items.map(item => item.name + ": " + item.price); produces a label for each item. If you only need to perform a side effect, such as logging, map communicates the wrong intention; a regular loop or forEach is clearer.
Use filter to keep matching items
filter also visits each item, but its callback answers a different question: should this item stay? Write const available = items.filter(item => item.inStock);. The result contains the Pen and Pencil objects, in their original order. It may contain fewer items than the input, including none. The callback's return value is tested for truthiness, so an explicit comparison can help when the condition might otherwise be ambiguous.
filter does not copy the objects it keeps. The new array and the original array still refer to the same Pen and Pencil objects. If you later change a property on one of those objects, that change can be visible through both arrays. To create changed objects without modifying the originals, combine filter with map: const discounted = items.filter(item => item.inStock).map(item => ({ ...item, price: item.price - 1 }));. The parentheses around the object literal tell the arrow function to return that object.
Use reduce when the result is an accumulation
reduce carries an accumulator through the array. Each callback receives the result so far and the current item, then returns the next accumulated value. To add the prices of available items, write const total = items.filter(item => item.inStock).reduce((sum, item) => sum + item.price, 0);. The result is 3. Here, 0 is the initial sum; it also makes the result 0 when no items pass the filter.
The accumulator does not have to be a number. It can be an array or an object, but that flexibility is not a reason to use reduce for every transformation. A reduce callback that conditionally builds an array can duplicate what filter already says plainly. For straightforward transformations, choose the method whose name describes the job. Reserve reduce for results such as totals or grouped values when the accumulator makes the logic easier to follow.
Combine methods without obscuring the intent
Many tasks have more than one step. If you need names of available products, const availableNames = items.filter(item => item.inStock).map(item => item.name); reads in the same order as the task: keep available products, then take their names. The result is ["Pen", "Pencil"]. In a longer chain, assign an intermediate result to a well-named variable if that makes the steps easier to inspect or debug.
A chain visits the array separately for each method, which is usually a reasonable trade-off for clear code. If you are working with a very large array in a performance-sensitive path, measure the actual behavior before replacing a readable chain with a more complicated loop. As a final check, ask what shape the output should have: one value per item suggests map, a subset suggests filter, and one accumulated result suggests reduce. That question will guide most everyday choices.
