Operador Spread

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};

Copiar 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']

Copiar 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]

Copiar 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

Copiar 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 };

Copiar 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' }

Copiar 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' }

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

Copiar const props = { nome: ‘Pedro’, idade: 30 }; <Componente {…props} />