9 truques para desenvolvedores JavaScript Kickass em 2019

Lukas Gisder-Dubé Blocked Unblock Seguir Seguindo 7 de janeiro Foto de Andrew Worley no Unsplash

Mais um ano e o JavaScript está sempre mudando. No entanto, existem algumas dicas que podem ajudá-lo a escrever código limpo e eficiente que escala, mesmo (ou talvez especialmente?) Em 2019. Abaixo está uma lista de 9 dicas pragmáticas que farão de você um desenvolvedor melhor.

1. async / await

Se você ainda está preso no inferno, 2014 quer seu código de volta. Apenas não use callbacks, a menos que seja absolutamente necessário, por exemplo, requerido por uma biblioteca ou por razões de desempenho. As promessas são boas, mas são um pouco difíceis de usar se sua base de código ficar maior. A minha solução go-to hoje em dia é async / await, o que torna a leitura e a melhoria do meu código muito mais limpa. Na verdade, você pode await cada Promessa em JavaScript, caso uma biblioteca que você esteja usando esteja retornando uma Promessa, simplesmente await ela. De fato, async / await é apenas açúcar sintático em torno de promessas. Para fazer seu código funcionar, você só precisa adicionar a palavra async chave async na frente de uma função. Aqui está um exemplo rápido:

Note que await no nível superior não é possível, você só pode chamar uma função async .

O async / await foi introduzido com o ES2017, portanto, certifique-se de transpilar seu código.

2. fluxo de controle assíncrono

Muitas vezes, é necessário buscar vários conjuntos de dados e fazer algo para cada um deles ou concluir uma tarefa depois que todas as chamadas assíncronas tiverem retornado um valor.

para de

Digamos que temos alguns Pokémons em nossa página e precisamos buscar informações detalhadas sobre eles. Não queremos esperar que todas as chamadas sejam concluídas, especialmente quando não sabemos quantas existem, mas queremos atualizar nossos conjuntos de dados assim que recebermos algo em troca. Nós podemos usar for...of fazer um loop através de um array e executar um código async dentro do bloco, a execução será interrompida até que cada chamada seja bem sucedida. É importante observar que pode haver gargalos de desempenho se você fizer algo assim em seu código, mas é muito útil mantê-lo em seu conjunto de ferramentas. Aqui está um exemplo:

Esses exemplos estão realmente funcionando, sinta-se à vontade para copiá-los e colá-los em sua sandbox de código favorito

Promise.all

E se você quiser buscar todos os Pokemon em paralelo? Desde que você pode await todas as promessas, basta usar Promise.all :

for...of e Promise.all foram introduzidos com ES6 +, portanto, certifique-se de transpilar seu código.

3. Destruturação e valores padrão

Vamos voltar ao nosso exemplo anterior, onde fazemos o seguinte:

 const result = axios.get (`https://ironhack-pokeapi.herokuapp.com/pokemon/$ {entry.id}`) 
 dados const = result.data 

Existe uma maneira mais fácil de fazer isso, podemos usar a desestruturação para obter apenas um ou alguns valores de um objeto ou matriz. Nós faríamos assim:

 const {data} = aguardo axios.get (...) 

Nós salvamos uma linha de código! Yay! Você também pode renomear sua variável:

 const {data: newData} = aguardo axios.get (...) 

Outro truque legal é dar valores padrão ao desestruturar. Isso garante que você nunca acabará com undefined e você não precisa verificar as variáveis manualmente.

 const {id = 5} = {} 
 console.log (id) // 5 

Esses truques também podem ser usados com parâmetros de função, por exemplo:

O exemplo pode parecer um pouco confuso no início, mas leve seu tempo e brinque com ele. Quando não passamos nenhum valor como argumento para nossa função, os valores padrão são usados. Assim que começarmos a passar valores, apenas os valores padrão para argumentos não existentes serão usados.

Os valores padrão e de desestruturação foram introduzidos no ES6, portanto, certifique-se de transpilar seu código.