Arrow functions, Desestruturação, Rest/Spread operator, map e filter
Tags: react, javascript, function
Published: 2023-10-09 12:11:37


Hello dev!

Quero falar hoje de algumas features que considero as melhores ES6, ES7 e ES8, digo que considero as melhores porque dentro do meu dia a dia trabalhando com React, são as que uso com mais constância.
>  Pode existir sem dúvida outras que vocês curtam também então não leve a sério que essas são as mais tops

### Arrow functions

Utilizando arrow functions conseguimos utilizar/mater o escopo atual *this. *Um grande ponto quando utilizamos principalmente dentro de classes como uma classe state-full do React (Em breve vamos compreender mais sobre escopo)
{% gist https://gist.github.com/henriqueweiand/083f049c1b54638e97988cf058f0d3a4.js %}
Acima, fizemos a declaração da maneira tradicional, onde o método recebe dois parâmetros e os soma. Utilizando arrow function ficaria sua declaração da seguinte maneira
{% gist https://gist.github.com/henriqueweiand/5e81827b10a428b2e25049b6bf671669.js %}
Alem de um código mais enxuto a primeira vista, poderá acontecer onde cenários muito comuns como iteração de elementos de uma lista que para isso a função de iteração recebe uma arrow function e o resultado disso é que você não precisa definir uma nova função fora a iteração para utilizar, por exemplo
{% gist https://gist.github.com/henriqueweiand/7649380d4e14b4fd6c4b2fe9d6841f7f.js %}
### Desestruturação

A desestruturação assim como o próprio nome sugere, é um facilitador na hora de **obter valores de objetos e vetores**
{% gist https://gist.github.com/henriqueweiand/dab2728aeff51f27429700c9aaf9d865.js %}
Também é muito usado em funções e arrow functions ;)
{% gist https://gist.github.com/henriqueweiand/1d904683f946d5e3a57b147df0e596c9.js %}
Assim como podemos utilizar desestruturação com listas, veja que incrível!
{% gist https://gist.github.com/henriqueweiand/c785956568bac987e9c00d696e474929.js %}
### Rest e Spread operations

Esse são alguns dos operadores que mais gosto! São formas simples e diretas de recuperar conteúdo de objetos, vetores e parâmetros de função de maneira ágil!

### Rest operator

Vejam que utilizando o ... consigo recuperar o “resto” dos números contidos no vetor e isso é magnífico.
{% gist https://gist.github.com/henriqueweiand/9ed88c51cfc028fdf3634e1f873f1a39.js %}
### Spread operator

Possui a mesma sintaxe do Rest, mas é utilizado para “copiar” o conteúdo de um vetor ou objeto para outra estrutura de dados:
{% gist https://gist.github.com/henriqueweiand/f90c769b8fd00e9d5327a5e8cc191e69.js %}
### Map

Uma feature muito comum de ser utilizada, o map serve basicamente para iterarmos com uma lista, seja ela uma lista de objetos, inteiros, caracteres ou o que seja. O retorno dela será uma nova lista (array) conforme o valor corrente modificado ou não
{% gist https://gist.github.com/henriqueweiand/063ec24dd55a2a0e9b611efb368eeff6.js %}
É muito comum no ecossistema do react utilizarmos map para renderizar listas, por exemplo
{% gist https://gist.github.com/henriqueweiand/da98b042d254240222470183305c9ebc.js %}
Nesse exemplo, por mais que não utilizemos o retorno do método map, fizemos uso de sua interação para renderizar post de uma lista posts.

### Filter

O filter muito parecido com o map anterior também tem como função a iteração de uma lista (array), todavia, seu retorno não é uma lista completa e sim uma lista filtrada conforme retorno de dentro do método, ou seja. caso não de o retorno na iteração corrente a resultante final ficará sem aquele elemento.
>  É muito util em caso de filtro de uma lista

Vejamos um exemplo
{% gist https://gist.github.com/henriqueweiand/e2234bf70aef8c1d4bccce4048f472cd.js %}