Template Literals y Destructuring

ES6 (también llamado ES2015) fue la actualización más grande de JavaScript desde su creación. Introdujo const/let, arrow functions, clases, módulos, promesas, template literals, destructuring, spread operator y mucho más. Dividió la historia de JavaScript en "antes" y "después".

Los template literals usan comillas invertidas (`) en lugar de comillas normales y permiten insertar variables con ${}. Antes tenías que concatenar con +, lo cual era propenso a errores. Con template literals el código se lee casi como lenguaje natural.

La desestructuración (destructuring) permite extraer valores de arrays u objetos en variables con una sintaxis compacta. En lugar de tres líneas asignando propiedad por propiedad, una sola línea hace lo mismo. Es especialmente útil al recibir datos de una API o al definir parámetros de funciones.

// Template literals - usa backticks `
const nombre = "Ana";
const edad = 25;
const mensaje = `Hola, soy ${nombre} y tengo ${edad} años`;

// Multilínea (antes necesitabas \n)
const html = `
  <div>
    <h1>${nombre}</h1>
    <p>Edad: ${edad}</p>
  </div>
`;

// Expresiones dentro de ${}
const precio = 100;
console.log(`Total con IVA: $${precio * 1.16}`);

// Destructuring de arrays
const [primero, segundo, ...resto] = [1, 2, 3, 4, 5];
console.log(primero); // 1
console.log(resto);   // [3, 4, 5]

// Destructuring de objetos con renombrado
const usuario = { id: 1, nombre: "Luis", rol: "admin" };
const { nombre: nombreUsuario, rol } = usuario;
console.log(nombreUsuario); // "Luis"

// Destructuring en parámetros de función
function mostrar({ nombre, edad = 0 }) {
  console.log(`${nombre} tiene ${edad} años`);
}
mostrar({ nombre: "Eva", edad: 28 });