Spread operator (...) com arrays: copiando e combinando de forma fácil

Conheça uma sintaxe moderna para copiar arrays ou combiná-los de forma concisa.

O spread operator (...) é uma forma moderna e prática de trabalhar com arrays no JavaScript.

Pense nele como “abrir uma caixa” e espalhar o conteúdo dela em outro lugar.

O que o spread faz com arrays?

Quando usamos ...array, o JavaScript “espalha” os itens daquele array.

Exemplo:

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

1) Copiando arrays com spread

const original = ["HTML", "CSS", "JS"];
const copia = [...original];

console.log(copia);    // ["HTML", "CSS", "JS"]
console.log(original); // ["HTML", "CSS", "JS"]

Isso cria uma nova lista com os mesmos itens.

Por que isso é importante?

Se você fizer:

const copiaErrada = original;

A variável nova aponta para o mesmo array (não é cópia real).
Com spread, você cria uma cópia separada.

2) Combinando arrays com spread

const front = ["HTML", "CSS"];
const back = ["Node.js", "SQL"];

const fullStack = [...front, ...back];

console.log(fullStack); // ["HTML", "CSS", "Node.js", "SQL"]

Muito útil para juntar listas de forma clara.

3) Adicionando itens no começo, meio ou fim

const base = [2, 3];

// No início
const inicio = [1, ...base]; // [1, 2, 3]

// No fim
const fim = [...base, 4]; // [2, 3, 4]

// No meio
const meio = [1, ...base, 4]; // [1, 2, 3, 4]

4) Atualizando array sem alterar o original

const tarefas = ["estudar", "praticar"];
const novasTarefas = [...tarefas, "revisar"];

console.log(tarefas);      // ["estudar", "praticar"]
console.log(novasTarefas); // ["estudar", "praticar", "revisar"]

Esse padrão é muito usado para manter código mais previsível.

5) Atenção importante (cópia rasa)

Com spread, a cópia é rasa (shallow copy).
Ou seja, funciona muito bem para valores simples (strings, números, booleanos), mas em arrays com objetos aninhados é preciso cuidado.

Resumo da lição

  • ... espalha os elementos de um array.
  • Você pode usar para copiar arrays de forma simples.
  • Você pode combinar várias listas com clareza.
  • Também ajuda a adicionar itens sem modificar o array original.
  • É uma ferramenta moderna e muito usada no JavaScript do dia a dia.