Como funcionam o Rest e o Spread Operator

Neste post veremos como funcionam estas funcionalidades do ES6: Rest e Spread Operator, como também casos de uso para as mesmas.

O que é Spread Operator?

Podemos explicar como Spread funciona assim: transforma um array em diversos parâmetros para uma função

Ou seja, podemos invocar uma função que espera vários parâmetros utilizando o Spread

E não só isso, ele também pode compor arrays, veja os exemplos:

// Spread
function somarElementos(a, b, c) {
    console.log(a + b + c);
}

let elementos = [1,5,14]; 

somarElementos(...elementos); // 20

let itensDaLista = ['trigo', 'batata'];

let listaDeCompras = ['banana', ...itensDaLista, 'arroz', 'maçã', 'chocolate'];

console.log(listaDeCompras); // (6) ["banana", "trigo", "batata", "arroz", "maçã", "chocolate"]
 

Chamamos uma função que requer três argumentos pelo Spread, que tratou de organizar eles e assim a função retornou o resultado

Depois inserimos com Spread alguns itens a um array

Outra possibilidade de uso é concatenar arrays, veja:

let arrA = [1,2,3];

let arrB = [4,5,6];

let arrC = [...arrA, ...arrB];

console.log(arrC); // (6) [1, 2, 3, 4, 5, 6]

O arrC foi criado a partir de dois arrays com o auxílio do operador Spread

Podemos resumir Spread assim:

Separa um array em vários parâmetros de uma função ou na construção de um array

O que é Rest Operator?

Uma boa definição para este operador é: Rest nos permite transformar um número indeterminado de parâmetros em um array

E ele apenas funciona dentro de uma função, sendo ele um dos argumentos da função

// Rest
function testandoRest(a, b, ...theArgs) {
    console.log(a, b, theArgs); // 1, 2, [3,4,5]
}

testandoRest(1, 2, 3, 4, 5);

function testandoRest2(...theArgs) {
    console.log(theArgs); // [1,2,3,4,5]
}

testandoRest2(1, 2, 3, 4, 5);

Perceba que na primeira função deixamos dois números de fora do array que Rest montou

Ou seja, é envolvido no array apenas os argumentos após o …theArgs

Já na segunda todos os elementos foram para o array formado pelo Rest

Outra possibilidade que temos com o Rest é utilizar ele em conjunto de métodos de array

Veja os exemplos a seguir:

function multiplicar(multiplicador, ...multiplicados) {
    return multiplicados.map(function(numero) {
        return multiplicador * numero;
    });
}

const multiplicados = multiplicar(3, 1,2,3,4,5);

console.log(multiplicados); // 3,6,9,12,15

function filtrarPares(...numeros) {
    return numeros.filter(function(numero) {
        return numero % 2 === 0;
    });
}

const pares = filtrarPares(1,2,3,4,5,6,7,8,9,10);

console.log(pares); // 2,4,6,8,10

Como os parâmetros inseridos viram um array, podemos aplicar este conjunto aos métodos

E também nada nos impede de utilizar arrow functions, veja:

function filtrarImpares(...numeros) {
    return numeros.filter((numero) => numero % 2 !== 0);
}

const impares = filtrarImpares(1,2,3,4,5,6,7,8,9,10);

console.log(impares);  // 1,3,5,7,9

Então para resumir o Rest, quando você põe …algumNome  como parâmetro numa função significa:

Junte todos os parâmetros restantes, ou seja os que ficarem par …algumNome, em um array

Repositório

Você pode encontrar todo o código utilizado aqui!

Conclusão

Vimos que o operador Spread e Rest fazem basicamente a mesma coisa, porém ao contrário

Spread vai espalhar os parâmetros passados pelo …argumento em uma chamada de função ou um array

Enquanto Rest vai reunir todos os parâmetros passados para uma função em um array

Spread utiliza-se em chamadas de função e arrays

Já Rest apenas em funções

Podemos pensar assim também:

• Spread = espalhar;
• Rest = condensar;

Confira também o nosso canal do Youtube com muito conteúdo sobre programação, clicando aqui.

Então por hoje é isso pessoal, obrigado por lerem até o fim e até o próximo artigo, abraço! 😀