map, filter, and reduce in JavaScript: A Complete Guide

map, filter, and reduce in JavaScript: A Complete Guide

map, filter, and reduce are the three most important array methods in JavaScript. They are higher-order functions that enable functional programming.

map: Transform Each Element

const doubled = [1, 2, 3].map((n) => n * 2); // [2, 4, 6]
``
- Calls the callback on each element.
- Returns a new array with the results.
- Same length as the original.
- Does not mutate the original.

### filter: Select Elements

```js
const evens = [1, 2, 3, 4].filter((n) => n % 2 === 0); // [2, 4]
``
- Calls the callback on each element.
- Includes elements where the callback returns truthy.
- New array may be shorter than the original.
- Does not mutate the original.

### reduce: Combine Into One Value

```js
const sum = [1, 2, 3].reduce((acc, n) => acc + n, 0); // 6
``
- Calls the callback with an accumulator and each element.
- The return value becomes the next accumulator.
- The second argument (`0`) is the initial value.
- Returns the final accumulator.
- Can produce any type (number, string, array, object).

### Chaining

```js
const result = [1, 2, 3, 4]
  .filter((n) => n > 1)          // [2, 3, 4]
  .map((n) => n * 2)             // [4, 6, 8]
  .reduce((acc, n) => acc + n, 0); // 18
``
`map` and `filter` return arrays, so they can be chained. `reduce` returns a single value, so it is usually last.

### Callback Arguments

All three callbacks receive `(element, index, array)` (reduce receives `(accumulator, element, index, array)`):

```js
arr.map((el, i, arr) => ...);
arr.filter((el, i, arr) => ...);
arr.reduce((acc, el, i, arr) => ..., init);
``
### The Takeaway

`map` transforms (same length), `filter` selects (subset), `reduce` combines (single value). They are higher-order functions that take callbacks, return new values, and do not mutate the original. They can be chained for powerful data transformations.