Writing Polyfills for filter and reduce in JavaScript

Writing Polyfills for filter and reduce in JavaScript

Writing polyfills for filter and reduce is a common interview question. Here is how to write each.

Polyfill for filter

Array.prototype.myFilter = function (callback, thisArg) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (callback.call(thisArg, this[i], i, this)) {
      result.push(this[i]);
    }
  }
  return result;
};
``
**How it works**:
1. Loop through the array.
2. Call `callback` with `(element, index, array)`.
3. If the callback returns truthy, push the element to `result`.
4. Return `result`.

```js
[1, 2, 3, 4].myFilter((n) => n % 2 === 0); // [2, 4]
``
### Polyfill for `reduce`

```js
Array.prototype.myReduce = function (callback, initialValue) {
  let accumulator = initialValue;
  let startIndex = 0;
  if (initialValue === undefined) {
    if (this.length === 0) {
      throw new TypeError("Reduce of empty array with no initial value");
    }
    accumulator = this[0];
    startIndex = 1;
  }
  for (let i = startIndex; i < this.length; i++) {
    accumulator = callback(accumulator, this[i], i, this);
  }
  return accumulator;
};
``
**How it works**:
1. If `initialValue` is provided, start with it and index 0.
2. If not, use the first element as the accumulator and start at index 1.
3. If no initial value and the array is empty, throw `TypeError`.
4. Loop through, calling `callback` with `(accumulator, element, index, array)`.
5. Return the final accumulator.

```js
[1, 2, 3].myReduce((acc, n) => acc + n, 0); // 6
[1, 2, 3].myReduce((acc, n) => acc + n);    // 6 (no initial value)
``
### Common Interview Mistakes

1. **Not handling the no-initial-value case**: `reduce` uses the first element as the accumulator if no initial value is given.
2. **Not throwing for empty arrays without an initial value**: the spec throws `TypeError`.
3. **Not passing all four arguments to the callback**: `(accumulator, element, index, array)`.
4. **Using `var` in the loop**: use `let` to avoid closure bugs.

### The Takeaway

`filter` polyfill: loop, call the callback, push to result if truthy. `reduce` polyfill: handle the initial value (or first element), loop, update the accumulator, return it. Handle empty arrays without an initial value (throw TypeError). Pass all arguments to the callback. Use `let` in loops.