Operadores Rest e Spread em JavaScript

Os operadores Rest e Spread (...) em JavaScript são recursos poderosos para trabalhar com arrays e objetos, simplificando a manipulação e transferência de dados. Neste post, vamos explorar como cada um funciona e ver exemplos práticos para aplicar os operadores Rest e Spread em JavaScript no seu código.

1. O que é o operador Spread?

O operador Spread (...) permite “espalhar” elementos de um array ou propriedades de um objeto em um novo array ou objeto. É útil para combinar, clonar e manipular arrays e objetos de forma elegante.

Exemplo com Arrays

Podemos usar o Spread para unir dois arrays em um novo array.

const numeros = [1, 2, 3];
const maisNumeros = [4, 5, 6];
const combinados = [...numeros, ...maisNumeros];
console.log(combinados); // [1, 2, 3, 4, 5, 6]

Exemplo com Objetos

Ao clonar objetos ou combinar propriedades de diferentes objetos, o Spread também é muito útil.

const pessoa = { nome: "Ana", idade: 25 };
const detalhes = { cidade: "São Paulo", ocupacao: "Desenvolvedora" };
const pessoaCompleta = { ...pessoa, ...detalhes };
console.log(pessoaCompleta); 
// { nome: "Ana", idade: 25, cidade: "São Paulo", ocupacao: "Desenvolvedora" }

2. O que é o operador Rest?

O operador Rest (...) permite agrupar múltiplos argumentos em um único array. Ele é especialmente útil em funções que recebem um número indeterminado de parâmetros ou ao desconstruir arrays e objetos.

Exemplo de Função com Rest

Ao usar o operador Rest, podemos capturar argumentos variados passados para a função.

function somar(...numeros) {
  return numeros.reduce((total, numero) => total + numero, 0);
}
console.log(somar(1, 2, 3, 4)); // 10

Exemplo de Desestruturação com Rest

Na desestruturação de arrays, o operador Rest permite agrupar elementos restantes em uma variável.

const [primeiro, segundo, ...restante] = [10, 20, 30, 40, 50];
console.log(primeiro); // 10
console.log(segundo); // 20
console.log(restante); // [30, 40, 50]

3. Diferença entre Rest e Spread

A principal diferença é o contexto em que cada operador é usado:

• Spread “espalha” elementos ou propriedades existentes em uma nova estrutura;
  
• Rest “reúne” vários elementos ou argumentos em uma única variável.

4. Exemplos práticos

Unir Arrays com Spread

const frutas = ["maçã", "banana"];
const vegetais = ["cenoura", "abobrinha"];
const alimentos = [...frutas, ...vegetais];
console.log(alimentos); // ["maçã", "banana", "cenoura", "abobrinha"]

Função com parâmetros variáveis usando Rest

function listarNomes(primeiro, segundo, ...resto) {
  console.log("Primeiro:", primeiro);
  console.log("Segundo:", segundo);
  console.log("Outros:", resto);
}
listarNomes("Ana", "Pedro", "Carlos", "Maria");
// Primeiro: Ana, Segundo: Pedro, Outros: ["Carlos", "Maria"]

O operador Rest/Spread é uma ferramenta versátil que ajuda a simplificar a manipulação de dados e funções em JavaScript.

Dúvidas ou sugestões sobre operadores Rest e Spread em JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: rest spread javascript