Boas praticas no js que utilizo no dia a dia

Salve galera, meu nome é Vinicius e comecei a trabalhar como dev em 2018.

Esse é meu primeiro post aqui no dev.to, resolvi trazer um pouco de boas praticas que utilizo no meu dia a dia.

1 - Função com três ou mais parâmetros, eu prefiro passar um objeto.

Quando tenho que desenvolver uma função com três ou mais parâmetros fica um pouco trabalhoso de passar os parâmetros para a função e quando não é uma função que eu desenvolvi, porém preciso utilizar necessito voltar na declaração da função para saber oque é necessario passar em cada campo.

Exemplo de uma função com mais que três parâmetros:

No momento que chamamos a função se somos o criador da função fica até facil de lembrar, porém os valores ficam soltos e é necessario ir direto na declaração da função para saber oque é necessario passar em cada campo.

Como essa função ultrapassa os três parâmetros podemos refatorar usando um objeto.

Exemplo de como é fazer a chamada da função sendo que os parâmetros estão em um objeto:

Sim! Parece que escrevemos mais! Porém tem algumas vantagens…

Parece que o codigo esta mais verboso só que temos algumas vantagens que vou listar.

• Primeiro que temos um tipo encapsulado do nosso metodo que podemos reutilizar em alguns outros locais.
• A ordem dos valores agora tanto faz na invocação e fica bem mais facil de saber quais parâmetros são necessarios sem precisar ver a declaração da função, diminuindo o esforço cognitivo em futuras manutenções.
• Legibilidade, quando alguem olha para a invocação da função imediatamente consegue identificar os parâmetros usados.

2 - Programação funcional > programação imperativa 😲

Estou brincando, na verdade seria utilizar os artificios funcionais da linguagem quando for possivel.

Javascript é uma linguagem que não é funcional 100% porém podemos utilizar alguns artificios que ajuda na legibilidade e no nosso dia a dia.

Vou mostrar um exemplo de uma soma de valores feito de um modo imperativo.

Essa carinha do for já é bem manjada porque aprendemos na faculdade, porém podemos fazer algo mais simples e que provavelmente vai melhorar o nosso desempenho e conhecimento de como podemos trabalhar com arrays no JS.

esse acima é o reduce ele é um metodo para arrays no JS, em primeiro momento parece um pouco complicado porém com uma breve explicação da para entender, vamos a explicação.

const total = comandas.reduce((acc, comanda) => acc + comanda.valor, 0);

Como é um metodo funcional primeiramente ele recebe uma função que no javascript normalmente chamamos de função de callback, essa função recebe um acumulador (acc) e um campo da comanda, depois dessa função ele recebe o valor inicial do acumulador que é 0.

Logo em seguida a função de callback é rodada recebendo campo a campo do array alterando o acumulador pelo retorno da função do reduce que seria acc + comanda.valor e após passar em todos os campos do array executando a função e guardando o acumulador ele retorna oque foi acumulado para a variavel total

Além do reduce temos o map , flatMap, filter, find, sort, todos esses ajudam bastante no dia a dia e melhoram a legibilidade e diminui o esforço cognitivo no codigo.

3 - Não utilize ELSE!!

Okay isso pode ser um pouco complicado de inicio e vai necessitar um pouco que você exercite, não utilizar else é uma regra do object calisthenics e eu acho ela uma das mais legais entre as 9 regras descritas.

Sem o else você consegue diminuir o fluxo de condições do seu codigo e com isso diminui a complexidade, maior problema do else que eu vejo é que ele é TUDO que não for if, em certas ocasiões faz total sentido ter um else ,dependendo da regra de negocio pode ser necessario um else porém a maioria do tempo não precisariamos dele.

Uma tecnica legal é utilizar o early return, ele consiste em sempre retornar o mais rapido possivel de um metodo, sempre saia rapido de dentro de um metodo.

Uma ideia que utilizo é verificar as possiveis condições como regra de negocio e erros no inicio e o “caminho feliz” fica no final.

Ta bom já expliquei o suficiente vamos ver um codigo para ficar mais claro.

Este codigo acima verificamos se o valor é acima de 90 não cobramos frete e caso não seja maior que 90 cobraremos frete, porém podemos melhora-lo.

Beleza, ficou um pouco mais limpo sem o else e conseguimos diminuir o esforço cognitivo de entender esse metodo, também diminuimos os fluxos que a aplicação pode seguir.

3.1 Early return são os amigos que fazemos pelo caminho.

O early return consiste em falhar rapido, ( ué oque significa isso ? ) valide os possiveis problemas antes do “caminho feliz” vamos direto ao codigo.

Percebe que é até feio de olhar para um codigo desse ?

Nesse codigo verificamos se o cara gastou mais de 90 e se for franqueado não paga frete, porém se for franqueado paga o frete, e no else verificamos se o valor ta invalido e avisamos o usuario do valor invalido, caso esteja valido apenas cobra o frete normalmente.

Imagina para o nosso cerebro que utilizamos ele o dia todo, o esforço cognitivo que utilizamos para entender.

Podemos refatorar esse codigo pensando em uma regra do early return, falhar rapidamente, exemplo:

Levamos a validação de campo invalido para o começo do metodo e retornamos o quanto antes o erro para o usuario e não precisamos entrar no codigo todo, porém podemos melhorar ainda mais as validações.

Aqui fazemos as validações antes e deixamos o “*************caminho feliz”************* por ultimo, verificamos se o usuario é franqueado caso seja pula para o outro if e verifica se o valor é acima de 90 e não cobra o frete e caso não seja acima de 90 cobra o frete normalmente.

Não precisamos aninhar if algum e conseguimos manipular melhor as condições e nosso esforço para entender é bem menor.

4 - Substituindo os switchs do nosso codigo

No Javascript as vezes nos perdemos em fazer um switch/case ou até varios if que funcionam para verificar um valor constante e retornar algo, nesses casos podemos usar o object literal, não confunda com template literal.

Object literal nada mais é que um objeto javascript porém como tem a chave e valor do objeto podemos criar algumas “verificações” que facilitam e limpam bastante o codigo.

Exemplo com if

Exemplo com switch/case

Apenas um exemplo porém deu para perceber que são valores estaticos, sem validações e estamos fazendo um parser dos valores para outra informação.

Mesmo assim ficou um codigo estranho e complicado para pouca coisa que ele faz, fora a repetição de codigo e no caso do switch/case o erro de esquecer um break; é enorme.

Podemos trazer o object literals para nós ajudar nisso e melhorar a legibilidade do codigo, exemplo:

Uau parece magica né, porém o oque fazemos é passar o tipo para o objeto e pela chave do campo ele retorna o valor e o valor padrão sera Visitante caso não tenha nenhum retorno.

Podemos ver que melhorou a legibilidade e também a manutenção desse codigo, é um codigo que pode escalar rapidamente apenas incluindo novos valores na variavel tiposDeUsuarios e não precisamos repetir codigo.

Acaba aqui 🤙

Espero ter agregado algum valor a nossa comunidade, escrevi as primeiras coisas que chegaram na minha cabeça e fiz alguns exemplos para ilustrar.

Se vocês tiverem boas praticas que sempre lembram de utilizar no dia a dia comenta que também quero saber.

Tamo junto galera. 🤓