Detailed explanation
JavaScript’s map, filter, and reduce are array methods that process elements through callbacks. Use map to transform values, filter to select values, and reduce to accumulate a result. They make common data-processing intentions clearer than a general-purpose loop. Importantly, saying they are always pure is incorrect: the methods do not directly mutate the source array, but their callbacks can modify it, change shared objects, or cause other side effects.
map calls its callback for each existing array element and places the returned value at the corresponding index in a new array. For const n = [1, 2, 3, 4], n.map(x => x * 2) produces [2, 4, 6, 8]. The output has the same length as the input. filter also creates a new array, but includes an original element only when its callback returns a truthy value. Thus, n.filter(x => x % 2 === 0) produces [2, 4]. Retained elements preserve their relative order, and objects are retained by reference rather than cloned.
reduce passes an accumulator and the current element to its callback; each callback return value becomes the next accumulator. In n.reduce((sum, x) => sum + x, 0), zero is the initial accumulator, and the result is 10. The accumulated result can be a number, string, object, or even an array. Without an initial value, reduce uses the first existing element as the accumulator and starts processing after it; an empty array without an initial value throws a TypeError.
All three methods process existing elements in ascending index order and skip empty slots in sparse arrays. map and filter callbacks receive the element, index, and source array; reduce additionally receives the accumulator first. With constant-time callbacks, each method takes linear time. Interviewers usually judge whether you choose the appropriate method, return values correctly, and understand mutation and edge cases. Prefer map for transformations, filter for selection, and reduce when accumulation genuinely improves clarity.
Key points to remember
- map returns a new array of transformed values with the same length as the source.
- filter returns a new array containing original elements whose predicate results are truthy.
- reduce returns the final accumulator, which can have any type.
- These methods do not directly mutate the source, but callbacks can introduce mutations and side effects.
- An explicit initial accumulator makes reduce’s behaviour clearer and handles empty arrays safely.
Common mistakes candidates make
- Forgetting return inside a block-bodied callback, such as x => { x * 2; }, which returns undefined.
- Claiming these methods guarantee purity or deeply clone the elements they process.
- Omitting reduce’s initial value without considering empty inputs or the intended accumulator type.
Likely follow-up questions
How is map different from forEach?
map collects callback return values into a new array, whereas forEach discards them and returns undefined. Use map when you need transformed data and forEach when you only need side effects.
Can changing a filtered object affect the original array’s data?
Yes, filter copies object references into its new array rather than cloning the objects. Changing a property through either array therefore changes the same shared object.
Can map, filter, and reduce be chained?
Yes: n.filter(x => x % 2 === 0).map(x => x * 2).reduce((sum, x) => sum + x, 0) returns 12 for [1, 2, 3, 4]. This is readable, but map and filter create intermediate arrays and each method performs its own traversal.
Interview tip: Explain transform, select, and accumulate using the same small array, then clarify the callback-mutation caveat.