Operadores Rest e Spread

E ae galera… Hoje vamos falar um pouco de algo que foi visto no post passado, sobre Template String, e que eu não falei sobre ele. Lembra que dentro de uma função eu passei um parâmetro contendo 3 pontos?

Captura de Tela 2018-02-18 às 11.07.35 AM

Pois é, chegou a hora de falar desse cara… O nome dele é Operador Rest, mas também pode ser chamado de Operador Spread. Mas como assim ele tem dois nome? Ele tem dois nomes porque ele tem dois usos, e cada nome depende do local onde ele aparece. Vou explicar melhor.

Quando passamos essa sintaxe de …param, como argumento de uma função, ele é o Operador Rest e quando ele não é um parâmetro de uma função, é o Operador Spread. Simples assim.

Um ponto importante que precisamos ficar de olho diz respeito ao fato de que este operador só funciona no último argumento nomeado de uma função. Isso significa que não podemos utilizar mais de um Operador Rest por função. O operador sempre interpreta as últimas variáveis passadas na função para compactá-las em um único Array.

Vamos a prática para compreender melhor o Operador Rest… Vou criar uma função que recebe um número indeterminado de argumentos e faz a soma deles. Para isso teremos que fazer um loop para cada valor recebido e armazenar em uma variável. Vamos ver como isso ficaria.

Captura de Tela 2018-02-24 às 9.05.57 AM

Na função sumValues, recebemos um único parâmetro(…values), mas quando vamos executar ela podemos passar mais um parâmetro. Que bruxaria é essa?

Lembra que eu disse que o operador Rest transforma esse parâmetro em um array, então isso faz com que ele possa receber um número indeterminado de valores em sua execução, pois seria como um único array com vários valores.

Mas espera ai… Se ele transforma tudo em array, então eu posso utilizar os métodos auxiliares de array sobre ele!? Não pode, DEVE usar… Essa é a magia do ES6, você reutilizar as novas funções para diminuir seu código, facilitar a leitura e aumentar a produtividade.

Vamos refatorar esse código?

Captura de Tela 2018-02-24 às 9.14.03 AM

Isso sim é um código ES6… Simples, curto e conciso. O que há de diferente entre o código anterior e esse atual?

A função é a mesma, o parâmetro também. Mas no lugar de ter que criar duas variáveis e criar um loop for para ler essas variáveis e iterar sobre o array. Podemos simplesmente usar o método reduce, que vai receber dois parâmetros sum e value, sum inicia com 0 e value vai percorrer o array. E retornamos a soma de sum + value. Veja no console ao lado que o resultado é o mesmo. Mas de forma mais simples.

Agora que já conhecemos e falamos do operador Rest… Vamos ver e falar do Spread. E para isso vamos usa uma situação hipotética. Vamos imaginar que temos duas listas, uma com as matérias do semestre do turno da manhã e outra com as matérias do semestre do turno da noite. Como a gente pode fazer para juntar essas duas listas?

Podemos usar o método concat, certo?

Captura de Tela 2018-02-24 às 9.27.01 AM

Podemos sim… Mas imagina que essa lista tem apenas as aulas do pessoal do segundo semestre, mas você também precisa dizer quais as disciplinas do terceiro semestre da manha.

Captura de Tela 2018-02-24 às 9.33.06 AM

E tudo continua a funcionar… Mas no ES6 temos uma forma mais simples de realizar essa tarefa. Com o Spread podemos pegar um array e propagar os seus valores, sem alterar a sua estrutura original. Como assim? Vamos ver na prática…

Captura de Tela 2018-02-24 às 9.36.22 AM

Mas o que você fez foi simplesmente colocar uma lista dentro da outra… Isso não tem novidade nenhuma…

Na verdade não, se tirar os 3 pontos antes do nome do array, vc vai criar um array de arrays e não um array único.

Captura de Tela 2018-02-24 às 9.38.30 AM

Percebeu a diferença? Com o Spread, é como se estivesse fazendo um push(), para o novo array.

Ficou claro?

Então vamos aos exercícios?

No github do nosso blog já tem os exercícios dos operadores Rest e Spread.

 

Até a próxima!!!

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s