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;
	}

view raw function-example.js hosted with ❤ by GitHub

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;
	}

view raw function-example.js hosted with ❤ by GitHub

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;
	});

view raw function-example.js hosted with ❤ by GitHub

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: '[e-mail]'
	}
	};
	let { title } = post;
	console.log(title); // Desestruturação super fácil
	let { author: { email } } = post;
	console.log(email); // [e-mail]

view raw function-example.js hosted with ❤ by GitHub

Também é muito usado em funções e arrow functions ;)

	function getEmail({ email }) {
	console.log(email);
	}
	const user = { email: '[e-mail]' };
	getEmail(user); // [e-mail]

view raw function-example.js hosted with ❤ by GitHub

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

view raw function-example.js hosted with ❤ by GitHub

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