Polyfill for map, filter, and reduce in JavaScript

If you are preparing for frontend interviews, knowing how to write polyfills is extremely helpful. Interviewers often ask you to re-create commonly used methods like map, filter, and reduce. These questions test not only your JavaScript skills but also how well you understand the prototype chain and higher-order functions.

Table of Contents

1. Polyfill for map, filter, and reduce in JavaScript
2. map polyfill in JavaScript
   • Understand the map array method in JavaScript
   • Expected map method behaviour
   • Map polyfill code in ES6 with example
   • Step-by-Step Polyfill Explanation
3. filter polyfill in JavaScript
   • Understand the filter array method in JavaScript
   • Expected filter method behaviour
   • Filter polyfill code in ES6 with example
   • Step-by-Step Polyfill Explanation
4. reduce polyfill in JavaScript
   • Understand the reduce array method in JavaScript
   • Expected reduce method behaviour
   • Reduce polyfill code in ES6 with example
   • Step-by-Step Polyfill Explanation
5. Learn More

Polyfill for map, filter, and reduce in JavaScript

In JavaScript, methods like map, filter, and reduce are higher-order functions that are widely used in everyday coding. But in interviews, you may be asked to implement these methods yourself. That’s where polyfills come in.

A polyfill is custom code that mimics the behavior of built-in JavaScript functions. By writing polyfills, you understand how JavaScript methods work internally.

map() polyfill in JavaScript

Understand the map array method in JavaScript

Let's first understand how map array method works with an example. The map method is used to create a new array by applying a callback function to each element.

Example:

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

Expected map method behaviour

Here are the expected behaviours (or we can say test cases) which we need to handle while implementing map polyfill in JavaScript.

1. It should take a callback function as input.
2. It should call the callback for each element.
3. It should return a new array.

Map polyfill code in JavaScript(ES6) with example

Here is the implementation code for map polyfill in JavaScript

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

// Usage
const arr = [1, 2, 3];
const squared = arr.myMap(num => num * num);
console.log(squared); // [1, 4, 9]

Step-by-Step Polyfill Explanation

1. Attach a new method to Array.prototype - This will allow to use this new method on any array instance, since this method is attached to the Array Prototype.
2. Start with empty result array - this is the new array which we will return as a result.
3. Loop through the array (this)
   Here, this represents the array context on which this method will be called, like [1, 2, 3].myMap() In this example, this represents [1,2,3] array. 
4. Call the callback with each element (element, index, array).
5. Push the result into a new array.
6. Return the new array.

filter polyfill in JavaScript

Understand the filter array method in JavaScript

The filter method is used to create a new array with only those elements that satisfy a condition provided as part of the call function in the input.

Example:

const numbers = [1, 2, 3, 4];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

Expected filter method behaviour

Here are the expected behaviours that we need to handle while implementing the filter polyfill in JS.

1. It should take a callback function.
2. It should return a new array with elements that pass the condition (provided as part of the callback function).
3. The original array should not be modified.

Filter polyfill code in JavaScript(ES6) with an example

Here is the implementation code for the filter polyfill in JavaScript

Array.prototype.myFilter = function(callback) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      result.push(this[i]);
    }
  }
  return result;
};

// Usage
const arr = [5, 10, 15, 20];
const greaterThanTen = arr.myFilter(num => num > 10);
console.log(greaterThanTen); // [15, 20]

Step-by-Step Polyfill Explanation

1. Attach a new method to Array.prototype.
2. Loop through the array. this represent the array context here
3. Call the callback.
4. If it returns true, push the element to the new array.
5. Return the new array.

reduce polyfill in JavaScript

Understand the reduce array method in JavaScript

In simple words, reduce method is used to reduce an array to a single value by executing a callback on each element.

Example:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

Expected reduce method behaviour

Here are the expected behaviours that we need to handle while implementing the reduce polyfill in JS.

1. It should take a callback function and an optional initial value.
2. It should apply the callback to each element.
3. It should return a single accumulated result.

Reduce polyfill code in ES6 with an example

Here is the implementation code for reduce polyfill in JavaScript

Array.prototype.myReduce = function(callback, initialValue) {
  let accumulator = initialValue !== undefined ? initialValue : this[0];
  let startIndex = initialValue !== undefined ? 0 : 1;

  for (let i = startIndex; i < this.length; i++) {
    accumulator = callback(accumulator, this[i], i, this);
  }
  return accumulator;
};

// Usage
const arr = [1, 2, 3, 4];
const sum = arr.myReduce((acc, num) => acc + num, 0);
console.log(sum); // 10

Step-by-Step Polyfill Explanation

1. Define accumulator. If no initial value is passed, use the first element.
2. Start looping from index 0 or 1.
3. Call the callback with (accumulator, currentValue, index, array).
4. Update the accumulator.
5. Return the accumulator after the loop.

Learn More

Here are more topics to prepare for your next JavaScript Interview 

• Promise polyfill in JavaScript
• Promise.all polyfill in JavaScript
• Frontend Interview Preparation Resources