Polyfills for map, filter & reduce

Making Old Browsers Play Nice with Modern JavaScript 😎

Introduction

Hey there, fellow coders! 👋 Have you ever experienced the frustration of your shiny new JavaScript code working flawlessly in the latest Chrome, but then you test it on an older browser and it falls apart? 😱 Fear not! Today, we’re diving into the magical world of polyfills to save the day.

Polyfills are like those cool patches your grandma sews 🪡 on your old jeans. They make sure everything stays together, even if your wardrobe (or browser) is a bit outdated.

Specifically, we’ll be looking at polyfills for map, filter, and reduce—three essential methods that every JavaScript developer should have in their toolkit.

Lets Get Started! 🥳

Excited to learn!

Understanding map, filter, and reduce

Before we jump into the nitty-gritty, let’s have a quick refresher on what these methods actually do.

map

map is like a delivery drone 🚁 for your array. It takes each item, processes it (like putting a tiny package on it), and delivers a new array with all those packages.

Parameters:

1. currentValue - The current element being processed.
2. index (optional) - The index of the current element.
3. array (optional) - The array map was called upon.

Example:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map((n, i, arr) => {
  console.log(`Element: ${n}, Index: ${i}, Array: ${arr}`);
  return n * 2;
});
console.log(doubled); // [2, 4, 6, 8]

filter

filter is the bouncer 🚷 of your array. It lets in only the elements that meet a certain criteria, kicking out the rest.

Parameters:

1. currentValue - The current element being processed.
2. index (optional) - The index of the current element.
3. array (optional) - The array filter was called upon.

Example:

const numbers = [1, 2, 3, 4];
const evens = numbers.filter((n, i, arr) => {
  console.log(`Element: ${n}, Index: ${i}, Array: ${arr}`);
  return n % 2 === 0;
});
console.log(evens); // [2, 4]

reduce

reduce is the magician 🎩 of the array world. It takes all your elements, combines them in a magical way, and produces a single value from them.

Get Sridhar Maskeri’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Parameters:

1. accumulator - The accumulated value previously returned in the last invocation.
2. currentValue - The current element being processed.
3. index (optional) - The index of the current element.
4. array (optional) - The array reduce was called upon.

Example:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, n, i, arr) => {
  console.log(`Accumulator: ${acc}, Element: ${n}, Index: ${i}, Array: ${arr}`);
  return acc + n;
}, 0);
console.log(sum); // 10

Why Polyfills?

You might be wondering 🤔, “Why do we need polyfills?”

Well, the sad truth is not all browsers are created equal. While modern browsers support map, filter, and reduce, older ones, do not. This is where polyfills come in — they fill the gap!

Polyfilling map

Here’s how you can polyfill map:

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

Explanation: This code first checks if Array.prototype.map exists. If not, it defines the method. It loops through the array, applies the callback function to each element, and stores the result in a new array.

Polyfilling filter

Next up, filter:

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

Explanation: Similar to the map polyfill, this code defines Array.prototype.filter if it doesn’t exist. It applies the callback function to each element and includes only those elements that pass the test in the new array.

Polyfilling reduce

Finally, let’s tackle reduce:

if (!Array.prototype.reduce) {
  Array.prototype.reduce = function(callback, initialValue) {
    let accumulator = initialValue;
    for (let i = 0; i < this.length; i++) {
      accumulator = accumulator ? callback(accumulator, this[i], i, this) : this[i];
    }
    return accumulator;
  };
}

Explanation: This polyfill checks if reduce exists, and if not, defines it. It processes each element in the array, combining them into a single value as defined by the callback function. If no initial value is provided, the first element is used as the initial value.

Bringing It All Together

Polyfills ensure that your code runs smoothly, even on older browsers. Here’s a quick recap:

• map transforms each element of an array.
• filter selects elements based on a test.
• reduce combines elements into a single value.

Thanks!

Conclusion

Polyfills are a lifesaver for making sure your modern JavaScript runs smoothly on older browsers. By understanding and implementing these polyfills, you’re not just writing code; you’re writing resilient, inclusive code. Happy coding! 🚀