Novedades de ES8 en JavaScript

Las nuevas características de ES8 introdujo mejoras para el desarrollo en JavaScript sea más eficiente y limpio. Sin más que decir, te enseñaré estas novedades con ejemplos prácticos y sencillos.

Async/Await

Esta es una de las características más importante de ES8. Async/Await simplifica el manejo de operaciones asíncronas, haciéndolas parecer síncronas.

Anteriormente, para hacer una promesa, y sin uso de fetch, se utilizaba Promise:

// Usando promesas tradicionales

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Datos recibidos"), 2000);
    });
}

fetchData()
    .then(data => console.log(data))
    .catch(error => console.error(error));

Y ahora, con Async/Await:

// Usando Async/Await

async function fetchData() {
  try {
    const response = await fetch('<https://api.example.com/data>');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

En este ejemplo, async declara una función asíncrona, y await pausa la ejecución hasta que la promesa se resuelve. Lo mejor de todo, es su sintaxis limpia y fácil de leer para trabajar con promesas. O sea, una manera aesthetic de resolver promesas.

Aquí hay algunos puntos clave sobre async/await:

• Función async: Una función async siempre devuelve una promesa. Si la función retorna un valor, se resolverá con ese valor. De lo contrario, se lanza una excepción y será rechazada.
• Operador await: Solo puede usarse dentro de funciones async. Pausa la ejecución de la función hasta que la promesa se resuelva, y luego retorna el valor resuelto.
• Manejo de errores: Puedes usar try/catch para manejar errores en código asíncrono. Esto hace que el manejo de errores sea más similar al código síncrono.

Aquí hay otro ejemplo más detallado y utilizando en ambos casos fetch:

// Usando promesas tradicionales
function obtenerDatosUsuario(id) {
  return fetch(`https://api.ejemplo.com/usuarios/${id}`)
    .then(response => response.json())
    .then(usuario => {
      return fetch(`https://api.ejemplo.com/posts?userId=${usuario.id}`)
    })
    .then(response => response.json())
    .then(posts => console.log(posts))
    .catch(error => console.error('Error:', error));
}

// Usando async/await
async function obtenerDatosUsuarioAsync(id) {
  try {
    const respuestaUsuario = await fetch(`https://api.ejemplo.com/usuarios/${id}`);
    const usuario = await respuestaUsuario.json();
    const respuestaPosts = await fetch(`https://api.ejemplo.com/posts?userId=${usuario.id}`);
    const posts = await respuestaPosts.json();
    console.log(posts);
  } catch (error) {
    console.error('Error:', error);
  }
}

Object.entries() y Object.values()

Estas nuevas funciones facilitan el trabajo con objetos:

const usuario = {
  nombre: "Ana",
  edad: 28,
  ciudad: "Madrid"
};

console.log(Object.entries(usuario));
// [["nombre", "Ana"], ["edad", 28], ["ciudad", "Madrid"]]

console.log(Object.values(usuario));
// ["Ana", 28, "Madrid"]

Object.entries() convierte un objeto en un array de pares clave-valor, mientras que Object.values() devuelve un array con solo los valores.

String padding

padStart() y padEnd() le añade caracteres al inicio o final de una cadena hasta alcanzar una longitud determinada:

console.log('123'.padStart(5, '0'));  // "00123"

console.log('abc'.padEnd(6, '-'));    // "abc---"

Esto es útil para formatear números, alinear texto, etc. Y solo buscas trabajar con JS.

Trailing commas en funciones

Y el ultimo, pero no menos importante, Trailing Commas en funciones.

Trailing Commas permite el uso de comas finales en listas de parámetros. También permite comas finales en literales de objetos. Esto facilita la edición del código, sin causar errores.

Ejemplo:

const colores = [
    "rojo",
    "verde",
    "azul", // Coma final permitida
];

function sumar(a, b, c,) {
    return a + b + c;
}
console.log(sumar(1, 2, 3,)); // 6

Esto facilita la adición o eliminación de parámetros y mejora la legibilidad en control de versiones.

Conclusión

Estas características de ES8 hacen que JavaScript sea más potente y fácil de usar. Ya sea que estés empezando o seas un desarrollador experimentado. Incorporar estas funciones en tu código puede mejorar significativamente tu productividad. También mejora la calidad de tu código.

---

👨‍💻 Frontend Developer | 🌱 Personal Growth | 💙 Tech Lover | 🔥 Hacking your limits

Sigueme en mis redes sociales para más contenido

• Facebook
• Twitter
• Instagram
• LinkedIn
• GitHub

---