JavaScript: ¿Qué hay de nuevo en ES2020?

2020 solamente tiene tres semanas completadas, ¡pero JavaScript ya tiene muchas novedades con ES2020! Tal como comentamos en nuestro artículo sobre las características de ES2019 que deberías probar, las propuestas de ECMAScript seguirían creciendo y darían origen a nuevas implementaciones.

Por todo ello, ya puedes tener acceso a las nuevas características de ECMAScript resumidas en ES2020. Por tanto, para no perder el tren, vale la pena estar informado sobre estas características. ¡Vamos a ello!

Importación dinámica

La Importación dinámica es una de las características más interesantes de ES2020. Es una funcionalidad que puedes utilizar con lazy loading.

Anteriormente si quisieras importar un módulo en JavaScript tendrias algo parecido a lo siguiente:

El problema con esta forma de hacerlo es que se trata de una forma estática de importar tu módulo Math, y no puedes retrasar la carga si quieres que este módulo dependa de una acción del usuario.

Gracias a ES2020, ¡ahora puedes usar lazy loading sin webpack! A partir de este momento puedes usar import como función en cualquier parte de tu código, mediante una función asíncrona que retorna una Promise.

Tu código de arriba, en ES2020 se podría escribir de la siguiente forma:

Navegadores soportados: Chrome 63, Firefox 67, Opera 50, Safari 11.1

BigInt

Representar un número mayor que 2⁵³-1 en JavaScript puede ser un problema, pues es el mayor número que JavaScript puede representar de forma segura usando el objeto Number.

El objeto BigInt es un objeto nativo que te ayuda a representar números mayores que 2^ 53–1. BigInt es interesante, por tanto, si, por ejemplo, quieres hacer una multiplicación de dos números y hay posibilidad de desbordamiento. Como indica en el nombre “Int”, no puedes utilizar BigInt con un número flotante.

Ejemplo

Navegadores soportados: Chrome 67, Firefox 68, Opera 54

Promise.allSettled

El método Promise.allSettled() retorna una promise que resuelve después de que todas las promises o se hayan resuelto, o hayan sido rechazadas, con un vector de objetos describiendo cada uno los resultados de cada promise.

De hecho Promise.allSettled(), se parece a Promise.all(). Pero, como bien recuerdas Promise.all() espera a que se cumplan todas las promises, o se rechace cualquier promise.

Ejemplo

Entornos soportados: Chrome 76, Firefox 71, Safari 13, Node 12.1

globalThis

¡La propiedad globalThis es una buena noticia! globalThis contiene el valor global this según el contexto del objeto global.

Gracias a globalThis ya no tienes que diferenciar si el código se está ejecutando en un navegador (this), o en Node (global).

Ejemplo

Entornos soportados: Chrome 71, Firefox 65, Safari 12.1, Node 12

Conclusión

ES2020 tiene muchas otras características nuevas, interesantes de probar y perfectas para ayudarte a mejorar tu codigo reduciendo la verbosidad. Sin embargo, y como puedes ver en las características que compartimos hoy, no todas ellas son soportadas por todos los navegadores. Sobretodo los navegadores antiguos. Sin embargo siempre vale la pena echar un vistazo, y ir jugando y practicando con ellas, hasta que se hagan estándares.

¿Qué te parece ES2020 y las nuevas características de EMACSCript?

Fuente:

• Recursos para desarrolladores, creados por desarrolladores