Common Higher-Order Function Mistakes in JavaScript

Common Higher-Order Function Mistakes in JavaScript

Higher-order functions are powerful but have pitfalls. Here are the common mistakes and how to avoid each.

Mistake 1: Using map for Side Effects

// bad: using map for side effects (wastes the returned array)
arr.map((item) => console.log(item));

// good: use forEach for side effects
arr.forEach((item) => console.log(item));
``
### Mistake 2: Forgetting `reduce`'s Initial Value

```js
// bad: no initial value (first element is the accumulator)
const result = arr.reduce((acc, n) => acc + n);

// good: explicit initial value
const result = arr.reduce((acc, n) => acc + n, 0);
``
Without an initial value, an empty array throws `TypeError: Reduce of empty array with no initial value`.

### Mistake 3: Mutating in the Callback

```js
// bad: mutating the original array
arr.map((n) => { arr.push(n * 2); return n; });

// good: return a new array
const doubled = arr.map((n) => n * 2);
``
`map`/`filter` should be pure. Do not mutate the original array in the callback.

### Mistake 4: Losing `this` in the Callback

```js
// bad: this is lost
arr.map(obj.method);

// good: bind or arrow
arr.map(obj.method.bind(obj));
arr.map((n) => obj.method(n));
``
### Mistake 5: Not Returning from the Callback

```js
// bad: no return (map returns undefined for each element)
arr.map((n) => { n * 2; });

// good: return the value
arr.map((n) => n * 2);
arr.map((n) => { return n * 2; });
``
Arrow functions with block bodies need an explicit `return`.

### Mistake 6: Using `sort` Without a Comparator

```js
// bad: default sort converts to strings
[10, 2, 1].sort(); // [1, 10, 2]

// good: numeric comparator
[10, 2, 1].sort((a, b) => a - b); // [1, 2, 10]
``
`sort` defaults to string comparison, which is wrong for numbers.

### Mistake 7: Chaining Too Many Methods

```js
// inefficient: multiple passes over the array
arr.filter(...).map(...).filter(...).map(...);

// sometimes better: a single reduce or a single loop
``
Each chain step creates a new array. For large arrays and many steps, a single `reduce` or loop may be faster.

### The Takeaway

Common HOF mistakes: using `map` for side effects (use `forEach`), forgetting `reduce`'s initial value, mutating in callbacks, losing `this`, not returning from the callback, using `sort` without a comparator, and chaining too many methods (multiple passes). Use the right method, be pure, and always return.