50 regras de melhores práticas de

Javascript para escrever um código melhor

Antes do ponto e vírgula 5 de novembro de 2020  ·  10 min de leitura

Javascript é poderoso e flexível, o que permite que você codifique da maneira que
quiser e tente algumas coisas muito incomuns que podem levar a um bug em seu
código. Aqui estão 50 coisas que aprendi sobre codificação em Javascript e que você
deve saber.

Sempre “usar estrito” ativado
Provavelmente, se você estiver usando qualquer biblioteca / estrutura ou compilador
para o seu Javascript, “use strict” está ativado, mas caso não esteja, lembre-se de
adicioná-lo ao arquivo e às funções. Isso garantirá que você obtenha erros que
aconteceriam silenciosamente se não o incluísse.
Use expressões de função em vez de declarações de função
A menos que você queira aproveitar as vantagens do comportamento e das
propriedades de Function, dê preferência às expressões de função. As declarações
de função são suspensas e, embora às vezes possam ser úteis, evite-as, pois elas
introduzem um comportamento estranho no código e nem sempre é óbvio o que
está acontecendo. Tente deixar claro de onde vem a função que você está usando, e
antes de usá-la, para evitar acessos estranhos.

Pare de usar “var”!

Declarações com “var” também são içadas, o que torna as declarações var acessíveis
antes de onde a declaração aconteceu, o que é um comportamento estranho e não
óbvio.

Use “const” e imutabilidade tanto quanto possível

Prefira a imutabilidade tanto quanto possível. A alteração constante dos dados e sua
distribuição podem dificultar o rastreamento de bugs e as próprias
alterações. Trabalhe em cópias de dados e evite efeitos colaterais.

Prefira funções puras

Continuando com a observação do efeito colateral, certifique-se de que suas funções
não estejam alterando os dados com que são chamadas ou dados no escopo onde
foram criadas.
Prefira classes a funções de construtor
Embora a função construtora permita que você faça algumas coisas muito boas, se
você estiver procurando por seu protótipo é um sinal de que você precisa usar
“classes”, que são suportadas em praticamente qualquer lugar. É mais limpo e é
mais provável que as pessoas entendam.

Use “desestruturação”
A desestruturação é elegante e torna mais óbvio o que você precisa de array e
objetos e também oferece a oportunidade de renomear coisas para ajudar a dar mais
sentido ao seu código.

Trabalhe apenas com os dados de que você precisa

Como os exemplos acima, a desestruturação é uma boa maneira de extrair os dados
de que você precisa para fazer o trabalho, mas também crie o hábito de chamar
apenas métodos e funções com as coisas de que precisam. Isso também vai para os
dados provenientes da API. Extraia e limpe apenas os dados de que você precisa
antes de armazenar ou fazer qualquer coisa com eles.

Sempre use “===”

O triplo igual verifica o valor e o tipo e é algo que você sempre deseja fazer. Crie o
hábito de sempre verificar três vezes e evitar efeitos indesejáveis.

Evite variáveis globais

Evitando criar coisas em objetos globais, a menos que você esteja criando uma
biblioteca / estrutura. Nomes de propriedades globais podem colidir com terceiros
ou algo que um colega também apresentou e são difíceis de depurar.

Envolva as declarações soltas em blocos

Você pode evitar conflito de nomes e perda de acesso a declarações temporárias
envolvendo uma lógica rápida em seu próprio escopo.

Organize suas declarações

Seja consistente com a maneira como você declara as coisas. Coloque todas as suas
declarações no topo, começando com as constantes até as variáveis. Faça constantes
todas em maiúsculas para indicar que são constantes, o que evitará que os
desenvolvedores tentem alterá-las.

Não inicialize coisas com "indefinido"

Algo é “indefinido” quando carece de valor. Vamos concordar que atribuir “nenhum
valor” como um “valor” para algo é um conceito muito estranho, certo? Já que o
Javascript já torna as coisas “indefinidas”, como você pode dizer se algo está
indefinido por sua causa ou pelo Javascript? Isso torna difícil depurar por que as
coisas são "indefinidas", então prefira definir as coisas como "nulas".

Sempre inicialize suas declarações

Pelo mesmo motivo, você não deve dar “indefinido” como um valor às declarações,
você não deve deixá-los sem um valor porque eles são “indefinidos” por padrão.

Lint seu código e tenha um estilo consistente

Lintar seu código é a melhor maneira de garantir uma aparência consistente de seu
código e certificar-se de que as pessoas não façam coisas estranhas com ele
também. Isso coloca todos na mesma página.
Usar texto digitado
O typescript pode ajudá-lo muito a entregar um código melhor. Será necessário
algum tempo para se acostumar, se você nunca experimentou um sistema de tipos,
mas compensa no longo prazo.

