Boas práticas é algo imprescindível em qualquer lugar, principalmente na programação.
Hoje,
com tantas linguagens fantásticas, super rápidas e semânticas precisamos nos atentar às suas
boas práticas e não deixar que a tentação da “gambiarra” caia sobre nós. Com JavaScript, isso
não é diferente pois como qualquer outra linguagem, ela necessita das boas práticas para não
tornar sua aplicação aquele “macarrão” de códigos.
Eu separei algumas boas práticas que levo comigo na hora de desenvolver algo novo e
separarei elas em um top 5.
1. Utilize === e não ==
Quando comecei a usar JavaScript, caí neste erro que me causava uma grande dor de cabeça.
O modo em que o JS compara variáveis, na minha opinião é meio confuso e gera uma série de
dúvidas, por isso, sempre vá de ===.
Para você ter um exemplo do que estou falando, segue o código abaixo.
O comparador == compara somente o valor, sem comparar o tipo. Você pode perceber que eu
declaro a variável “a” como um inteiro com o valor 1, já a variável “b” recebe uma string com o
conteúdo ‘1’, com este comparador o resultado é true, mas quando coloco o comparador ===,
já retorna false, pois este comparador compara também os tipos das variáveis, parecido com o
[Link]()
Utilizar o comparador === irá evitar de você ficar horas e horas debugando e pensando “O que
pode estar errado?”.
2. Na hora de declarar objetos/arrays, declare da forma literal
No Java, quando queremos instanciar um objeto, fazemos mais ou menos assim:
EX: Car car = new Car();
Não é necessariamente uma má prática declarar um objeto em JavaScript com new Object(),
porém é menos verboso e esteticamente melhor declarar com abre/fecha chaves {}
3. Não declare variáveis com o operador var
Nunca declare variáveis com o operador var se não tiver consciente de como ela funciona.
Variáveis do declaradas como var, ficam expostas a todos os blocos, elas são consideradas
“globais”. Exemplo:
Percebe que a variável msgDentro fica disponível mesmo fora do bloco do operador IF.
Isso deve ao fato de que em JavaScript, todas variáveis são içadas para cima, ou seja, depois
de içada, ela fica em escopo global e este termo é chamado de hoisting. Para resolver isso, a
partir do ES6 foram criados os operadores let e const, que deixam disponíveis as variáveis
somente no bloco em que foram declaradas.
Para entender melhor como isso funciona, segue o link de um post bem bacana da Alura sobre
isso.
Entenda a diferença entre var, let e const no JavaScript - Blog da Alura
[Link]
4. Utilize Linters
Linters são ferramentas de depuração que ajudam a padronizar os códigos do projeto, por
exemplo: Se tiver uma equipe com 50 programadores, como fazer eles programarem no
mesmo padrão? Utilizando um linter.
Para JavaScript temos o JSLint e ele funciona como qualquer outro, ele lê o código escrito e
compara com as configurações dos padrões impostos pelo líder ou pela empresa.
Atualmente, eu utilizo muito o JSLint com a configuração da Airbnb, muitas empresas grandes
também o utilizam e cá entre nós, os códigos ficam muito mais bonitos.
5. Coloque os Scripts no fim da tag <body>
Diferentemente do CSS, o javascript trava o carregamento da página até baixar os scripts, isso
faz uma falsa ilusão de lentidão para o usuário, pois a tela ficará branca carregando até os
scripts carregarem, mas se você colocar os mesmos no fim da página, criará uma impressão
que a aplicação/site está mais rápida, pois o CSS carregará primeiro, juntamente com o HTML
e com isso o usuário terá um feedback mais rápido da página.
Conclusão
Boas práticas são sempre bem vindas em qualquer linguagem e no JS não é diferente,
implementando essas regras citadas acima, com toda certeza você terá um software limpo e de
fácil manutenção.
Se você estiver lendo até aqui, muito obrigado e caso tenha uma boa prática que ache que
seria legal colocá-la aqui, comente abaixo que terei todo o prazer de acrescê-la neste artigo.
Um forte abraço!
Ah, não esqueçam de deixar o clap ❤