Polyfills

manage new feature in old using

• transpiler

• polyfills

A polyfill is a piece of code that enables the usage of new programming language or web platform features in outdated browsers or environments that do not support them.

• use latest features in legacy browser and old version

• consitency on all browser and gadget

• use latest feature before support for it is relesed

A polyfill in JavaScript is a piece of code (usually written in JS itself) that implements a feature that is not natively supported in certain browsers or environments. It “fills in” the missing functionality so that older browsers can behave more like modern ones.

Here’s a simple example 👇

---

🧩 Example 1: Polyfill for Array.prototype.includes()

Modern JavaScript (ES2016+) introduced Array.prototype.includes().
If you need to support older browsers (like IE), you can write a polyfill like this:

// Polyfill for Array.prototype.includes
if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement, fromIndex) {
    // Convert this to an object
    var array = Object(this);
    var length = array.length >>> 0; // Convert to unsigned integer

    if (length === 0) return false;
    var start = fromIndex | 0;
    var i = Math.max(start >= 0 ? start : length - Math.abs(start), 0);

    while (i < length) {
      if (array[i] === searchElement ||
          (Number.isNaN(array[i]) && Number.isNaN(searchElement))) {
        return true;
      }
      i++;
    }
    return false;
  };
}

// ✅ Usage
console.log([1, 2, 3].includes(2)); // true
console.log([1, 2, 3].includes(4)); // false

---

🧠 Example 2: Polyfill for Object.assign()

if (typeof Object.assign != 'function') {
  Object.assign = function(target, varArgs) {
    if (target == null) {
      throw new TypeError('Cannot convert undefined or null to object');
    }
    var to = Object(target);
    for (var i = 1; i < arguments.length; i++) {
      var nextSource = arguments[i];
      if (nextSource != null) {
        for (var key in nextSource) {
          if (Object.prototype.hasOwnProperty.call(nextSource, key)) {
            to[key] = nextSource[key];
          }
        }
      }
    }
    return to;
  };
}

// ✅ Usage
const obj = Object.assign({}, { a: 1 }, { b: 2 });
console.log(obj); // { a: 1, b: 2 }

---

🧰 Notes

• Polyfills are often included automatically using tools like Babel or core-js.

• They allow developers to use new JavaScript features while maintaining compatibility with older browsers.

---

Would you like me to show how to use a polyfill loader (like core-js or polyfill.io) to automatically add missing features depending on the user’s browser?

more examples: https://javascript.plainenglish.io/most-asked-polyfills-in-javascript-interviews-bad3ec868ead

types of polyfill + more examples

https://dev.to/shubhamdutta2000/polyfills-for-javascript-a-full-overview-3f7m