Funções e métodos devem fazer apenas uma coisa

É fácil se deixar levar por adicionar coisas extras para funcionar enquanto você está
nisso e a melhor maneira de descobrir se uma função está fazendo muito é olhando
seu nome. O nome deve informar o que a função faz e qualquer coisa não
relacionada deve ser eliminada.

Não seja preguiçoso ao nomear coisas

Sempre coloque algum esforço em nomear as coisas. Se for difícil nomear, você
provavelmente atribuiu a ele responsabilidades extras ou não entende o que é. Dê a
ele pelo menos um nome de 3 letras com significado.

Evite declarações desnecessárias

Algumas declarações podem ser totalmente evitadas, portanto, declare apenas
quando for estritamente necessário. Muitas declarações podem sugerir uma falta de
design de código adequado ou consideração de declaração

Use os valores padrão quando possível

Ter padrões é mais elegante do que lançar erros porque algo não foi fornecido. Se
você realmente deseja capturar valores não fornecidos, pode verificar meu artigo
sobre a solução 25 javascript, onde compartilho uma maneira de fazer as coisas
necessárias que geram erro se nenhum valor for fornecido.
Sempre tenha um caso padrão para instruções switch
Não deixe suas instruções switch sem um caso padrão porque algo pode dar errado e
você deseja ter certeza de que detectou isso.

Nunca use “eval”

Nunca! Não é necessário.

Evite a “nova” palavra-chave

Exceto para instâncias de classes e funções de construtor, você nunca deve usar a
palavra-chave “new” para qualquer outra coisa. Eles podem tornar os compiladores
mais lentos.

Adicione comentários significativos para coisas não óbvias

Apenas adicione comentários quando você fez algo não comum, estranho ou requer
contexto para ser compreendido. Além disso, adicione comentários a coisas que são
um hack ou podem exigir melhorias / consertos mais tarde para que a próxima
pessoa saiba o porquê. Adicione comentários nos módulos de terceiros e módulos
em sua base de código para explicar a arquitetura e a intenção por trás das coisas.

Mantenha os ternários simples

Na pior das hipóteses, você tem dois ternários aninhados. Qualquer coisa mais deve
ser uma instrução if ou switch para facilitar a leitura e razões de depuração.

Simplifique com encadeamento opcional

Livre-se dessas verificações aninhadas e use o “?” Operador.
Prefira promessas a chamadas de retorno
As promessas são fáceis de usar e qualquer coisa com um retorno de chamada pode
ser “prometida”. Callbacks é a função de chamar uma vez que algo é feito, seja
síncrono ou não e com promessas e assíncrono ... esperar que você faça coisas
assíncronas que podem acelerar o seu código, especialmente porque o Javascript é
de thread único. Você não pode se safar com promessas apenas às vezes, mas as
promessas também facilitam a leitura do código.

For loops> .forEach às vezes

Não mude as coisas em um array apenas para que você possa ".forEach". Você está
adicionando um processo extra a uma alternativa lenta. Os loops For são mais
rápidos e permitem que você use as palavras-chave “continue” e “break” para
controlar o loop.

“Para ... em” e “para ... de”

Os loops for-in e for-of são maneiras muito poderosas de fazer um loop. O loop “for-
of” permite que você repasse os valores do array, strings, Map, Set, etc. Não há
necessidade de alterar algo em um array para usar .forEach. Eu evitaria o “for-in”
para o loop, pois é o mais lento e itera sobre as chaves de protótipo.

Otimizar para loops?

Os loops For já estão otimizados pelo compilador, então não há necessidade desse
tipo de otimização.
Sempre "tente ... capturar" métodos JSON
Não confie nas coisas passadas para os métodos JSON “.stringify” e “.parse”. Tente
capturá-los para garantir que não falhem e quebrem seu código.

Prefira strings de modelo

É simples assim. Strings de modelo permitem que você injete valores na string e
mantêm o formato que pode ser útil.

Evite aninhamento ou loops de encadeamento

Quando você encadeia o método de iteração ou aninha os loops, está aumentando a
complexidade do código, o que pode tornar as coisas mais lentas mais tarde ou
conforme seus dados aumentam. Mesmo que algumas operações possam exigir isso,
sempre avalie sua estratégia de looping para garantir que você não tenha loops
desnecessários ou loops que podem ser combinados.

Evite hacks estranhos ilegíveis

Eles estão por toda a internet porque as pessoas os acham “legais”. Eles geralmente
são estranhos, não convencionais e não óbvios quando você olha para eles. É
sempre melhor seguir as diretrizes da ferramenta que você está usando para garantir
o desempenho adequado. Hacking deve ser a última alternativa.

