Spread Syntax vs Rest Parameter: Entendendo a diferença

No ES2015, dois novos recursos, spread sintaxe e parâmetros rest, fornecem maneiras poderosas de manipular matrizes e objetos. Embora ambos possam parecer semelhantes, eles servem a propósitos distintos e cada um tem sua própria funcionalidade exclusiva.

Sintaxe de propagação

Sintaxe de propagação (representada por três pontos "..." ) permite espalhar ou expandir um iterável (como uma matriz ou objeto) em elementos individuais dentro de outro iterável. Este recurso permite mesclar ou combinar convenientemente vários arrays ou objetos em um novo.

Por exemplo, vamos considerar o seguinte código:

var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha); // alpha == ['a', 'b', 'c', 'd', 'e', 'f'];

Neste trecho, o ...abc e ... A sintaxe de propagação def expande as matrizes abc e def em elementos individuais, criando uma nova matriz alfa contendo todos os elementos de ambas as matrizes.

Parâmetro Rest

Por outro lado , um parâmetro rest (denotado por três pontos "...", precedido por um identificador) coleta quaisquer argumentos restantes passados ​​para uma função em um único array. O parâmetro rest deve ser o último parâmetro na lista de parâmetros da função.

Um exemplo de parâmetro rest em ação é o seguinte:

function sumAll(...numbers) {
  let total = 0;
  for (let num of numbers) {
    total  = num;
  }
  return total;
}

let result = sumAll(1, 2, 3, 4, 5);
console.log(result); // result == 15

Neste código, o parâmetro ...numbers rest coleta os argumentos restantes passados ​​para a função sumAll (neste caso, 1, 2, 3, 4 e 5) e cria uma única matriz de números.