Desde el lanzamiento del estándar ECMAScript 2015 (también llamado ES6), JavaScript ha cambiado y mejorado seriamente. Esta es una muy buena noticia para todos los desarrolladores de JS. Además, ahora se lanza una nueva versión de ECMAScript cada año. Quizás no prestó mucha atención a lo que apareció en la última versión del estándar, que se lanzó en junio de 2019. El autor del artículo, cuya traducción publicamos hoy, quiere contar en pocas palabras sobre las innovaciones de JavaScript y sobre lo que se puede esperar en la próxima versión del estándar ECMAScript.
Aquí se mencionarán las oportunidades cuyas propuestas se encuentran en la tercera etapa de aprobación (Etapa 3). Esto significa que es probable que aparezcan en la próxima versión del estándar ECMAScript, pero esto no puede confirmarse con absoluta certeza.
Aquí hay un repositorio donde puede encontrar información sobre propuestas que se encuentran en diferentes etapas de aprobación.
Características ECMAScript 2019 (ES10)
El estándar ES10 tiene
muchas características nuevas. Aquí consideraremos solo algunos de ellos. A saber, un par de nuevos métodos de matriz.
▍ Método Array.prototype.flat
Este método le permite hacer matrices, que incluyen otras matrices, más "planas", "comprimiéndolas" a un nivel de profundidad dado.
const array = [1, 2, [3, 4]]; array.flat();
Esta es una característica muy útil, especialmente en los casos en que necesita trabajar con matrices anidadas. Si la profundidad de anidamiento de las matrices en la estructura de datos excede 1, entonces una sola llamada al método
flat no puede hacer que la matriz sea completamente "plana". Este método acepta una
depth parámetro opcional, que le permite especificar cuántos niveles de anidamiento se debe reducir la dimensión de la matriz procesada.
Cuanto más profunda sea la matriz, más recursos informáticos se necesitarán para procesarla. Tenga en cuenta que IE y Edge no son compatibles con esta función.
Method Método Array.prototype.flatMap
Este método primero procesa los elementos de la matriz utilizando la función que se le pasa y luego convierte la matriz en una estructura plana.
const arr = ["it's Sunny in", "", "California"]; arr.flatMap(x => x.split(" "));
La diferencia entre
flat y
flatMap es que puede pasar su propia función al método
flatMap que convierte los elementos de la matriz original. Además de esto,
flatMap , a diferencia de
flat , "eleva" los elementos de los arrays solo 1 nivel. Este método devuelve una nueva matriz. Puede ser útil en aquellos casos en que, antes de que una determinada matriz sea "plana", de alguna manera necesita procesar sus elementos.
Nuevas características de JS en la aprobación de la etapa 3
En la tercera etapa de coordinación, hay muchas nuevas propuestas interesantes para expandir y mejorar el lenguaje. Consideremos algunos de ellos.
▍ Separadores de dígitos numéricos
Te sucedió: ¿escribir un número largo en una variable y dudar de su ortografía correcta? La oración en cuestión nos permite separar los bits de números con guiones bajos. Esto facilita trabajar con números.
1_000_000_000
Cada desarrollador, después de aceptar esta función, decidirá por sí mismo si usar separadores de descarga o no. Pero una cosa es segura: esta característica puede reducir los inconvenientes asociados con el cálculo de los dígitos de números grandes.
▍Usando espera en el nivel superior del código
El uso de la palabra clave
await en el nivel superior del código permite que los módulos actúen como grandes funciones asincrónicas. Debido a esta característica, los módulos ECMAScript pueden esperar que aparezcan algunos recursos. Esto lleva al hecho de que otros módulos que los importen esperarán hasta que el cuerpo de los módulos importados esté listo para trabajar.
La razón de esta característica es que cuando se importa un módulo que tiene una función declarada con la
async , el resultado de esta función será
undefined .
El siguiente ejemplo muestra dos archivos. Puede quedar
undefined en la
output si se llama a la función antes de que se completen las tareas representadas por las promesas.
Todo se detendrá en el
awaiting.js hasta que las
awaiting.js se resuelvan en awaiting.js.
▍Operador ?? y comprobando valores solo en valores nulos e indefinidos
Quizás, entre todas las ofertas de la Etapa 3, esta sea la más útil. A menudo tenemos que escribir algo como esto:
const obj = { name: 'James' }; const name = obj.name || 'Jane';
Si
obj.name está representado por algún valor falso, entonces la cadena
Jane pone en
name . Como resultado, el
name no será algo
undefined . Pero el problema es que una cadena vacía en este caso se percibirá como un valor falso. Si esto se tiene en cuenta, este código debe reescribirse de la siguiente manera:
const name = (obj.name && obj.name !== '') || 'Jane';
Es inconveniente escribir constantemente así. Operador
?? (dos signos de interrogación) permite verificar solo valores
null e
undefined :
const response = { settings: { nullValue: null, height: 400, animationDuration: 0, headerText: '', showSplashScreen: false } }; const undefinedValue = response.settings.undefinedValue ?? 'some other default';
¿Operador? y cadenas opcionales
Esta sugerencia es cercana a la que se acaba de revisar, combinando controles
null e
undefined . Se sabe que los usuarios de TypeScript
están interesados en esta característica.
Considere un ejemplo:
const city = country && country.city;
Para llegar a la propiedad de la
city de un objeto de
country , debe verificar la existencia del objeto de
country y la existencia de la propiedad de la
city en él.
Al usar el operador
?. (signo de interrogación y punto) este código puede convertirse así:
const city = country?.city;
Esta característica parece útil en tales situaciones:
import { fetch } from '../yourFetch.js'; (async () => { const res = await fetch();
▍ Método Promesa.any
El método
Promise.any acepta un objeto
Promise.any que contiene objetos de promesa y devuelve una promesa que se resuelve con éxito cuando al menos uno de los objetos de promesa que se le pasa se resuelve con éxito. Si se rechazan todos los objetos de promesa, devuelve una matriz que contiene información sobre los motivos de su rechazo.
Así es como se usa
Promise.any con la construcción async /
Promise.any :
try { const first = await Promise.any(promises);
Aquí está lo mismo implementado usando promesas:
Promise.any(promises).then( (first) => {
JavaScript ya tiene los
Promise.all ,
.allSettled ,
.race , pero un método similar.
any , no lo fue. Como resultado, tenemos una nueva oportunidad que complementa las existentes y puede resultar útil en ciertas situaciones. A pesar de que esta
propuesta ya se
encuentra en la tercera etapa de aprobación, es posible que no se incluya en la próxima edición del estándar ECMAScript, ya que necesita pruebas adicionales.
Resumen
Hay muchas sugerencias interesantes para desarrollar JavaScript que se encuentran en la tercera etapa de aprobación. Será interesante verlos en los estándares ES11 y ES12. Por supuesto, es poco probable que alguien los use a todos, pero algunos de ellos definitivamente encontrarán una amplia aplicación y contribuirán al crecimiento de la calidad del código JS.
Estimados lectores! ¿Ya está utilizando alguna función de JavaScript que está casi lista para ser incluida en la próxima versión del estándar?
