JavaScript Moderno: Destructuring e Spread Operator

O destructuring (desestruturação) e o spread operator (operador de espalhamento) são dois recursos poderosos introduzidos com o ES6 que simplificam consideravelmente a manipulação de arrays e objetos em JavaScript.

O Destructuring

A desestruturação permite extrair valores de objetos ou arrays e atribuí-los a variáveis distintas de maneira concisa.

Destructuring de objetos

// Destructuring de objeto simples
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

// Com nomes de variáveis diferentes
const { nom: nomFamille, prenom: prenomPersonne } = personne;
console.log(nomFamille);     // "Dupont"
console.log(prenomPersonne); // "Marie"

// Com valores padrão
const { pays = "France", ville = "Paris" } = personne;
console.log(pays);  // "France" (valor padrão)
console.log(ville); // "Paris" (valor padrão)

Destructuring aninhado

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

// Destructuring aninhado
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 alguns elementos
const [,, derniere] = couleurs;
console.log(derniere); // "bleu"

// Com valor padrão
const [a, b, c, d = "jaune"] = couleurs;
console.log(d); // "jaune"

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

Destructuring nos parâmetros de função

// Destructuring nos 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"

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

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

O Spread Operator

O operador spread (...) permite decompor um iterável (como um array ou uma string) em seus elementos individuais.

Com arrays

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

// Concatenação de arrays
const tableau1 = [1, 2];
const tableau2 = [3, 4];
const combine = [...tableau1, ...tableau2];
console.log(combine); // [1, 2, 3, 4]

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

// Em chamadas de função
function somme(x, y, z) {
    return x + y + z;
}

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

Com objetos (Object Spread)

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

// Mesclagem 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 }

// Adição/sobrescrita de propriedades
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 avançados

// Com strings
const str = "Hello";
const chars = [...str];
console.log(chars); // ["H", "e", "l", "l", "o"]

// Em construções de arrays
const parts = ["épaules", "genoux"];
const corps = ["tête", ...parts, "orteils"];
console.log(corps); // ["tête", "épaules", "genoux", "orteils"]

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

// Combinar destructuring e 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 }

Padrões e boas práticas

Padrão de renomeação com destructuring

// Renomear durante o 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 padrão com destructuring

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

configurer(); // Usa todos os valores padrão
configurer({ couleur: "rouge" }); // Sobrescreve apenas a cor

Cópia profunda vs. superficial

// Atenção: o spread faz uma cópia superficial
const original = { 
    a: 1, 
    b: { 
        c: 2 
    } 
};

const copieSuperf = { ...original };
copieSuperf.b.c = 3;
console.log(original.b.c); // 3 (o objeto aninhado é compartilhado)

// Para uma cópia profunda, use:
const copieProf = JSON.parse(JSON.stringify(original));
// Ou use bibliotecas como lodash.cloneDeep

Combinação com outros recursos do ES6+

// Com 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"

// Com arrow functions
const creerUtilisateur = ({ nom, age }) => ({
    nom,
    age,
    dateCreation: new Date()
});

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

Casos de uso práticos

No React

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

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

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

Em APIs REST

// Extração de dados de uma resposta 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
    };
}

// Construção de requisição
const defaultParams = {
    method: "GET",
    headers: {
        "Content-Type": "application/json"
    }
};

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

Exercícios práticos

Extração de dados

// Exercício: Extrair as informações relevantes
const donnees = {
    utilisateur: {
        nom: "Dupont",
        adresse: {
            rue: "123 rue Principale",
            ville: "Paris",
            pays: "France"
        },
        preferences: {
            theme: "sombre",
            notifications: true
        }
    }
};

// Solução
const { 
    utilisateur: { 
        nom,
        adresse: { ville },
        preferences: { theme }
    }
} = donnees;

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

Mesclagem de objetos

// Exercício: Mesclar configurações
const configDefaut = {
    theme: "clair",
    langue: "fr",
    notifications: true
};

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

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

Manipulação de arrays

// Exercício: Reorganizar um array
const nombres = [1, 2, 3, 4, 5];

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

Conclusão

O destructuring e o spread operator são ferramentas essenciais do JavaScript moderno que permitem:

Extrair facilmente dados de estruturas complexas
Criar cópias de objetos e arrays
Mesclar dados de maneira elegante
Tornar o código mais legível e fácil de manter

Esses recursos são particularmente úteis em:

A manipulação de dados de APIs
O desenvolvimento com React/Vue.js
O gerenciamento de estado de aplicações
O tratamento de configurações

No próximo tutorial, vamos explorar a programação orientada a objetos em JavaScript moderno.

Precisa revisar as funções? Consulte nosso tutorial anterior sobre funções.

Pronto para continuar? Passe para o próximo tutorial sobre POO.

Funções POO