5 truques bacanas do JavaScript ES6+

Depois que o ECMAScript 2015 (também conhecido como ES6) chegou, a maneira como escrevemos JavaScript mudou completamente. Problemas com escopos foram amenizados com o let, const e as arrow functions; trabalhar com herança ficou mais fácil graças ao sintaxe de classes; operações assíncronas ficam mais fáceis de gerenciar com as promises; entre muitas outras mudanças.

No artigo de hoje, gostaria de te apresentar 5 truques que utilizam tudo o que há de melhor na especificação para tornar a vida do(a) desenvolvedor(a) um pouco menos sofrida.

ps: você pode testar os códigos demonstrados neste artigo no repl.it ou no console do navegador de sua preferência.


Ainda não manja de ES6?

Para aqueles que ainda não estão craques na maneira como escrevemos JavaScript atualmente, recomendo o nosso curso Entendendo o ES6 disponível no Udemy. O curso é baseado no livro ECMAScript 6 — Entre de cabeça no futuro do JavaScript publicado pela Casa do Código.


Inverter o valor das variáveis

Um exercício muito comum quando estamos trabalhando com variáveis é inverter os seus valores, ou seja, colocar um valor de uma na outra e vice- versa. Com o desestruturamento de arrays, isso ficou muito fácil:

let a = 'code'; 
let b = 'prestige';
[a, b] = [b, a];
console.log(a,b); // prestige code

Async/Await com Desestruturamento

O async/await é uma novidade do ES8, mas pode ser combinado para com o Desestruturamento do ES6 para facilitar a busca de resultados em APIs. Veja como podemos utilizar a fetch API para solicitar informações em dois endpoints diferentes e então usar o desestruturamento para organizar suas respostas em variáveis:

// troque o nome do usuário e veja o resultado!
const [usuario, repos] = await Promise.all([
fetch('https://api.github.com/users/DiegoPinho'),
fetch('https://api.github.com/users/DiegoPinho/repos')
]);
console.log(usuario); // JSON com dados do usuário
console.log(repos); // JSON com dados dos repositórios do usuário

Concatenação de Arrays

No JavaScript é comum termos que trabalhar com arrays e eventualmente unificá-los. Até então fazíamos isso com o método concat(), mas com operador spread, também do ES6, isso ficou mais fácil:

const frutas = ['maça', 'uva', 'limão'];
const higiene = ['desodorante', 'escova', 'pasta de dente'];
// Jeito antigo
const listaDeCompras = [].concat(frutas, higiene);
// Jeito bacana
const listaDeCompras = [...frutas, ...higiene];
console.log(listaDeCompras); // maçã, uva, limão, desodorante, ...

Clones

Novamente com o desestruturamento de objetos, conseguimos facilmente clonar arrays e objetos.

const diego = {nome: 'Diego', sobrenome: 'Pinho'}
const clone = { ...diego };
console.log(clone); // {nome: 'Diego', sobrenome: 'Pinho'}

Parâmetros nomeados

Com a funcionalidade de parâmetros nomeados e com valores padrões, agora conseguimos organizar as chamadas aos métodos de forma muito mais organizada. Por exemplo, imagine que uma função receba três parâmetros, como sabemos o que eles correspondem?

funcaoComVariosParametros(2, 'Code Prestige', true);

Muitos editores de texto já nos auxiliam com isso, mas o ideal é consigamos entender o código só de bater o olho. Com parâmetros nomeados, podemos fazer isso:

funcaoComVariosParametros({id: true, nome: 'Code Prestige', empresa: true});

Bem legal, não é? Podemos até trocar a ordem dos parâmetros e vai continuar funcionando!

E se você gostou destes truques, não deixe de conferir este artigo e confira os links abaixo (inglês). Se você conhece mais algum truque, compartilhe conosco na seção de comentários!

Referências


Gostou? Recomende 👏 este artigo , comente, acompanhe nossa publicação para não perder os próximos artigos e compartilhe!
Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.br — Facebook, Twitter, Youtube