Da trilha de JavaScript Este conceito ainda não saiu como card do dia. ir para o card de hoje

JavaScript Coleções Básico

Desestruturação e spread

A desestruturação permite extrair valores de arrays e objetos em variáveis distintas de forma concisa. Em arrays, usamos [a, b] = arr; em objetos, { nome, idade } = obj. Valores padrão (= valor) são usados quando a propriedade não existe ou é undefined.

O spread (...) expande elementos de um iterável (array, string) ou propriedades de um objeto. Com ele, criamos cópias rasas e combinamos estruturas: [...arr1, ...arr2] ou { ...obj1, ...obj2 }. A cópia é rasa: apenas o primeiro nível é copiado; objetos aninhados continuam compartilhando a mesma referência.

Esses recursos são essenciais no dia a dia com arrays e objetos, evitando código repetitivo e facilitando a imutabilidade (criar novas versões sem modificar a original).

Pontos-chave

  • Desestruturação de array usa [a, b] = arr; de objeto usa { chave } = obj.
  • Valores padrão (= valor) evitam undefined quando a propriedade não existe.
  • Spread ... expande arrays/objetos em novos arrays/objetos.
  • A cópia com spread é rasa: objetos aninhados são compartilhados.
  • Podemos renomear variáveis na desestruturação de objeto: { nome: n }.
destructuring_spread.js
// Desestruturação de array com valores padrão
const [primeiro, segundo = 10, terceiro = 30] = [1, 2];
console.log(primeiro, segundo, terceiro); // 1 2 30

// Desestruturação de objeto com renomeação e padrão
const usuario = { nome: 'Ana', idade: 28 };
const { nome: nomeUsuario, idade, email = 'sem@email.com' } = usuario;
console.log(nomeUsuario, idade, email); // Ana 28 sem@email.com

// Spread em arrays: cópia e concatenação
const arr1 = [1, 2];
const arr2 = [3, 4];
const copia = [...arr1];
const combinado = [...arr1, ...arr2];
console.log(copia);     // [1, 2]
console.log(combinado); // [1, 2, 3, 4]

// Spread em objetos: cópia rasa e sobrescrita
const original = { a: 1, b: 2, c: { d: 3 } };
const copiaRasa = { ...original, b: 20 };
console.log(copiaRasa); // { a: 1, b: 20, c: { d: 3 } }

// Cópia rasa: objeto aninhado é compartilhado
copiaRasa.c.d = 99;
console.log(original.c.d); // 99 (mesma referência)

Exercícios

  1. 1
    Fácil

    Extrair e renomear

    Dado o array [10, 20, 30], use desestruturação para criar as variáveis a, b e c. Depois, dado o objeto { nome: 'Carlos', idade: 35 }, extraia nome e idade em variáveis chamadas nomePessoa e idadePessoa. Imprima todos os valores no console.

    Resolver
  2. 2
    Médio

    Combinar arrays e objetos com spread

    Crie uma função combinar que recebe dois arrays e dois objetos. Ela deve retornar um novo array com todos os elementos dos dois arrays (na ordem) e um novo objeto com as propriedades de ambos, dando prioridade ao segundo objeto em caso de chaves iguais. Use spread.

    Resolver
  3. 3
    Desafio

    Cópia rasa e aninhada

    Crie uma função clonarSuperficial que recebe um objeto e retorna uma cópia rasa usando spread. Em seguida, crie clonarProfundo que também copia objetos aninhados (apenas um nível de profundidade). Demonstre que a cópia rasa compartilha referências aninhadas, enquanto a profunda não. Use JSON.parse(JSON.stringify()) para a cópia profunda? Não, implemente manualmente com spread e verificação de tipo.

    Resolver

Continue estudando