Aula 32 — Spread Operator (...)

Na aula anterior, aprendemos sobre Destructuring de arrays e objetos, extraindo valores de forma simples e elegante.

Agora vamos conhecer um operador que parece simples, mas é extremamente poderoso: o Spread Operator, representado por ....

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o que é o Spread Operator
• Copiar e combinar arrays
• Copiar e combinar objetos
• Usar o spread em funções
• Evitar efeitos colaterais no código

O que é o Spread Operator?

O Spread Operator serve para espalhar os valores de um array ou objeto em outro local.

Em vez de trabalhar com a estrutura inteira, você trabalha diretamente com seus valores internos.

Spread em arrays

Vamos começar com dois arrays simples:

 const numeros1 = [1, 2, 3]; const numeros2 = [4, 5]; 

Sem spread, juntar arrays fica mais trabalhoso. Com spread, fica simples e legível:

 const todosNumeros = [...numeros1, ...numeros2];

console.log(todosNumeros); // Saída será [1, 2, 3, 4, 5]

Copiando arrays com spread

Uma das melhores aplicações do spread é criar cópias independentes de arrays.

 const original = [10, 20, 30]; const copia = [...original];

copia.push(40);

console.log(original); // Saída será [10, 20, 30]
console.log(copia); // Saída será [10, 20, 30, 40]

Isso evita bugs causados por referências compartilhadas.

Spread em objetos

O Spread Operator também funciona com objetos.

 const usuario = { nome: "Daniel", idade: 30 }; 

Criando uma cópia do objeto:

 const copiaUsuario = { ...usuario };

copiaUsuario.idade = 31;

console.log(usuario.idade); // Saída será 30
console.log(copiaUsuario.idade); // Saída será 31

Combinando objetos

Você também pode combinar objetos facilmente:

 const endereco = { cidade: "São Paulo", estado: "SP" };

const usuarioCompleto = {
...usuario,
...endereco
};

console.log(usuarioCompleto);
// Saída será { nome: "Daniel", idade: 30, cidade: "São Paulo", estado: "SP" }

Spread em funções

O Spread Operator é muito usado para passar valores de um array como argumentos de uma função.

 function somar(a, b, c) { return a + b + c; }

const valores = [2, 4, 6];

console.log(somar(...valores)); // Saída será 12

Spread vs Rest (relembrando)

• Spread → espalha valores
• Rest → junta valores em um array
• Ambos usam ..., mas em contextos diferentes

Na próxima aula, vamos aprender sobre Optional Chaining (?.) e acessar dados com mais segurança.