Nuevas funciones de JavaScript ES10/ES2019

Echemos un vistazo a las nuevas características de ES10/ECMAScript 2019 que fueron aprobadas por TC39

· 3 min de lectura
Nuevas funciones de JavaScript ES10/ES2019

Cada año se publica una nueva versión de ECMAScript basada en las propuestas que han sido aceptadas por el comité TC39.

Object.fromEntries()

En versiones anteriores de ECMAScript, puede utilizar el metodo  Object.entries() devuelve una matriz de pares propios de una propiedad enumerable [key, value] de un objeto. Pero ahora puede simplemente revertir el proceso usando Object.fromEntries(). Esto devolverá un nuevo objeto instantáneamente con la clave y los valores. Lea la siguiente Documentación.

const persona = {
  nombre: 'GodoFredo',
  edad: '11',
  pais: 'Peru'
}

/* se crea una entrada */
const entry = Object.entries(persona);

/* esto revertirá la entrada */
const reverseEntry = Object.fromEntries(entry);

trimStart() y trimEnd()

String.prototype.trimStart() — Ya tenemos una característica trim() que nos ayuda a evitar los espacios en blanco en una cadena (string). Con los nuevos trimStart() y trimEnd(), puedes elegir qué parte de la cadena tienes que evitar.

const saludo = '       Hola Mundo     ';

console.log(saludo);
// "       Hola Mundo     "

console.log(saludo.trimStart());
// "Hola Mundo     "

console.log(saludo.trimEnd());
// "       Hola Mundo"

console.log(saludo.trim());
// "Hola Mundo"

JSON.stringify

Convierte un objeto o valor de JavaScript en una cadena de texto JSON, opcionalmente reemplaza valores si se indica una función de reemplazo, o si se especifican las propiedades mediante un array de reemplazo.

const cord = {
  x: 5,
  y: 6
}

const cordStringify = JSON.stringify(cord);

console.log(cordStringify);
// "{\"x\":5,\"y\":6}"

Se ha presentado una nueva propuesta Well-formed JSON.stringify para evitar que JSON.stringify devuelva cadenas mal formadas de Unicode. La solución propuesta es representar los puntos de código sustituto no apareados como secuencias de escape JSON en lugar de devolverlos como unidades de código UTF-16 únicas.

JSON.stringify('\uDF06\uD834'); // "\udf06\ud834"
JSON.stringify('\uDEAD'); // "\udead"

Array.prototype.flat()

Como su nombre indica, el método flat() devuelve un nuevo array que es una versión aplastada del array en el que fue llamado. Por defecto tiene el argumento 1 si no se especifica un valor, De lo contrario, si se pasa un número como primer argumento, se usa como la profundidad máxima para aplanar el array.

const animals = [['?', '?'], ['?', '?']];

const flatAnimals = animals.flat();
// es lo mismo: const flatAnimals = animals.flat(1);

console.log(flatAnimals);

// ['?', '?', '?', '?']

Y observe lo que sucede cuando la profundidad total del array es mayor que la profundidad máxima para el método flat:

const animals = [['?', '?'], ['?', '?', ['?',['?'], '?']]];

const flatAnimals = animals.flat(2);

console.log(flatAnimals);
// ['?', '?', '?', '?', '?',['?'], '?']

Al pasar Infinity como un parámetro dentro del flat() se ejecutará recursivamente infinitas veces y aplanará el array a un solo array.

const animals = [['?', '?'], ['?', '?', ['?',['?'], '?']]];

const flatAnimals = animals.flat(Infinity);

console.log(flatAnimals);
// ['?', '?', '?', '?', '?', '?', '?']
El método flat() crea una nueva matriz con todos los elementos de sub-array concatenados recursivamente hasta la profundidad especificada.

Array.prototype.flatMap()

Esto es algo similar Array.prototype.Map() pero ligeramente diferente. flatMap() asigna cada valor a un nuevo valor y entonces la matriz resultante se aplana hasta una profundidad máxima de 1.

const animals = ['?', '?', '?', '?'];
const noises = ['woof', 'meow', 'baa', 'mooo'];

const mappedOnly = animals.map((animal, index) => [animal, noises[index]]);
const mappedAndFlatten = animals.flatMap((animal, index) => [animal, noises[index]]);

console.log(mappedOnly);
// [['?', 'woof'], ['?', 'meow'], ['?', 'baa'], ['?', 'mooo']

console.log(mappedAndFlatten);
// ['?', 'woof', '?', 'meow', '?', 'baa', '?', 'mooo']

Try/Catch

La declaración try consiste en un bloque try que contiene una o más sentencias (se debe usar siempre {} incluso para una sola sentencia) y al menos una cláusula catch o una cláusula finally, o bien ambas. Esto nos da tres formas posibles para la declaración try:

  1. try...catch
  2. try...finally
  3. try...catch...finally

Se ha presentado una nueva propuesta Try/Catch Binding, con esta propuesta permite omitir el enlace y los paréntesis que lo rodean. Esto se ha modificado en la nueva propuesta y podemos usar el try/catch como se indica a continuación:

try {
   throw new Error('Soy un error');
} catch {
   console.log('Sé que eres un error');
}

Function.prototype.toString()

En versiones anteriores de ECMAScript, puede imprimir el código fuente de una función utilizando toString(), pero existe el inconveniente de que elimina todos los espacios en blanco y comentarios adicionales. En la nueva propuesta se ha mantenido.

function /* Adds numbers */  addNumbers (x) {
  let y = x + 5;
  return y;
}

console.log(addNumbers.toString())

// function /* Adds numbers */  addNumbers (x) {
//  let y = x + 5;
//  return y;
// }

Symbol.prototype.description

Cuando crea un símbolo, puede especificar una descripción para el símbolo con fines de depuración.

Al crear un símbolo a través de la función de fábrica Symbol(), puede proporcionar opcionalmente una cadena como descripción, a través de un parámetro:

const myDescription = Symbol('description');

Hasta hace poco, la única forma de acceder a la descripción era convirtiendo el símbolo en una cadena.

La propuesta introduce al captador Symbol.prototype.description para acceder directamente a la descripción:

const myDescription = 'description';
const symbol = Symbol(myDescription);

console.log(symbol.description == myDescription);
// true

— Source: