JavaScript Moderno: Destructuring y Spread Operator

El destructuring (desestructuración) y el spread operator (operador de propagación) son dos funcionalidades potentes introducidas con ES6 que simplifican considerablemente la manipulación de arrays y objetos en JavaScript.

El Destructuring

La desestructuración permite extraer valores de objetos o arrays y asignarlos a variables independientes de forma concisa.

Destructuring de objetos

// Destructuring de objeto simple
const personne = {
    nom: "Dupont",
    prenom: "Marie",
    age: 30
};

const { nom, prenom, age } = personne;
console.log(nom);    // "Dupont"
console.log(prenom); // "Marie"
console.log(age);    // 30

// Con nombres de variables diferentes
const { nom: nomFamille, prenom: prenomPersonne } = personne;
console.log(nomFamille);     // "Dupont"
console.log(prenomPersonne); // "Marie"

// Con valores por defecto
const { pays = "France", ville = "Paris" } = personne;
console.log(pays);  // "France" (valor por defecto)
console.log(ville); // "Paris" (valor por defecto)

Destructuring anidado

const utilisateur = {
    id: 1,
    infos: {
        nom: "Dupont",
        adresse: {
            rue: "123 rue Principale",
            ville: "Paris"
        }
    }
};

// Destructuring anidado
const { infos: { nom, adresse: { ville } } } = utilisateur;
console.log(nom);   // "Dupont"
console.log(ville); // "Paris"

Destructuring de arrays

// Destructuring de array básico
const couleurs = ["rouge", "vert", "bleu"];
const [premiere, deuxieme, troisieme] = couleurs;
console.log(premiere);  // "rouge"
console.log(deuxieme); // "vert"
console.log(troisieme); // "bleu"

// Ignorar algunos elementos
const [,, derniere] = couleurs;
console.log(derniere); // "bleu"

// Con valor por defecto
const [a, b, c, d = "jaune"] = couleurs;
console.log(d); // "jaune"

// Rest pattern con arrays
const [premier, ...reste] = couleurs;
console.log(premier); // "rouge"
console.log(reste);   // ["vert", "bleu"]

Destructuring en los parámetros de función

// Destructuring en los parámetros
function afficherUtilisateur({ nom, age, email = "non fourni" }) {
    console.log(`Nom: ${nom}, Age: ${age}, Email: ${email}`);
}

afficherUtilisateur({
    nom: "Dupont",
    age: 30
}); // "Nom: Dupont, Age: 30, Email: non fourni"

// Con array
function afficherCoordonnees([x, y, z = 0]) {
    console.log(`X: ${x}, Y: ${y}, Z: ${z}`);
}

afficherCoordonnees([10, 20]); // "X: 10, Y: 20, Z: 0"

El Spread Operator

El operador spread (...) permite descomponer un iterable (como un array o una cadena) en sus elementos individuales.

Con arrays

// Copia de array
const original = [1, 2, 3];
const copie = [...original];
console.log(copie); // [1, 2, 3]

// Concatenación de arrays
const tableau1 = [1, 2];
const tableau2 = [3, 4];
const combine = [...tableau1, ...tableau2];
console.log(combine); // [1, 2, 3, 4]

// Añadir elementos
const nombres = [1, 2, 3];
const plusNombres = [...nombres, 4, 5];
console.log(plusNombres); // [1, 2, 3, 4, 5]

// En las llamadas a funciones
function somme(x, y, z) {
    return x + y + z;
}

const nombres2 = [1, 2, 3];
console.log(somme(...nombres2)); // 6

Con objetos (Object Spread)

// Copia de objeto
const original = { a: 1, b: 2 };
const copie = { ...original };
console.log(copie); // { a: 1, b: 2 }

// Fusión de objetos
const obj1 = { foo: "bar", x: 42 };
const obj2 = { foo: "baz", y: 13 };
const cloned = { ...obj1 }; // { foo: "bar", x: 42 }
const merged = { ...obj1, ...obj2 }; // { foo: "baz", x: 42, y: 13 }

// Adición/sobrescritura de propiedades
const base = { a: 1, b: 2 };
const nouveau = { ...base, b: 3, c: 4 };
console.log(nouveau); // { a: 1, b: 3, c: 4 }

Casos de uso avanzados

// Con cadenas de caracteres
const str = "Hello";
const chars = [...str];
console.log(chars); // ["H", "e", "l", "l", "o"]

// En construcciones de arrays
const parts = ["épaules", "genoux"];
const corps = ["tête", ...parts, "orteils"];
console.log(corps); // ["tête", "épaules", "genoux", "orteils"]

// Con Set
const monSet = new Set([1, 2, 3]);
const tableau = [...monSet];
console.log(tableau); // [1, 2, 3]

