Como usar funções de desestruturação e seta para melhorar seu código JavaScript

Indrek Lasn Blocked Unblock Seguir Seguindo 15 de dezembro de 2018 Foto de Fabian Grohs em Unsplash

Sem mais delongas, aqui estão alguns “truques” diários para tornar seu código Javascript muito mais legível.

Destruturação

Tome este objeto (intencionalmente) profundamente aninhado. A leitura da age de um mamífero nos levaria a um código muito detalhado e repetitivo.

Em vez de fazer isso, podemos usar o encurtamento do código por uma margem enorme com a destruição de objetos.

Desestruturação de objetos

Destruindo urso e veado

Muito melhor e menos detalhado. Note que estamos usando constantes, já que não queremos mudar a idade. Mas pense nisso: a idade não é uma constante … uma vez por ano, de fato, a idade aumenta.

Se a declararmos como uma constante e tentarmos alterá-la mais tarde, obteremos um erro. Esse é o ponto de uma constante… é imutável.

Para brincar com essa restrição (intencional) , podemos usar a palavra-chave let (mutável):

Legal funciona. Vamos tentar desconstruir usando as palavras-chave let e const . Dê ao urso e veado um nome. Agora – geralmente, o nome de um indivíduo não muda com muita freqüência – se alguma vez – assim, podemos tratá-lo como imutável.

Também podemos aplicar a desconstrução em matrizes, da seguinte forma:

Desconstrução de matriz

Legal huh – mas tem muito mais!

Eu recomendo ler mais sobre os altos e baixos sobre a desconstrução – Abaixo você encontrará um capítulo detalhado sobre desestruturação.

http://exploringjs.com/es6/ch_destructuring.html

Funções de seta

As funções de seta são uma maneira legal de encurtar seu código – elas não são exatamente as mesmas funções tradicionais. As funções de seta têm um escopo léxico – entraremos nisso em breve.

Pegue a nossa matriz anterior de animais – como você passaria por todos os animais e console.log ?

Nada muito especial, tradicional para forEach loop. Para cada animal nós desconectamos o animal. Vamos refatorar nosso loop forEach para usar as funções de seta.

Muito mais limpo e menos detalhado. Quanto menos código tivermos que escrever, menos temos que manter no futuro. Uma boa regra é escrever menos código, mas não um código muito inteligente .

Aqui está um exemplo mais complexo:

Esse padrão é chamado de currying – nós retornamos uma função dentro de uma função. O exemplo mais notável que utiliza o currying seria a função connect()() do Redux .

nota: ** é o operador de exponenciação e equivale a Math.pow

A função multiplyAndAdd explicou:

  • multiplyAndAdd pega um número, retorna a base ao poder do exponent (multiplicação)
  • Adiciona um número ao expoente

multiplyAndAdd(2)(4) é o mesmo que 2x2 + 4

Vamos escrever a mesma funcionalidade usando as funções de seta.

Menos detalhado, com certeza – mas podemos fazer ainda mais.

Woah! Estamos abaixo de 6 linhas para apenas 1 linha de código.

Advertência nº 1: Observe que não há declarações de retorno. Normalmente, as instruções de return são necessárias para retornar valores de funções. As funções de seta chamam o return implicitamente, desde que não haja chaves. Se usarmos funções de seta com chaves, temos que chamar o retorno explicitamente.

Se isso é novo para você, confira este artigo incrível sobre as regras de retorno.

Advertência # 2: A palavra this chave this funciona de forma diferente com as funções de seta.

Tomemos este exemplo: temos um objeto person – dentro do objeto temos duas propriedades, o name da pessoa e uma função que retorna o nome da person

Se chamarmos a sayName método, o primeiro this aponta para o objeto pessoa, mas a segunda this é undefined ?

Nota: O segundo this realmente aponta para o objeto janela, mas já que estamos usando Quokka, não há nenhum objeto janela.

Em segundo lugar, aponta para a janela

Por que isso acontece? Só para salientar, essa também é uma pergunta muito comum na entrevista – responder isso demonstra uma boa compreensão da mecânica da linguagem. Confira esta resposta do StackOverflow para uma resposta detalhada .

Aqui está uma solução comum para isso com funções regulares.

As funções de seta têm um escopo léxico e seu valor dentro da função de seta é determinado pelo escopo ao redor – assim, eles não precisam dessa solução alternativa.

Se você achou este artigo útil, por favor, nos dê algumas palmas para que mais pessoas possam vê-lo.

Você pode entrar em contato comigo com perguntas no Twitter.

Indrek Lasn (@lasnindrek) | Twitter
Os últimos Tweets de Indrek Lasn (@lasnindrek). {{?.bio}}. Zurique, Suíça twitter.com

Aqui estão alguns artigos que você pode gostar:

Sobrecarregue sua experiência de depuração para o Node.js
Você vê isso, o que você faz? medium.com
? Implemente o seu ambiente de desenvolvimento imenso com estas extensões do Visual Studio Code
Vamos falar sobre Code – Visual Studio Code. medium.freecodecamp.org
Como configurar uma API poderosa com Nodejs, GraphQL, MongoDB, Hapi e Swagger
Separar seu frontend e backend tem muitas vantagens: medium.freecodecamp.org
Aqui estão alguns dos melhores recursos para melhorar suas habilidades de codificação
Há muitos tutoriais, livros e recursos gerais de codificação de alta qualidade na web. Eu juntei o melhor… medium.com
Veja o que você precisa saber como um novo desenvolvedor
Se você já começou a aprender programação e decidiu ficar sério – ou você está recém fora da escola sem trabalho… medium.freecodecamp.org