Spread operator vs rest parameters

Entenda essa bagaça e comece usar eles nos seus códigos…

Por muito tempo, achei que os ... fossem usados da mesma forma, mas tem uma pequena diferença que pode deixar sua vida muito menos complicada =)

Spread operator

É bem simples de ser usado, o exemplo mais comum que encontramos na internet é de merge entre arrays (se você é iniciante, na faculdade eles chamam arrays de vetor).

Na versão 5 do javascript, precisávamos usar o push para fazermos um merge de arrays:

var a = [1, 2, 3]
var b = [4, 5, 6]
Array.prototype.push.apply(a, b)
// console.log(a) [1, 2, 3, 4, 5, 6]

Com spread é um pouco mais fácil:

const a = [1, 2, 3]
const b = [4, 5, 6]
// console.log([...a, ...b]) [1, 2, 3, 4, 5, 6]

E ainda podemos desestruturar esses arrays em uma sequência numérica:

const a = [1, 2, 3]
const b = [4, 5, 6]
// console.log(...a, ...b) 1, 2, 3, 4, 5, 6

E podemos fazer mais algumas brincadeiras, só vou mostrar uma então não parem com esse artigo, façam vários testes:

const a = [1, 2, 3]
const b = [7, 8, 9]
// console.log([...a, 4, 5, 6, ...b]) [1, 2, 3, 4, 5, 6, 7, 8, 9]

Rest parameters

Nos permite representar um número indefinido de argumentos como um array. Essa é a definição do MDN web docs. Mas o que isso quer dizer ??

É bem simples, vamos exemplificar, por que realmente é simples:

function arr(...values){
  console.log(values)
}
arr(1, 2, 3)
saida // [1, 2, 3]

No exemplo acima, criamos uma função que recebe ...values (rest parameters) e quando executamos a função arr(1, 2, 3) passando esses três números, dentro da função ele vira um array, fácil não é mesmo =).

Bem é isso, espero que tenham gostado, lembrem que qualquer informação que deixei passar, ou se quiserem adicionar qualquer coisa postem nos comentários. Se esse artigo foi útil e puder me pagar um café ficarei feliz. Abraços quentinhos para vocês !!