Writing a Polyfill for map in JavaScript

Writing a Polyfill for map in JavaScript

Writing a polyfill for Array.prototype.map is a classic interview question. It tests closures, loops, and understanding of how map works.

What map Does

map takes a callback, calls it on each element, and returns a new array with the results. It does not mutate the original array.

[1, 2, 3].map((n) => n * 2); // [2, 4, 6]
``
### The Polyfill

```js
Array.prototype.myMap = function (callback) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    result.push(callback(this[i], i, this));
  }
  return result;
};
``
### How It Works

1. `this` is the array the method is called on (because it is on `Array.prototype`).
2. Create an empty `result` array.
3. Loop through each element.
4. Call `callback` with `(element, index, array)` (matching the spec).
5. Push the result to `result`.
6. Return `result`.

### Using It

```js
[1, 2, 3].myMap((n) => n * 2); // [2, 4, 6]
[1, 2, 3].myMap((n, i) => n + i); // [1, 3, 5]
``
### Adding `thisArg` (Optional)

The real `map` takes an optional second argument `thisArg` that sets `this` inside the callback:

```js
Array.prototype.myMap = function (callback, thisArg) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    result.push(callback.call(thisArg, this[i], i, this));
  }
  return result;
};
``
### Common Mistakes in Interviews

1. **Using `var` in the loop**: causes the closure bug if the callback is async. Use `let`.
2. **Mutating the original array**: `map` should return a new array, not mutate.
3. **Not passing all three arguments**: `callback` should receive `(element, index, array)`.
4. **Using `forEach` to build the result**: `forEach` returns `undefined`; you need a loop or `reduce`.

### The Takeaway

A `map` polyfill: loop through the array, call the callback with `(element, index, array)`, push the result to a new array, and return it. Use `let` in the loop, do not mutate the original, and pass all three arguments to the callback.