Tema 14 · Colecciones

Desestructuración y Operador Spread (...)

Aprende a desempacar valores de arrays y propiedades de objetos con sintaxis concisa de desestructuración, clonar estructuras con el operador spread (...) y recopilar argumentos con rest.

Métodos Funcionales: map, filter y reduce Selección de Elementos en el DOM

¿Qué es la Desestructuración (Destructuring)?

La desestructuración es una sintaxis introducida en ES6 que permite extraer valores de arrays o propiedades de objetos y asignarlos directamente a variables individuales de forma limpia y directa.

1. Desestructuración de Objetos

Permite extraer propiedades por su nombre exacto:

const usuario = {
  nombre: "María José",
  rol: "Estudiante",
  pais: "Colombia"
};

// Extracción tradicional:
// const nombre = usuario.nombre;
// const rol = usuario.rol;

// Con desestructuración moderna:
const { nombre, rol, ciudad = "Bogotá" } = usuario;
console.log(`${nombre} tiene el rol de ${rol} en ${ciudad}.`);

2. Desestructuración de Arrays

Asigna variables siguiendo la posición ordinal de los elementos:

const coordenadas = [4.7110, -74.0721];
const [latitud, longitud] = coordenadas;

console.log("Lat:", latitud, "Lng:", longitud);

3. El Operador Spread (...)

El operador de propagación (spread) "desempaqueta" o expande los elementos de un array u objeto iterable. Es la técnica por excelencia para clonar o fusionar estructuras sin mutar la fuente original: 

// 1. Combinar arrays
const frontend = ["HTML", "CSS", "JS"];
const backend = ["PHP", "SQL"];
const fullstack = [...frontend, ...backend, "Git"];

// 2. Clonar y extender objetos
const usuarioOriginal = { id: 1, nombre: "Elena" };
const usuarioActualizado = { ...usuarioOriginal, activo: true, nivel: "Senior" };
Diagrama Técnico: Desestructuración de Objetos/Arrays y Operador Spread en ES6+

Diagrama 14.1: Extracción por clave vs extracción posicional, y clonación inmutable con el operador spread.

4. Parámetros Rest (...args)

Cuando se usa en la firma de una función, agrupa múltiples argumentos pasados en un array real: 

function sumarTodo(...numeros) {
  return numeros.reduce((acum, num) => acum + num, 0);
}

console.log(sumarTodo(10, 20, 30, 40)); // 100

⚡ Clonación y Combinación Inmutable con Spread

Prueba en vivo cómo desestructurar un perfil de usuario y añadir nuevas habilidades con el operador spread:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Desestructuración y Spread en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-perfil { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .info-bloque { background: #f1f5f9; border-left: 4px solid #0284c7; padding: 12px; border-radius: 4px; margin: 15px 0; font-family: monospace; white-space: pre-wrap; }
    .controles { display: flex; gap: 8px; }
    input[type="text"] { flex: 1; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; }
    button { padding: 8px 14px; background: #0284c7; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
    button:hover { background: #0369a1; }
  </style>
</head>
<body>

  <div class="card-perfil">
    <h3 style="margin-top: 0; color: #0f172a;">Perfil Académico Dinámico</h3>

    <div class="controles">
      <input type="text" id="nuevaHabilidad" placeholder="Nueva habilidad (ej: TypeScript)...">
      <button onclick="agregarConSpread()">+ Agregar (Spread)</button>
    </div>

    <div class="info-bloque" id="vista-objeto">Generando perfil...</div>

    <script>
      let perfilEstudiante = {
        id: 104,
        nombre: "Luis Fernando Sánchez",
        carrera: "Desarrollo Web Fullstack",
        habilidades: ["HTML5", "CSS3", "JavaScript"]
      };

      function renderizar() {
        // Desestructuración de propiedades del objeto
        const { nombre, carrera, habilidades } = perfilEstudiante;

        const contenedor = document.getElementById('vista-objeto');
        contenedor.textContent = 
`Estudiante: ${nombre}
Programa: ${carrera}
Habilidades (${habilidades.length}): ${habilidades.join(', ')}

Objeto JSON en memoria:
${JSON.stringify(perfilEstudiante, null, 2)}`;
      }

      function agregarConSpread() {
        const input = document.getElementById('nuevaHabilidad');
        const nuevaSkill = input.value.trim();

        if (nuevaSkill === "") {
          alert("Por favor escribe una habilidad.");
          return;
        }

        // Clonación inmutable del objeto y del array con operador spread
        perfilEstudiante = {
          ...perfilEstudiante,
          habilidades: [...perfilEstudiante.habilidades, nuevaSkill]
        };

        input.value = "";
        input.focus();
        renderizar();
      }

      renderizar();
    </script>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.