Modern JavaScript: Destructuring and the Spread Operator

Destructuring and the spread operator are two powerful features introduced with ES6 that greatly simplify working with arrays and objects in JavaScript.

Destructuring

Destructuring lets you extract values from objects or arrays and assign them to separate variables in a concise way.

Object Destructuring

// Destructuring d'objet 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

// Avec des noms de variables différents
const { nom: nomFamille, prenom: prenomPersonne } = personne;
console.log(nomFamille);     // "Dupont"
console.log(prenomPersonne); // "Marie"

// Avec des valeurs par défaut
const { pays = "France", ville = "Paris" } = personne;
console.log(pays);  // "France" (valeur par défaut)
console.log(ville); // "Paris" (valeur par défaut)

Nested Destructuring

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

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

Array Destructuring

// Destructuring de tableau basique
const couleurs = ["rouge", "vert", "bleu"];
const [premiere, deuxieme, troisieme] = couleurs;
console.log(premiere);  // "rouge"
console.log(deuxieme); // "vert"
console.log(troisieme); // "bleu"

// Ignorer certains éléments
const [,, derniere] = couleurs;
console.log(derniere); // "bleu"

// Avec valeur par défaut
const [a, b, c, d = "jaune"] = couleurs;
console.log(d); // "jaune"

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

Destructuring in Function Parameters

// Destructuring dans les paramètres
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"

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

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

The Spread Operator

The spread operator (...) lets you expand an iterable (such as an array or a string) into its individual elements.

With Arrays

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

// Concaténation de tableaux
const tableau1 = [1, 2];
const tableau2 = [3, 4];
const combine = [...tableau1, ...tableau2];
console.log(combine); // [1, 2, 3, 4]

// Ajouter des éléments
const nombres = [1, 2, 3];
const plusNombres = [...nombres, 4, 5];
console.log(plusNombres); // [1, 2, 3, 4, 5]

// Dans les appels de fonction
function somme(x, y, z) {
    return x + y + z;
}

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

With Objects (Object Spread)

// Copie d'objet
const original = { a: 1, b: 2 };
const copie = { ...original };
console.log(copie); // { a: 1, b: 2 }

// Fusion d'objets
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 }

// Ajout/écrasement de propriétés
const base = { a: 1, b: 2 };
const nouveau = { ...base, b: 3, c: 4 };
console.log(nouveau); // { a: 1, b: 3, c: 4 }

Advanced Use Cases

// Avec les chaînes de caractères
const str = "Hello";
const chars = [...str];
console.log(chars); // ["H", "e", "l", "l", "o"]

// Dans les constructions de tableaux
const parts = ["épaules", "genoux"];
const corps = ["tête", ...parts, "orteils"];
console.log(corps); // ["tête", "épaules", "genoux", "orteils"]

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

// Combiner destructuring et 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 }

Patterns and Best Practices

Renaming Pattern with Destructuring

// Renommer lors du 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"

Default Parameters with Destructuring

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

configurer(); // Utilise toutes les valeurs par défaut
configurer({ couleur: "rouge" }); // Surcharge uniquement la couleur

Deep Copy vs. Shallow Copy

// Attention : spread fait une copie superficielle
const original = { 
    a: 1, 
    b: { 
        c: 2 
    } 
};

const copieSuperf = { ...original };
copieSuperf.b.c = 3;
console.log(original.b.c); // 3 (l'objet imbriqué est partagé)

// Pour une copie profonde, utilisez :
const copieProf = JSON.parse(JSON.stringify(original));
// Ou utilisez des bibliothèques comme lodash.cloneDeep

Combining with Other ES6+ Features

// Avec les 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"

// Avec les fonctions fléchées
const creerUtilisateur = ({ nom, age }) => ({
    nom,
    age,
    dateCreation: new Date()
});

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

Practical Use Cases

In React

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

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

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

In REST APIs

// Extraction de données d'une réponse 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
    };
}

// Construction de requête
const defaultParams = {
    method: "GET",
    headers: {
        "Content-Type": "application/json"
    }
};

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

Practice Exercises

1. Extracting Data

// Exercice : Extraire les informations pertinentes
const donnees = {
    utilisateur: {
        nom: "Dupont",
        adresse: {
            rue: "123 rue Principale",
            ville: "Paris",
            pays: "France"
        },
        preferences: {
            theme: "sombre",
            notifications: true
        }
    }
};

// Solution
const { 
    utilisateur: { 
        nom,
        adresse: { ville },
        preferences: { theme }
    }
} = donnees;

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

2. Merging Objects

// Exercice : Fusionner des configurations
const configDefaut = {
    theme: "clair",
    langue: "fr",
    notifications: true
};

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

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

3. Manipulating Arrays

// Exercice : Réorganiser un tableau
const nombres = [1, 2, 3, 4, 5];

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

Conclusion

Destructuring and the spread operator are essential tools in modern JavaScript that let you:

• Easily extract data from complex structures
• Create copies of objects and arrays
• Merge data elegantly
• Make code more readable and maintainable

These features are particularly useful for:

• Handling API data
• React/Vue.js development
• Application state management
• Processing configurations

In the next tutorial, we’ll explore object-oriented programming in modern JavaScript.

Need to review functions? Check out our previous tutorial on functions.

Ready to continue? Move on to the next tutorial on OOP.