DEV Community

Henrique Weiand
Henrique Weiand

Posted on • Edited on

Arrow functions, Desestruturação, Rest/Spread operator, map e filter

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)

// Sem arrow function
function soma(num1, num2) {
return num1 + num2;
}

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
// Com arrow function
const soma = (num1, num2) => {
return num1 + num2;
}

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
// Com arrow function
const sumNumbers = numbers.map((n) => {
return n + 1;
});

Desestruturação

A desestruturação assim como o próprio nome sugere, é um facilitador na hora de obter valores de objetos e vetores

const post = {
title: 'Desestruturação super fácil',
author: {
nome: 'henrique weiand',
email: 'henriqueweiand@gmail.com'
}
};
let { title } = post;
console.log(title); // Desestruturação super fácil
let { author: { email } } = post;
console.log(email); // henriqueweiand@gmail.com

Também é muito usado em funções e arrow functions ;)
function getEmail({ email }) {
console.log(email);
}
const user = { email: 'henriqueweiand@gmail.com' };
getEmail(user); // henriqueweiand@gmail.com

Assim como podemos utilizar desestruturação com listas, veja que incrível!
const letters = ['a', 'b', 'c'];
let [valor1, valor2, valor2] = letters;
console.log(valor1); // a
console.log(valor2); // b
console.log(valor3); // c

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.

const letters = ['a', 'b', 'c', 'd', 'e'];
let [valor1, valor2, …valores] = letters;
console.log(valor1); // a
console.log(valor2); // b
console.log(valores); // [c, d, e]
view raw rest.js hosted with ❤ by GitHub

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:

const post = { title: 'Spread é facil', description: 'conteúdo do post' };
const newPost = { …post, author: 'henrique weiand' };
console.log(newPost); // { title: 'Spread é facil', description: 'conteúdo do post', author: 'henrique weiand' }
view raw spread.js hosted with ❤ by GitHub

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

// exemplo 1
const numbers = [1,2,3,4]
const soum = numbers.map((number) => {
return number + 1;
})
// exemplo 2
const posts = [
{
"title": "Desestruturação",
"description": "Conteúdo"
},
{
"title": "Desestruturação",
"description": "Conteúdo"
},
]
posts.map((post) => {
console.log(post);
})
view raw map.js hosted with ❤ by GitHub

É muito comum no ecossistema do react utilizarmos map para renderizar listas, por exemplo
import React, { Component } from 'react';
class Teste extends Component {
render() {
const posts = [
{
"title": "Desestruturação",
"description": "Conteúdo"
},
{
"title": "Desestruturação",
"description": "Conteúdo"
}
]
return (
<div>
{
posts.map((post) => {
return (
<div>
{post.title} - Ler post
</div>
)
})
}
</div>
)
}
}
export default Teste;
view raw map.js hosted with ❤ by GitHub

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

const letters = ['a', 'b', 'c', 'd'];
const lettersWithFilter = letters.filter((letter) => {
if(letter == 'b')
return letter
})
console.log(lettersWithFilter) // # resultado ['a', 'c', 'd']
view raw filter.js hosted with ❤ by GitHub

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more