¿Qué es un Polyfill?

Un polyfill es un fragmento de código — normalmente JavaScript — que reproduce el comportamiento de una funcionalidad moderna en navegadores que no la soportan de forma nativa. Actúa como un “parche” que rellena el hueco entre lo que el navegador puede hacer y lo que el código necesita.

¿Para qué se utiliza?

Los polyfills se usan para:

• Usar APIs modernas de JavaScript (Promise, fetch, Array.flat) en navegadores antiguos.
• Soportar propiedades CSS nuevas en versiones de navegadores sin soporte nativo.
• Garantizar que una aplicación funcione en un rango amplio de navegadores sin duplicar lógica.
• Mantener una única base de código compatible con entornos distintos.
• Migrar progresivamente a nuevas APIs sin romper usuarios con navegadores desactualizados.

¿Cómo funciona?

Imagina un polyfill como un intérprete en una reunión internacional. El orador habla en un idioma moderno (la API nueva), pero algunos asistentes no lo entienden (navegadores viejos). El intérprete traduce en tiempo real para que todos comprendan lo mismo. El polyfill hace eso: intercepta la llamada a una API que no existe y la “traduce” con código compatible.

Ejemplo: Polyfill manual para Array.prototype.flat

// Comprobamos si el navegador ya lo tiene
if (!Array.prototype.flat) {
  // Si no existe, lo implementamos nosotros
  Array.prototype.flat = function (depth = 1) {
    return depth > 0
      ? this.reduce(
          (acc, val) =>
            Array.isArray(val)
              ? acc.concat(val.flat(depth - 1))
              : acc.concat(val),
          []
        )
      : this.slice();
  };
}

// Ahora funciona en cualquier navegador
const anidado = [1, [2, [3, [4]]]];
console.log(anidado.flat(2)); // [1, 2, 3, [4]]

Ejemplo: Polyfill para fetch con core-js

// Sin polyfill manual — usando una librería
// Instalar: npm install core-js

// En el punto de entrada de la aplicación:
import 'core-js/stable';       // Polyfills para ES estable
import 'regenerator-runtime';  // Para async/await en navegadores viejos

// A partir de aquí puedes usar cualquier API moderna:
const datos = await fetch('/api/usuarios');
const usuarios = await datos.json();

// core-js incluye polyfills para más de 200 características de ECMAScript

---

Con la mejora constante del soporte de navegadores modernos, los polyfills son cada vez menos necesarios. Sin embargo, siguen siendo relevantes en proyectos corporativos con requisitos de compatibilidad estrictos o cuando se trabaja con navegadores embebidos en dispositivos industriales.

---

---