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] |
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' } |
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); | |
}) |
É 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; |
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'] |
Top comments (0)