O operador spread (...) no JavaScript é usado para espalhar os elementos de um iterável (como arrays, objetos ou strings) em outro local, como em outro array, objeto ou lista de argumentos. Ele é muito útil e elegante para várias tarefas do dia a dia!
Sua sintaxe
JavaScript
const novoArray = [...arrayOriginal];
const novoObjeto = {...objetoOriginal};
Usos no dia a dia
1 - copiar arrays
Evita modificar o array original (shallow copy).
JavaScript
const frutas = ['maçã', 'banana'];
const copiaFrutas = [...frutas];
copiaFrutas.push('laranja');
console.log(frutas); // ['maçã', 'banana']
console.log(copiaFrutas); // ['maçã', 'banana', 'laranja']
2 - Concatenar arrays
Forma mais limpa que concat().
JavaScript
const a = [1, 2];
const b = [3, 4];
const juntos = [...a, ...b]; // [1, 2, 3, 4]
3 - Passar elementos como argumentos
Evita usar .apply() ou loops.
JavaScript
const numeros = [4, 7, 1];
const maximo = Math.max(...numeros); // 7
4 - Copiar objetos
Evita alterações no objeto original (shallow copy).
JavaScript
const usuario = { nome: 'Pedro', idade: 30 };
const copiaUsuario = { ...usuario };
5 - Mesclar objetos
Útil para combinar configurações, props, etc.
JavaScript
const padrao = { tema: 'claro', fonte: 'Arial' };
const personalizado = { tema: 'escuro' };
const configFinal = { ...padrao, ...personalizado };
// { tema: 'escuro', fonte: 'Arial' }
⚠️ Em conflitos, o último valor sobrescreve os anteriores.
6 - Remover propriedades de objetos
Simulando um “objeto sem uma chave” ao usar destructuring junto com spread.
JavaScript
const { senha, ...usuarioSemSenha } = { nome: 'Pedro', senha: '123456' };
// usuarioSemSenha -> { nome: 'Pedro' }
7. Componentes React
No React, o spread é muito usado para passar props rapidamente
JavaScript
const props = { nome: 'Pedro', idade: 30 };
<Componente {...props} />