Desde 2015 con la publicación del estándar ES6, Javascript ha recibido actualizaciones a un ritmo vertiginoso. ¿El resultado? JS es ahora uno de los lenguajes de programación más modernos y versátiles.

Las prácticas arrow functions, las técnicas de destructuring, o los operadores async / await son algunas de las novedades que se incorporaron hasta 2017.

Javascript ES2018

En este artículo voy a detallarte las novedades más interesantes de Javascript, incorporadas en 2018.

1 – Asignación por destructuring en Objetos

ES6 incorporaba el spread operator y los parámetros rest para hacer asignaciones por destructuring con Arrays.

Esto permitía 2 cosas:

• Asignar un subarray de elementos a una única variable
• Y descomponer un array en valores individuales.

  Funcionaba así:

// Rest elements for array destructuring assignment:
const primes = [2, 3, 5, 7, 11];
const [first, second, ...rest] = primes;
console.log(first); // 2
console.log(second); // 3
console.log(rest); // [5, 7, 11]

// Spread elements for array literals:
const primes2 = [first, second, ...rest];
console.log(primes2); // [2, 3, 5, 7, 11]

Pues bien, desde 2018, se pueden aplicar los mismos operadores de forma análoga a los objetos. Así:

// Rest properties for object destructuring assignment:
const person = {
    firstName: 'Peter',
    lastName: 'Parker',
    age: 26,
} 
const { age, ...name } = person;
console.log(age); // 26
console.log(name); // {firstName: 'Peter', lastName: 'Parker'}

// Spread properties for object literals:
const person2 = { age, ...name };
console.log(person2);
// {age: 26, firstName: "Peter", lastName: "Parker"}

¿Y de qué sirve esto?
Aquí tienes algunas situaciones en las que te va a ser útil:

• Clonación de objetos:
  Es una forma bastante más simple de clonar objetos planos que su alternativa (Object.assign({})).
  Ejemplo:

// Shallow-clone an object:
const data = { x: 42, y: 27, label: 'Treasure' };
// Antes:
const clone1 = Object.assign({}, data);
// Ahora:
const clone2 = { ...data };

• Merge de objetos:
  Del mismo modo, te facilita la fusión entre 2 objetos
  Ejemplo:

// Merge two objects:
const defaultSettings = { logWarnings: false, logErrors: false };
const userSettings = { logErrors: true };

// Antes
const settings1 = Object.assign({}, defaultSettings, userSettings);

// Ahora
const settings2 = { ...defaultSettings, ...userSettings };

// En ambos casos el resultado es
// { logWarnings: false, logErrors: true }

• Deshacerte de parte de un objeto:
  A veces necesitas una versión «reducida» de un objeto, porque no te interesa exponer alguna propiedad.

Esto es extremadamente simple ahora:

const person = {
    name: 'Peter',
    age: 26,
    gender: 'Male',
    email: 'private@email.com',
    address: 'private address 25, 08180, Somewhere.'
} 
const { email, address, ...simplePerson } = person;

console.log(simplePerson); //{name: "Peter", age: 26, gender: "Male"}

2 – finally en Promises

Otra incorporación de ES6 fueron las Promises: Un mecanismo para ejecutar tareas asíncronas, y llamar una función de callback en caso de éxito (resolve) o error (reject).

Pues bien, desde 2018 las Promises te permiten llamar a una función de callback al completarse (independientemente del resultado). A continuación te dejo un ejemplo claro de uso:

const fetchAndDisplay = ({ url, element }) => {
  showLoadingSpinner();
  fetch(url)
    .then((response) => response.text())
    .then((text) => {
       element.textContent = text;
    })
    .catch((error) => {
       element.textContent = error.message;    
    })
    .finally(() => {
       hideLoadingSpinner();
    });
};

3 – Iteradores asíncronos

Un iterador es un contenedor de elementos que se puede recorrer sin conocer su arquitectura, solo llamando a su método next().

En Javascript, existían los iteradores síncronos, donde este método devolvía dos valores:

• value con el elemento actual del contenedor
• y done indicando si el iterador ha finalizado o no.

Supongamos un iterador que contiene el array [1,2,3]. Obtendríamos sus valores así:

syncIterator.next();
//{value:1, done:false} 
syncIterator.next();
//{value:2, done:false} 
syncIterator.next();
//{value:3, done:false} 
syncIterator.next();
//{value:undefined, done:true} 

Además, puedes usar for..of para iterarlo (devuelve directamente el valor de cada iteración y finaliza internamente cuando done es true):

for (let value of syncIterator) {
    console.log(value);
} // output: 1, 2, 3

Desde 2018, Javascript acepta también iteradores que devuelven valores asíncronos. Cada llamada a next, en este caso, lo que devuelve es una Promise, así que para capturar el siguiente valor de la iteración, lo harías así:

asyncIterator.next().then(({ value, done }) => /* ...do something with value and done... */);

Buclando sobre Iteradores asíncronos

Junto con los iteradores asíncronos, se ha incorporado también la sintaxis for-await-of para recorrerlos.
Imagina un iterador que lee un archivo (de forma asíncrona como es habitual) línea a línea. Podríamos recorrer y printar todas las líneas, así:

for await (const line of readLines(filePath)) {
  console.log(line);
}

4 – Mejoras en las expresiones regulares

Se han añadido varias mejoras al sistema de expresiones regulares de Javascript. Entre otras cosas…

Named capture groups

Ahora se pueden identificar grupos de captura a través de nombres, lo que facilita su lectura. Por ejemplo:

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
let result = re.exec('2015-01-02');
// result.groups.year === '2015';
// result.groups.month === '01';
// result.groups.day === '02';

Lookbehind assertions

Hasta el momento, las expresiones regulares de JS tenían un mecanismo para comprobar si una expresión iba seguida de un determinado patrón (lookahead: ?=pattern).

Por ejemplo, la siguiente expresión : /^([0-9]{2})(?=H)/ daría positivo para números de 2 cifras seguidos de la letra H (sin incluirla en el match).

const regex = /^([0-9]{2})(?=H)/;
regex.exec('12H');
// encuentra 12 como match.

Lo que no había es un mecanismo para comprobar si la expresión estaba precedida de un determinado patrón. Esto es lo que llamamos lookbehind (?<=pattern). Para comprobar si una cantidad monetaria esta precedida por el símbolo del €, podríamos hacerlo así:

const regex = /(?<=€)([0-9])+/;
regex.test('€2000');
// encuentra 2000 como coincidencia

Reflexiones personales

Como ves, JS no para de evolucionar. Cada año se incorporan novedades para facilitar el trabajo de los desarrolladores y adaptar el lenguaje a las necesidades que se detectan. En próximos posts te contaré las novedades que se han añadido este año 2019, y lo que se espera para 2020.

¿Te ha gustado este artículo? No te cortes, déjame un comentario y ayúdame a compartirlo 😉