Spread Operator JavaScript: Guia Completo e Prático

O spread operator em JavaScript, representado por três pontos (...), expande um iterável (como um array ou string) em locais onde zero ou mais elementos são esperados. Se você já precisou copiar um array sem referência, combinar objetos ou passar uma lista de argumentos para uma função, esta sintaxe resolve isso com uma linha. Neste guia, você verá como aplicar o spread em situações reais, com exemplos e erros comuns a evitar.

Passo 1: Entenda a sintaxe básica

A sintaxe do spread é simples: três pontos antes do iterável. No código, ele aparece dentro de colchetes, chaves ou na chamada de função.

const numeros = [1, 2, 3]; console.log(...numeros); // 1 2 3

Aqui, o spread expande o array numeros em elementos individuais. Esse comportamento é a base para todos os outros usos. Sem o spread, você precisaria de loops ou métodos como apply() para alcançar o mesmo resultado.

Erro comum: usar spread em um objeto não iterável, como um número ou booleano. O spread só funciona com iteráveis (arrays, strings, sets, mapas) ou propriedades enumeráveis de objetos.

Passo 2: Copie arrays sem referência

Uma das aplicações mais frequentes é criar uma cópia de array. Sem spread, const copia = original cria uma referência, e alterações em copia afetam original.

const original = [1, 2, 3]; const copia = [...original]; copia.push(4); console.log(original); // [1, 2, 3]

A cópia é rasa: elementos primitivos são independentes, mas objetos dentro do array ainda são referenciados. Para cópias profundas, combine spread com outras técnicas, como structuredClone().

Dica: use o spread para concatenar arrays de forma legível: const combinado = [...a...b].

Passo 3: Combine objetos com spread

O spread também funciona em objetos, permitindo mesclar propriedades de forma declarativa.

const base = { nome: 'Ana', idade: 30 }; const atualizado = { ...base, cidade: 'São Paulo' };

A ordem importa: propriedades definidas depois do spread sobrescrevem as anteriores. Se você colocar { ...base, idade: 31 }, a idade vira 31. Se inverter { idade: 31...base }, a idade volta a 30.

Erro comum: assumir que o spread em objetos faz cópia profunda. Assim como em arrays, a cópia é rasa. Aninhados continuam sendo referências.

Passo 4: Passe argumentos para funções

O spread substitui o apply() em chamadas de função que esperam argumentos individuais.

const numeros = [5, 10, 15]; const maximo = Math.max(...numeros); console.log(maximo); // 15

Sem spread, você faria Math.max.apply(null, numeros), que é menos legível. Em funções que recebem múltiplos parâmetros, como Math.max, o spread simplifica a leitura.

Dica: combine com rest parameters (também ...) para coletar argumentos em uma função. A diferença: spread expande, rest coleta.

Passo 5: Use spread com strings e Sets

O spread funciona com qualquer iterável, incluindo strings e Sets.

const palavra = 'abc'; const letras = [...palavra]; // ['a', 'b', 'c'] const set = new Set([1, 2, 2, 3]); const arrayDoSet = [...set]; // [1, 2, 3]

Isso é útil para converter estruturas em arrays de forma rápida. Para strings, cuidado com caracteres Unicode complexos: o spread separa por code point, o que pode quebrar emojis ou caracteres combinados.

Erro comum: usar spread em strings com caracteres acentuados ou emojis e esperar o mesmo resultado de split(''). Teste antes em casos específicos.

Checklist final

Antes de encerrar, verifique se você:

• Usou ... para copiar arrays sem referência.
• Combinou objetos respeitando a ordem de sobrescrita.
• Passou argumentos para funções como Math.max.
• Aplicou spread em strings e Sets quando necessário.
• Lembrou que a cópia é rasa em arrays e objetos.

FAQ

O spread operator funciona em todos os navegadores?

O spread é suportado em navegadores modernos desde o ES6 (2015). Em navegadores antigos, como Internet Explorer, é necessário transpilar com Babel. Para ambientes Node.js, está disponível desde a versão 5, mas é seguro usar a partir da 6.

Qual a diferença entre spread e rest parameters?

Spread expande um iterável em elementos individuais. Rest coleta múltiplos elementos em um array. Ambos usam ..., mas em contextos opostos: spread na chamada ou atribuição, rest na definição de parâmetros.

Posso usar spread para clonar objetos profundamente?

Não diretamente. O spread cria cópia rasa. Para objetos aninhados, use structuredClone() ou bibliotecas como Lodash. Em arrays com objetos, o spread copia as referências, não os objetos internos.

O spread funciona com objetos que não são iteráveis?

Sim, mas com regras próprias. Em objetos, o spread copia propriedades enumeráveis próprias, não o protótipo. Funciona para mesclar objetos, mas não para iterar valores.

Qual a performance do spread em arrays grandes?

O spread é eficiente para arrays de tamanho moderado. Para arrays muito grandes, métodos como concat() podem ser mais rápidos. Em geral, a diferença é irrelevante para aplicações comuns.

Como o spread se comporta com null ou undefined?

Usar spread com null ou undefined lança um erro TypeError, pois eles não são iteráveis. Sempre verifique se o valor existe antes de aplicar o spread.