// Combinar destructuring y spread
const { a, b, ...reste } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a);     // 1
console.log(b);     // 2
console.log(reste); // { c: 3, d: 4 }

Patrones y buenas prácticas

Patrón de renombrado con destructuring

// Renombrar durante el destructuring
const api = {
    user_id: 123,
    user_name: "john_doe",
    user_email: "john@example.com"
};

const {
    user_id: id,
    user_name: username,
    user_email: email
} = api;

console.log(id);       // 123
console.log(username); // "john_doe"

Parámetros por defecto con destructuring

function configurer({
    couleur = "bleu",
    taille = "medium",
    type = "normal"
} = {}) {
    console.log(`Couleur: ${couleur}, Taille: ${taille}, Type: ${type}`);
}

configurer(); // Utiliza todos los valores por defecto
configurer({ couleur: "rouge" }); // Sobrescribe únicamente el color

Copia profunda vs. superficial

// Atención: spread hace una copia superficial
const original = { 
    a: 1, 
    b: { 
        c: 2 
    } 
};

const copieSuperf = { ...original };
copieSuperf.b.c = 3;
console.log(original.b.c); // 3 (el objeto anidado se comparte)

// Para una copia profunda, utiliza:
const copieProf = JSON.parse(JSON.stringify(original));
// O utiliza bibliotecas como lodash.cloneDeep

Combinación con otras funcionalidades de ES6+

// Con template literals
const personne = {
    nom: "Alice",
    competences: ["JS", "React", "Node"]
};

const { nom, competences: [principale, ...autres] } = personne;
console.log(`${nom} maîtrise principalement ${principale}`);
// "Alice maîtrise principalement JS"

// Con funciones flecha
const creerUtilisateur = ({ nom, age }) => ({
    nom,
    age,
    dateCreation: new Date()
});

const utilisateur = creerUtilisateur({ nom: "Bob", age: 25 });

Casos de uso prácticos

En React

// Destructuring de las props
function UserProfile({ name, age, email }) {
    return (
        <div>
            <h2>{name}</h2>
            <p>Age: {age}</p>
            <p>Email: {email}</p>
        </div>
    );
}

// Spread con las props
const buttonProps = {
    type: "submit",
    className: "btn-primary",
    onClick: () => console.log("Cliqué!")
};

<button {...buttonProps}>Envoyer</button>

En las API REST

// Extracción de datos de una respuesta de API
async function getUser(id) {
    const response = await fetch(`/api/users/${id}`);
    const { name, email, ...metadata } = await response.json();
    
    return {
        displayName: name,
        contact: email,
        metadata
    };
}

// Construcción de petición
const defaultParams = {
    method: "GET",
    headers: {
        "Content-Type": "application/json"
    }
};

const fetchData = (url, options) => 
    fetch(url, { ...defaultParams, ...options });

Ejercicios prácticos

Extracción de datos

// Ejercicio: extraer la información relevante
const donnees = {
    utilisateur: {
        nom: "Dupont",
        adresse: {
            rue: "123 rue Principale",
            ville: "Paris",
            pays: "France"
        },
        preferences: {
            theme: "sombre",
            notifications: true
        }
    }
};

// Solución
const { 
    utilisateur: { 
        nom,
        adresse: { ville },
        preferences: { theme }
    }
} = donnees;

console.log(`${nom} vit à ${ville} et préfère le thème ${theme}`);

Fusión de objetos

// Ejercicio: fusionar configuraciones
const configDefaut = {
    theme: "clair",
    langue: "fr",
    notifications: true
};

const configUtilisateur = {
    theme: "sombre",
    notifications: false
};

// Solución
const configFinale = { ...configDefaut, ...configUtilisateur };
console.log(configFinale);
// { theme: "sombre", langue: "fr", notifications: false }

Manipulación de arrays

// Ejercicio: reorganizar un array
const nombres = [1, 2, 3, 4, 5];

// Solución
const [premier, deuxieme, ...autres] = nombres;
const reorganise = [...autres, deuxieme, premier];
console.log(reorganise); // [3, 4, 5, 2, 1]

Conclusión

El destructuring y el spread operator son herramientas esenciales del JavaScript moderno que permiten:

Extraer fácilmente datos de estructuras complejas
Crear copias de objetos y arrays
Fusionar datos de forma elegante
Hacer el código más legible y mantenible

Estas funcionalidades son especialmente útiles en:

La manipulación de datos de API
El desarrollo con React/Vue.js
La gestión del estado de la aplicación
El tratamiento de configuraciones

En el próximo tutorial exploraremos la programación orientada a objetos en JavaScript moderno.

¿Necesitas repasar las funciones? Consulta nuestro tutorial anterior sobre las funciones.

¿Listo para continuar? Pasa al siguiente tutorial sobre la POO.

Funciones POO