Prefira o operador “resto” em vez de “argumentos”

O operador “rest” trabalhará com funções de seta onde “argumentos” não estão
disponíveis. Limite-se a uma maneira de acessar os argumentos de sua função.

Prefira “ globalThis ” para acesso global

Deixe o Javascript cuidar do resto e certifique-se de que seu código funcionará,
esteja dentro de um Web Worker ou Nó de back-end.

Compreenda o Javascript, mas construa com bibliotecas e estruturas

Eu recomendo investir tempo no entendimento da linguagem Javascript em si, mas
construir com ferramentas poderosas como React e Angular para evitar erros
comuns. Certifique-se de seguir suas orientações, pois essas ferramentas já
protegem contra erros comuns e empregam as melhores práticas.

Adicione ponto e vírgula, sempre!

Você pode se surpreender ao descobrir que pode se safar sem colocar um ponto-e-
vírgula no código Javascript. Saiba que o compilador os adiciona e ferramentas
como o Babel podem facilmente interpretar mal o seu código e causar um bug na
produção. Sempre adicione ponto e vírgula!

Legível> Desempenho, a menos que você precise de desempenho

Existem maneiras de obter mais desempenho fazendo coisas que geralmente são
difíceis de ler, mas a menos que você esteja desesperado por desempenho no nível
do código (o que é raro), torne-o legível.

Tenha cuidado com as verificações “Verdadeira” e “Falsa”

Não confie na “truthy” e “Falsas” cheques desde que você pode facilmente
introduzir bugs em seu código. Tente ser específico em suas verificações, pois coisas
inesperadas podem passar por uma verificação verdadeira.

Prefira o Ternário ao lógico “|| e “&&” verifica

Os operadores “ou” e “e” avaliam o “verdadeiro” e “falso” de um valor que pode
resultar em resultados indesejados. Além disso, não confie nele para fazer
verificações de condições lógicas estranhas, pois elas não são legíveis e fáceis de
entender.
Cuidado com "indefinido" e "nulo" com o "??" operador
O operador nullish coalescing garante que os valores nulos e indefinidos não sejam
selecionados e é perfeito para os casos em que você deseja garantir que haja um
valor ou retorno para um valor padrão.

Tenha cuidado com as conversões automáticas de tipo

Este é provavelmente outro motivo para tentar o Typescript, já que o Javascript faz
uma conversão automática de tipo que pode não ser o que você esperava. Os
valores “verdadeiros” tornam-se “verdadeiros” e os valores “Falsos” tornam-se
“falsos”. Fazer contas entre número e string pode realmente funcionar ou resultar
em uma concatenação de string. Os números quase sempre transformam os valores
“Falsy” em “zero” e “Truthy” em “um”.

Nunca confie em dados que você não cria

Sempre que você estiver lidando com dados vindos de um usuário ou de uma API
que você não conhece, certifique-se de que sejam do tipo correto e em um formato
com o qual você possa trabalhar antes de fazer qualquer operação.

Use regex ao extrair e procurar coisas em Strings

Regex é super poderoso e divertido. Evite manipulações estranhas, como procurar
índices e pegar coisas. Regex permite que você procure por padrões complexos e

IIFE e pequenas bibliotecas de utilitários

O IIFE é uma maneira excelente de executar as coisas o mais cedo possível, da qual
você pode aproveitar para configurar algumas coisas antes que o resto do código
comece a ser executado. Você também pode usá-lo para inicializar pequenas
bibliotecas com uma API simples que permite encapsular algumas lógicas complexas
e expor um objeto que você pode usar para interagir de forma semelhante a como
o jQuery é construído.

Evite se repetir com utilitários

Sempre transforme as coisas que você faz repetidamente em pequenas funções
genéricas que você pode reutilizar mais tarde. Como desenvolvedor, você não deve
repetir coisas e pequenas funções tornam-nas fáceis de testar e reutilizar.

Não aproveite os “recursos” estranhos de Javascript

Coisas como atualizar a propriedade de comprimento de array , usar a palavra-
chave “with” , palavra-chave void , atualizar protótipos de objetos nativos como
Date, Array, Object, etc. Outros como passar uma string para setTimeout e
setInterval . Só porque o idioma permite, não significa que você deva.

Adicionar testes de unidade

Como desenvolvedor, muitas vezes encontrei bugs quando comecei a adicionar
testes de unidade. Os testes são a melhor maneira de garantir que seu código esteja
o mais livre de erros possível. Jest é uma excelente opção para começar, mas
existem outras que também são simples de usar.