Avanzado⏱ 55 min
⚡
JavaScript · Capítulo 12
ES6+ Moderno
Domina spread, desestructuración, optional chaining, y construye una mini app CRUD con localStorage.
📖
Teoría
ES6+ trajo decenas de mejoras al lenguaje. Las más importantes:
- Spread/Rest (
...): copiar/expandir arrays y objetos
- Desestructuración: extraer valores de arrays/objetos
- Template literals: strings con interpolación
- Optional chaining (
?.): acceder sin error si es null/undefined
- Nullish coalescing (
??): valor por defecto si null/undefined
- localStorage: persistencia en el navegador
javascript
// Spread: copiar y combinar
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1,2,3,4,5]
const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 }; // {a:1, b:2}
// Desestructuración
const [primero, segundo, ...resto] = [1, 2, 3, 4, 5];
const { nombre, edad, ciudad = "N/A" } = usuario; // con default
// Optional chaining
const ciudad = usuario?.direccion?.ciudad; // no falla si es null
// Nullish coalescing
const nombre = usuario.nombre ?? "Anónimo"; // solo si null/undefined
// localStorage
localStorage.setItem("clave", JSON.stringify(datos));
const datos = JSON.parse(localStorage.getItem("clave") ?? "[]");
localStorage.removeItem("clave");⚡
Ejercicio práctico
🎯 Tu misión
Construye una mini app CRUD de notas usando ES6+ y localStorage. Debe poder crear, leer, y eliminar notas que persisten al recargar la página. Usa spread para agregar/eliminar, optional chaining para leer datos guardados.
Console
Vista previa
🏆 ¡Fin del curso!