Buenas noticias: ¡las nuevas funciones de ES2020 ya están finalizadas! Esto significa que ahora tenemos una idea completa de los cambios que se están produciendo en ES2020, la nueva y mejorada especificación de JavaScript. Así que veamos cuáles son esos cambios.
# 1: BigInt
BigInt, una de las características más esperadas en JavaScript, finalmente está aquí. De hecho, permite a los desarrolladores tener una representación de números enteros mucho mayor en su código JS para el procesamiento de datos para el manejo de datos.
Por el momento, el número máximo que puede almacenar como entero en JavaScript es pow(2, 53) - 1. Pero BigInt en realidad te permite ir más allá de eso.
Sin embargo, debe nagregar un al final del número, como puede ver arriba. Esto ndenota que se trata de un BigInt y debe ser tratado de manera diferente por el motor de JavaScript (por el motor v8 o cualquier motor que esté usando).
Esta mejora no es compatible con versiones anteriores porque el sistema numérico tradicional es IEEE754 (que simplemente no puede admitir números de este tamaño).
# 2: importación dinámica
Las importaciones dinámicas en JavaScript le dan la opción de importar archivos JS de forma dinámica como módulos en su aplicación de forma nativa. Así es como lo haces con Webpack y Babel en este momento.
Esta función lo ayudará a enviar código de solicitud bajo demanda, mejor conocido como división de código, sin la sobrecarga de paquete web u otros paquetes de módulos. También puede cargar código condicionalmente en un bloque if-else si lo desea.
Lo bueno es que realmente importa un módulo, por lo que nunca contamina el espacio de nombres global.
# 3: fusión nula
La fusión nula agrega la capacidad de verificar realmente los nullishvalores en lugar de los falseyvalores. ¿Cuál es la diferencia entre valores nullishy falsey, podría preguntar?
En JavaScript, una gran cantidad de valores son falsey, al igual que las cadenas vacías, el número 0, undefined, null, false, NaN, y así sucesivamente.
Sin embargo, muchas veces es posible que desee verificar si una variable es nula, es decir, si es undefinedo null, como cuando está bien que una variable tenga una cadena vacía o incluso un valor falso.
En ese caso, utilizará el nuevo operador de fusión nula, ??
Puede ver claramente cómo el operador OR siempre devuelve un valor verdadero, mientras que el operador nulo devuelve un valor no nulo.
# 4: encadenamiento opcional
La sintaxis de encadenamiento opcional le permite acceder a propiedades de objetos profundamente anidados sin preocuparse de si la propiedad existe o no. Si existe, ¡genial! Si no, undefinedserá devuelto.
Esto no solo funciona en las propiedades de los objetos, sino también en las llamadas a funciones y las matrices. ¡Súper conveniente! He aquí un ejemplo:
# 5: Promesa.todos resueltos
El Promise.allSettledmétodo acepta una serie de promesas y solo se resuelve cuando todas están resueltas, ya sea resueltas o rechazadas.
Esto no estaba disponible de forma nativa antes, a pesar de que algunas implementaciones cercanas como racey allestaban disponibles. Esto trae "Simplemente ejecute todas las promesas, no me importan los resultados" de forma nativa en JavaScript.
# 6: String # matchAll
matchAlles un nuevo método agregado al Stringprototipo que está relacionado con las expresiones regulares. Esto devuelve un iterador que devuelve todos los grupos coincidentes uno tras otro. Echemos un vistazo a un ejemplo rápido:
# 7: globalThis
Si escribiera algún código JS multiplataforma que pudiera ejecutarse en Node, en el entorno del navegador y también dentro de los trabajadores web, le resultaría difícil conseguir el objeto global.
Esto se debe a que es windowpara navegadores, globalpara Node y selfpara trabajadores web. Si hay más tiempos de ejecución, el objeto global también será diferente para ellos.
Por lo tanto, habría tenido que tener su propia implementación para detectar el tiempo de ejecución y luego usar el global correcto, es decir, hasta ahora.
ES2020 nos trae lo globalThisque siempre se refiere al objeto global, sin importar dónde estés ejecutando tu código:
# 8: Exportaciones del espacio de nombres del módulo
En los módulos de JavaScript, ya era posible utilizar la siguiente sintaxis:
import * as utils from './utils.mjs'Sin embargo, no exportexistía una sintaxis simétrica , hasta ahora:
export * as utils from './utils.mjs'Esto es equivalente a lo siguiente:
import * as utils from './utils.mjs' export { utils }# 9: orden de entrada bien definido
La especificación ECMA no especifica en qué orden for (x in y) debe ejecutarse. Aunque los navegadores implementaron un orden consistente por sí mismos antes de ahora, esto se ha estandarizado oficialmente en ES2020.
# 10: import.meta
El import.metaobjeto fue creado por la implementación de ECMAScript, con un nullprototipo.
Considere un módulo module.js:
Puede acceder a la metainformación sobre el módulo utilizando el import.metaobjeto:
console.log(import.meta); // { url: "file:///home/user/module.js" }Devuelve un objeto con una urlpropiedad que indica la URL base del módulo. Esta será la URL de la que se obtuvo la secuencia de comandos (para secuencias de comandos externas) o la URL base del documento que lo contiene (para secuencias de comandos en línea).
Conclusión
Me encanta la consistencia y la velocidad con la que la comunidad de JavaScript ha evolucionado y está evolucionando. Es asombroso y verdaderamente maravilloso ver cómo JavaScript vino de un lenguaje que fue abucheado hace 10 años a uno de los lenguajes más fuertes, flexibles y versátiles de todos los tiempos en la actualidad.
¿Desea aprender JavaScript y otros lenguajes de programación de una manera completamente nueva? ¡Dirígete a una nueva plataforma para desarrolladores en la que estoy trabajando para probarla hoy!
¿Cuál es tu característica favorita de ES2020? ¡Cuéntame al tuitear y conectarte conmigo en Twitter e Instagram!
Esta es una publicación de blog compuesta por mi video que trata sobre el mismo tema. ¡Significaría muchísimo para mí si pudieras mostrarle un poco de amor!