DEV Community

Kashif Nehal
Kashif Nehal

Posted on

Implementing Polyfills in JavaScript: A Quick Dive

Polyfills are bits of code that make modern JavaScript features work in older browsers that don't support them. They help you use the latest features without worrying about breaking your site for users with outdated browsers.

Things to Keep in Mind Before creating a polyfill:

Check First: See if someone else has already made a polyfill for what you need. Libraries like core-js might already have it.
Don't Overwrite: Make sure your polyfill only runs if the browser doesn't support the feature. Use feature detection.
Keep It Fast: Polyfills can slow down your code. Write efficient polyfills and test performance.
Follow Standards: Stick to the official JavaScript specifications so your polyfill works correctly.

Simple Polyfills
Here are some basic polyfills you might need:

Array.prototype.map

if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {
    const result = [];
    for (let i = 0; i < this.length; i++) {
      if (i in this) {
        result[i] = callback.call(thisArg, this[i], i, this);
      }
    }
    return result;
  };
}
Enter fullscreen mode Exit fullscreen mode

Array.prototype.forEach


if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(callback, thisArg) {
    for (let i = 0; i < this.length; i++) {
      if (i in this) {
        callback.call(thisArg, this[i], i, this);
      }
    }
  };
}
Enter fullscreen mode Exit fullscreen mode

Array.prototype.findIndex

if (!Array.prototype.findIndex) {
  Array.prototype.findIndex = function(predicate, thisArg) {
    for (let i = 0; i < this.length; i++) {
      if (predicate.call(thisArg, this[i], i, this)) {
        return i;
      }
    }
    return -1;
  };
}
Enter fullscreen mode Exit fullscreen mode

String.prototype.charAt

if (!String.prototype.charAt) {
  String.prototype.charAt = function(index) {
    return this[index] || '';
  };
}
Enter fullscreen mode Exit fullscreen mode

Promise

Here's a very basic Promise polyfill:

if (!window.Promise) {
  window.Promise = function(executor) {
    let state = 'pending';
    let value;
    const handlers = [];

    function resolve(result) {
      if (state !== 'pending') return;
      state = 'fulfilled';
      value = result;
      handlers.forEach(h => h());
    }

    function reject(error) {
      if (state !== 'pending') return;
      state = 'rejected';
      value = error;
      handlers.forEach(h => h());
    }

    this.then = function(onFulfilled, onRejected) {
      return new Promise((resolve, reject) => {
        handlers.push(() => {
          if (state === 'fulfilled') resolve(onFulfilled ? onFulfilled(value) : value);
          if (state === 'rejected') reject(onRejected ? onRejected(value) : value);
        });
      });
    };

    executor(resolve, reject);
  };
}
Enter fullscreen mode Exit fullscreen mode

Conclusion:
Polyfills are handy for making sure your code works everywhere. Keep them simple, efficient, and check if a good one already exists before making your own.

Top comments (0)