map, filter, and reduce as Higher-Order Functions

map, filter, and reduce as Higher-Order Functions

map, filter, and reduce are the three most used higher-order functions in JavaScript. Here is how each works and when to use them.

map: Transform Each Element

const doubled = [1, 2, 3].map((n) => n * 2); // [2, 4, 6]
``
`map` calls the callback on each element and returns a new array with the results. The new array has the same length as the original.

### filter: Select Elements

```js
const evens = [1, 2, 3, 4].filter((n) => n % 2 === 0); // [2, 4]
``
`filter` calls the callback on each element. If the callback returns truthy, the element is included in the new array. The new array may be shorter than the original.

### reduce: Combine Into One Value

```js
const sum = [1, 2, 3].reduce((acc, n) => acc + n, 0); // 6
``
`reduce` calls the callback with an accumulator and each element. The return value becomes the next accumulator. The final accumulator is returned. The second argument (`0`) is the initial value.

### Chaining

```js
const result = [1, 2, 3, 4]
  .filter((n) => n > 1)
  .map((n) => n * 2)
  .reduce((acc, n) => acc + n, 0);
// [2, 3, 4] -> [4, 6, 8] -> 18
``
You can chain them because each returns a new array (except `reduce` which returns a single value).

### When to Use Each

- **map**: transform each element (same length output).
- **filter**: select a subset (shorter or equal length output).
- **reduce**: combine into a single value (sum, product, object, array).

### Common Mistakes

1. **Forgetting the initial value in `reduce`**: without it, the first element is the initial accumulator, which can cause bugs if the array is empty or the accumulator type differs.
2. **Mutating in the callback**: `map`/`filter` should be pure. Do not mutate the original array.
3. **Using `map` for side effects**: if you do not need the return value, use `forEach` instead.

### The Takeaway

`map` transforms (same length), `filter` selects (subset), `reduce` combines (single value). They are higher-order functions that take callbacks. They return new arrays (except `reduce`), so they can be chained. Always pass an initial value to `reduce`.