Conozca las nuevas funciones de JavaScript en ES2020

Introducción

En este artículo, aprenderá sobre las nuevas funciones de JavaScript que se lanzaron en la actualización más reciente, ES2020. Las funciones como la fusión nula y los operadores de cadena opcionales ayudan a definir la sintaxis de JavaScript, mientras que la importación dinámica mantiene el código modular.

Variables de clase privadas

Las clases contienen propiedades que puedes emplear en módulos reutilizables. Si reutilizas esas propiedades en varios archivos, es posible que no quieras que todo esté disponible globalmente.

Para resolver esto, una variable de clase privada reserva propiedades y métodos para su uso dentro de una clase. Un símbolo de almohadilla delante de la propiedad y el método denota la variable de clase privada.

class Message {  #message = "Howdy";  greet() {     console.log(this.#message);   };}; const greeting = new Message()greeting.greet() // Howdyconsole.log(greeting.#message) // #message is not defined

Tenga en cuenta que al invocar un greetmétodo fuera de la clase se devuelve un valor. Al console.loginvocar una propiedad privada se devuelve un error.

Promise.allSettled()

Cuando se trabaja con múltiples promesas, especialmente cuando dependen unas de otras, puede ser útil registrar cada proceso para depurar errores.

Con Promise.allSettled(), puedes crear una nueva promesa que regresa cuando las promesas pasadas como argumentos se han resuelto:

const p1 = new Promise((res, rej) = setTimeout(res, 1000));const p2 = new Promise((res, rej) = setTimeout(rej, 1000));Promise.allSettled([p1, p2]).then(data = console.log(data));

Esto generará una matriz de objetos con un estado y un valor en cada promesa:

Output[   Object { status: "fulfilled", value: undefined},   Object { status: "rejected", reason: undefined}]

Aquí, Promise.allSettled()se proporciona una matriz con el estado y el valor de las p1promesas p2.

Operador de coalescencia nula

Como JavaScript tiene tipos flexibles, tenga en cuenta los valores verdaderos y falsos al asignar variables. Si tiene un objeto con datos, es posible que desee permitir valores falsos, como una cadena vacía o el número 0.

El operador de fusión nula ( ??) identifica y devuelve valores falsos cuando el operando izquierdo no es nullo undefined.

let person = {  profile: {    name: "",    age: 0  }};console.log(person.profile.name || "Anonymous"); // Anonymousconsole.log(person.profile.age || 18); // 18

Por el contrario, tenga en cuenta que el operador OR ( ||) devuelve el operando derecho si el izquierdo es falso.

console.log(person.profile.name ?? "Anonymous"); // ""console.log(person.profile.age ?? 18); // 0

En cambio, el operador de coalescencia nula devuelve valores falsos ya que ni las propiedades namey son ni .agenullundefined

Operador de encadenamiento opcional

Otra forma de interactuar con valores falsos es con el operador de encadenamiento opcional ( ?.). Si una referencia es nula, el operador proporcionará una forma de acceder a propiedades no definidas dentro de los objetos.

let person = {};console.log(person.profile.name ?? "Anonymous"); // person.profile is not definedconsole.log(person?.profile?.name ?? "Anonymous"); // no error console.log(person?.profile?.age ?? 18); // no error

En lugar de generar un error, el operador de encadenamiento opcional le permite interactuar con propiedades que evalúan como undefined.

Nota: consulte esta publicación para obtener más información sobre encadenamiento opcional y coalescencia nula .

BigInt

El número más grande que JavaScript puede manejar es 2^53, que puedes verificar con la propiedad MAX_SAFE_INTEGER.

const max = Number.MAX_SAFE_INTEGER;console.log(max); // 9007199254740991

Cualquier número superior al valor de la maxvariable puede no seguir siendo confiable:

console.log(max + 1); // 9007199254740992console.log(max + 2); // 9007199254740992console.log(max + 3); // 9007199254740994console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true

Con el objeto incorporado BigInt, agregue nal final de cada entero grande para sus cálculos. BigIntLos números solo se pueden calcular con otros BigIntdígitos.

const bigNum = 100000000000000000000000000000n;console.log(bigNum * 2n); // 200000000000000000000000000000n

El BigIntvalor de bigNumse multiplica por 2npara producir 200000000000000000000000000000n.

Importación dinámica

Si tuviera un archivo de funciones de utilidad, es posible que no las use todas y que importar sus dependencias sea un desperdicio de recursos. Ahora async/await incluye una funcionalidad adicional para importar sus dependencias cuando sea necesario.

A continuación se muestra un ejemplo de una función de utilidad en un math.jsarchivo:

matemáticas.js

const add = (num1, num2) = num1 + num2;export { add };

A continuación se muestra un ejemplo de un index.jsarchivo que utiliza la función de utilidad:

índice.js

const doMath = async (num1, num2) = {  if (num1  num2) {    const math = await import('./math.js');    console.log(math.add(5, 10));  };};doMath(4, 2);

En index.js, la awaitexpresión ahora puede manejar una importación math.jsy usar la lógica contenida en el archivo.

Conclusión

Con cada actualización de JavaScript, las nuevas características agregan funcionalidad dinámica, propiedades definidas y un mayor rendimiento a partir de los comentarios de sus desarrolladores y la comunidad.