<ALVESC /> ACADEMY
ES6+ Features (Destructuring, Spread, Rest)
Volver a clases
Fundamentos de Programación●Principiante

ES6+ Features (Destructuring, Spread, Rest)

120 min

Destructuring, spread/rest, template literals avanzados y parámetros por defecto para escribir código más expresivo.

Destructuring en arrays y objetos

  • Qué resuelve: Permite extraer valores en una sola línea, evitando código repetitivo.
  • Arrays: orden por posición, con valores por defecto y rest para "el resto".
  • Objetos: extraer por nombre de propiedad, renombrar variables y destructurar anidados.
  • En funciones: destructuring en parámetros para recibir solo lo que necesitas.
javascript
1const frutas = ["manzana", "banana", "naranja"];
2const [primera, , tercera] = frutas;
3
4const persona = { nombre: "Ana", edad: 28, ciudad: "Madrid" };
5const { nombre, edad } = persona;

Spread y Rest

  • Spread: "expande" arrays u objetos, útil para copiar, combinar y crear nuevas estructuras sin mutar.
  • Rest: agrupa parámetros restantes en arrays, ideal para funciones flexibles.
javascript
1const arr1 = [1, 2];
2const arr2 = [3, 4];
3const combinado = [...arr1, ...arr2];
4
5function sumar(...numeros) {
6  return numeros.reduce((acc, n) => acc + n, 0);
7}

Template Literals avanzados

  • Multilínea y interpolación con expresiones dinámicas.
  • Uso de tagged templates para formateo o sanitización.
javascript
1const nombre = "María";
2const mensaje = `Hola ${nombre}, hoy es ${new Date().toLocaleDateString()}`;

Ejemplos de Código

3 ejemplos

Destructuring de objetos anidados

javascript
1const usuario = { datos: { nombre: "Carlos", email: "carlos@email.com" } };
2const {
3  datos: { nombre, email },
4} = usuario;

Merge de configuraciones

javascript
1const defaults = { tema: "claro", idioma: "es" };
2const custom = { tema: "oscuro" };
3const config = { ...defaults, ...custom };

Logger flexible

javascript
1function log(nivel, ...mensajes) {
2  console.log(`[${nivel}]`, ...mensajes);
3}

Recursos

4 recursos disponibles

Documentación Oficial

DocumentaciónPrincipiante

ES6 Features

Resumen de las nuevas características introducidas en ES6.

Documentacion

¡Hora de Practicar!

PrácticaPrincipiante15 min🟡 IA con bitácora

Práctica guiada - Refactor con destructuring

Práctica

Refactorizar objetos y arrays del proyecto anterior usando destructuring y parámetros por defecto.

Desafío de Código

EjercicioPrincipiante15 min🔴 Sin IA

Ejercicios - Spread y Rest

Ejercicios

(1) Unir listas sin mutar, (2) clonar objetos, (3) crear función suma con cantidad variable de argumentos.

Reto de Lectura

Reto de LecturaPrincipiante35 min🔴 Sin IA

Reto de Refactor — De ES5 verboso a ES6 claro

Código ES5 que funciona pero duele leer. Modernízalo con destructuring, spread, template literals y arrows — justificando cada cambio, no por moda.

Este código funciona — el refactor no es para arreglarlo, es para que el siguiente humano (tú en 6 meses) lo lea sin sufrir. Modernízalo y justifica cada cambio con una razón concreta ("es más nuevo" no es una razón).

javascript
1function crearResumen(usuario, opciones) {
2  if (opciones === undefined) {
3    opciones = {};
4  }
5  var moneda = opciones.moneda !== undefined ? opciones.moneda : "MXN";
6  var limite = opciones.limite !== undefined ? opciones.limite : 3;
7
8  var nombre = usuario.nombre;
9  var compras = usuario.compras;
10
11  var recientes = compras.slice(0, limite);
12
13  var total = 0;
14  for (var i = 0; i < recientes.length; i++) {
15    total = total + recientes[i].monto;
16  }
17
18  var etiquetas = [];
19  for (var j = 0; j < recientes.length; j++) {
20    etiquetas.push(recientes[j].producto + " ($" + recientes[j].monto + " " + moneda + ")");
21  }
22
23  var resumen = {
24    nombre: nombre,
25    total: total,
26    moneda: moneda,
27    etiquetas: etiquetas,
28  };
29  return resumen;
30}

Requisitos del refactor: parámetros con default + destructuring, template literals, métodos de array en vez de los for, shorthand de objeto, y const/let donde toque.

Pregunta extra: hay UN lugar de este curso donde cambiar function por arrow function te rompería el código. ¿Cuál es y por qué aquí no hay riesgo?

Clase 11 de 33 en la ruta Desarrollo web

Clase anterior

Git y Deploy para tu Proyecto

Siguiente clase

Array Methods Avanzados y Higher Order Functions