El lenguaje JavaScript evoluciona constantemente. Regularmente aparecen nuevas propuestas para el lenguaje, se analizan y, si se consideran valiosas, se agregan a la lista en https://tc39.github.io/ecma262/ y luego avanzan a la especificación.
Los equipos detrás de los motores JavaScript tienen sus propias ideas sobre qué implementar primero. Es posible que decidan implementar propuestas que están en borrador y posponer cosas que ya están en las especificaciones, porque son menos interesantes o simplemente más difíciles de hacer.
Por eso es bastante común que un motor implemente sólo una parte del estándar.
Una buena página para ver el estado actual del soporte para funciones de lenguaje es https://compat-table.github.io/compat-table/es6/ (es grande, tenemos mucho que estudiar todavía).
Como programadores, nos gustaría utilizar las funciones más recientes. ¡Cuanto más cosas buenas, mejor!
Por otro lado, ¿cómo hacer que nuestro código moderno funcione en motores más antiguos que aún no comprenden las funciones recientes?
Hay dos herramientas para eso:
Transpiladores.
Polirellenos.
Aquí, en este capítulo, nuestro propósito es entender la esencia de cómo funcionan y su lugar en el desarrollo web.
Un transpilador es una pieza de software especial que traduce el código fuente a otro código fuente. Puede analizar (“leer y comprender”) código moderno y reescribirlo utilizando estructuras de sintaxis más antiguas, de modo que también funcione en motores obsoletos.
Por ejemplo, ¿JavaScript antes del año 2020 no tenía el “operador coalescente nulo” ?? . Entonces, si un visitante usa un navegador desactualizado, es posible que no comprenda el código como height = height ?? 100 .
¿Un transpilador analizaría nuestro código y reescribiría height ?? 100 en (height !== undefined && height !== null) ? height : 100 .
// antes de ejecutar el transpilador altura = altura ?? 100; // después de ejecutar el transpilador altura = (altura! == indefinido && altura! == nulo)? altura: 100;
Ahora el código reescrito es adecuado para motores JavaScript más antiguos.
Por lo general, un desarrollador ejecuta el transpilador en su propia computadora y luego implementa el código transpilado en el servidor.
Hablando de nombres, Babel es uno de los transpiladores más destacados que existen.
Los sistemas de creación de proyectos modernos, como webpack, proporcionan un medio para ejecutar un transpilador automáticamente en cada cambio de código, por lo que es muy fácil de integrar en el proceso de desarrollo.
Las nuevas características del lenguaje pueden incluir no sólo operadores y construcciones de sintaxis, sino también funciones integradas.
Por ejemplo, Math.trunc(n) es una función que "corta" la parte decimal de un número, por ejemplo, Math.trunc(1.23) devuelve 1 .
En algunos motores JavaScript (muy obsoletos), no existe Math.trunc , por lo que dicho código fallará.
Como estamos hablando de nuevas funciones, no de cambios de sintaxis, no es necesario transpilar nada aquí. Sólo necesitamos declarar la función que falta.
Un script que actualiza/agrega nuevas funciones se llama "polyfill". "Rellena" el vacío y agrega implementaciones faltantes.
Para este caso particular, el polyfill para Math.trunc es un script que lo implementa, como este:
if (!Math.trunc) { // si no existe tal función
// implementarlo
Math.trunc = función (número) {
// Math.ceil y Math.floor existen incluso en motores JavaScript antiguos
// se tratan más adelante en el tutorial
número de retorno <0? Math.ceil(número): Math.floor(número);
};
}JavaScript es un lenguaje altamente dinámico. Los scripts pueden agregar/modificar cualquier función, incluso las integradas.
Dos bibliotecas de polyfill interesantes son:
core js que admite muchas cosas, permite incluir solo las funciones necesarias.
En este capítulo nos gustaría motivarlo a estudiar las características del lenguaje moderno e incluso "de última generación", incluso si aún no son compatibles con los motores JavaScript.
Simplemente no olvide usar un transpilador (si usa sintaxis u operadores modernos) y polyfills (para agregar funciones que puedan faltar). Se asegurarán de que el código funcione.
Por ejemplo, más adelante, cuando esté familiarizado con JavaScript, podrá configurar un sistema de creación de código basado en el paquete web con el complemento babel-loader.
Buenos recursos que muestran el estado actual de soporte para varias funciones:
https://compat-table.github.io/compat-table/es6/ – para JavaScript puro.
https://caniuse.com/ – para funciones relacionadas con el navegador.
PD: Google Chrome suele ser el más actualizado en cuanto a funciones de idioma; pruébelo si falla una demostración tutorial. Sin embargo, la mayoría de las demostraciones tutoriales funcionan con cualquier navegador moderno.