Particularmente, considero javascript uma das linguagens mais fascinantes com que já trabalhei. Mas, assim como ocorre com outros desenvolvedores, grande parte das minhas habilidades nessa linguagem evoluíram mais pela prática do que por um esforço consciente e estruturado para aprendê-la. Uma consequência comum dessa abordagem, principalmente para quem está começando, é a produção de códigos de baixa qualidade. Códigos difícieis de entender e, principalmente, mais fáceis de bugar.
Com esse post, espero contribuir para que outros desenvolvedores evitem dores de cabeça no futuro e busquem adquirir boas práticas para desenvolver código com mais qualidade:
<div id="toc_container" role="navigation" aria-label="Table of Contents" data-nosnippet class="toc_white no_bullets toc_numbered toc_title_center">Sumário<ul class="toc_list"><li><a href="#Use-com-consciencia-os-comparadores-de-igualdade-e">1. Use com consciência os comparadores de igualdade == e ===</a></li><li><a href="#Sempre-utilize-o-ponto-e-virgula-nos-locais-apropriados">2. Sempre utilize o ponto e vírgula nos locais apropriados</a></li><li><a href="#Evite-declarar-variaveis-no-escopo-global">3. Evite declarar variáveis no escopo global</a></li><li><a href="#Tenha-cuidado-ao-trabalhar-com-decimais">4. Tenha cuidado ao trabalhar com decimais</a></li><li><a href="#Crie-o-habito-de-utilizar-o-estilo-de-indentacao-KR-ou-um-de-seus-variantes">5. Crie o hábito de utilizar o estilo de indentação K&amp;R ou um de seus variantes</a></li><li><a href="#Atencao-ao-utilizar-a-variavel-this-no-JavaScript">6. Atenção ao utilizar à variável this no JavaScript</a><ul><li><ul><li><a href="#-Quando-a-funcao-que-a-utiliza-e-chamada-como-um-metodo">6.0.1. ⦁ Quando a função que a utiliza é chamada como um método;</a></li><li><a href="#-Quando-a-funcao-que-a-utiliza-e-chamada-como-uma-funcao">6.0.2. ⦁ Quando a função que a utiliza é chamada como uma função;</a></li><li><a href="#-Quando-a-funcao-que-a-utiliza-e-utilizada-como-um-construtor">6.0.3. ⦁ Quando a função que a utiliza é utilizada como um construtor;</a></li><li><a href="#Quando-a-funcao-e-chamada-com-o-operador-new-a-variavel-this-e-inicializada-com-o-objeto-criado">6.0.4. ⦁ Quando a função é chamada com o operador new, a variável this é inicializada com o objeto criado.</a></li><li><a href="#-Quando-o-valor-de-this-e-definido-explicitamente">6.0.5. ⦁ Quando o valor de this é definido explicitamente.</a></li></ul></li></ul></li></ul></div>
<h2 style="text-align: justify;">Use com consciência os comparadores de igualdade == e ===</h2>
Desenvolvedores com alguma experiência em linguagens cuja sintaxe seja semelhante à de JavaScript, como Java e C#, já estão acostumados a usar o operador == para comparação de igualdade. Todavia, apesar das semelhanças, em JavaScript o operador == possui um comportamento um pouco diferente. Para começar, em JS existem dois operadores distintos, o operador de igualdade duplo (==) e o triplo (===). A diferença entre esses consiste em que o operador triplo não realiza conversão de valores antes da comparação.
Exemplo: 
<img fetchpriority="high" decoding="async" class="aligncenter wp-image-604 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image002.jpg" alt="image002" width="454" height="120" /> 
Nas duas primeiras linhas, o operador == realiza a conversão dos valores comparados para um mesmo tipo antes de efetivamente compará-los. Isso pode levar a um resultado diferente do esperado.
A mesma regra se aplica à desigualdade:
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image004.jpg"><img decoding="async" class="aligncenter wp-image-605 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image004.jpg" alt="image004" width="455" height="117" /></a> 
Como adendo, evite ainda declarar objetos como String e Number. Eles não podem ser utilizados para fins de comparação: 
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image006.jpg"><img decoding="async" class="aligncenter wp-image-606 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image006.jpg" alt="image006" width="671" height="179" /></a>
<h2 style="text-align: justify;">Sempre utilize o ponto e vírgula nos locais apropriados</h2>
Você já deve ter percebido que, embora a sintaxe de JavaScript exija o uso de ponto e vírgula ao final de uma expressão, na maioria das vezes, o seu código irá funcionar se você se esquecer de adicioná-los. Isso ocorre porque antes de executar o seu código o compilador de JS irá inserir ponto e vírgula nos locais onde julgar necessário. Essa característica pode levá-lo a um mau hábito que, em alguns casos, tende a gerar bugs difíceis de serem identificados. Veja o exemplo abaixo:
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image008.jpg"><img loading="lazy" decoding="async" class="aligncenter wp-image-607 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image008.jpg" alt="image008" width="669" height="179" /></a> 
Ao executar o código acima, iremos nos deparar com o seguinte erro: 
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image010.jpg"><img loading="lazy" decoding="async" class="aligncenter wp-image-608 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image010.jpg" alt="image010" width="598" height="42" /></a> 
Tal situação ocorrerá porque o compilador julgará não ser necessário colocar um ponto e vírgula após à declaração do objeto obj e isso faz toda a diferença .
<h2 style="text-align: justify;">Evite declarar variáveis no escopo global</h2>
Principalmente quando não se tem experiência em desenvolver grandes projetos em JavaScript, a tendência entre nós desenvolvedores é ir declarando e usando funções e objetos à medida que esses se fazem necessários. Dessa maneira, tem-se um código em que praticamente todas as funções e variáveis ficam acessíveis no escopo global. O problema com essa tendência é que, além de contribuir para a desorganização do código, ela torna o código extremamente vulnerável a ser afetado por outros trechos de código. Veja o código seguinte: 
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image012.jpg"><img loading="lazy" decoding="async" class="aligncenter wp-image-609 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image012.jpg" alt="image012" width="451" height="78" /></a> 
Imagine a surpresa ao se deparar com um alerta exibindo a mensagem “Custo: Baixo”! E a frustração ao descobrir que outro trecho de código já utiliza uma variável custo para armazenar uma string?
⦁ Uma solução pra esse problema é criar namespaces para suas variáveis e funções, por exemplo: 
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image014.jpg"><img loading="lazy" decoding="async" class="aligncenter wp-image-610 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image014.jpg" alt="image014" width="561" height="100" /></a> 
O resultado agora será o esperado (“Custo: 520”), a menos que outro código também utilize a variável MinhaTela para outra finalidade. Contudo, o problema foi significativamente reduzido, uma vez que haverá apenas uma variável no escopo global. Além disso, caso esse problema ocorra, ele poderá ser identificado muito mais rápido. Afinal, nada no seu código irá funcionar.
Uma abordagem ainda melhor pode ser tomada utilizando-se, por exemplo, o padrão de projeto Module ou uma de suas variantes.
<h2 style="text-align: justify;">Tenha cuidado ao trabalhar com decimais</h2>
Sabe quando 0.1 + 0.2 será diferente de 0.3? Quando essa comparação for feita em JavaScript. Para ilustrar, veja o resultado de alguns cálculos decimais em JavaScript: 
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image016.jpg"><img loading="lazy" decoding="async" class="aligncenter wp-image-611 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image016.jpg" alt="image016" width="456" height="406" /></a> 
Embora possa parecer, isso não é um bug. É uma característica de JavaScript que surge como consequência de JS utilizar uma notação de Binary Floating Point para representar decimais. Agora que você sabe disso que tal ser mais cauteloso ao trabalhar com esse tipo de variável?
Um workaround para lidar com esse problema é eliminar as casas decimais dos operandos antes de realizar o cálculo, por exemplo: 
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image018.jpg"><img loading="lazy" decoding="async" class="wp-image-612 size-full aligncenter" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image018.jpg" alt="image018" width="586" height="223" /></a>
<h2 style="text-align: justify;">Crie o hábito de utilizar o estilo de indentação K&amp;R ou um de seus variantes</h2>
Desenvolvedores acostumados a linguagens C-like costumam utilizar o estilo de indentação de Allman para definir escopos. Para os que não estão familiarizados com a nomenclatura, esse estilo coloca a chave de abertura do bloco de escopo em uma linha própria.
Exemplo: 
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image020.jpg"><img loading="lazy" decoding="async" class="aligncenter wp-image-613 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image020.jpg" alt="image020" width="530" height="181" /></a> 
Embora para a maioria dos casos não haja problema em utilizar o estilo de formatação de Allman, existem casos particulares em que o uso desse estilo poderá interferir no funcionamento do código. Veja o trecho abaixo: 
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image022.jpg"><img loading="lazy" decoding="async" class="aligncenter wp-image-614 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image022.jpg" alt="image022" width="483" height="120" /></a> 
Espera-se que uma função com essa declaração de retorno retorne um objeto, correto? Porém, na prática, o valor retornado será undefined. Isso ocorrerá porque, como já foi dito antes, o compilador, antes de executar o código irá inserir ponto e vírgula onde esse julgar necessário. No caso, após a palavra return. O mesmo acontecerá após uma série de palavras reservadas, como por exemplo throw.
A fim de evitar essa situação e ainda manter um estilo de formatação consistente em todo o código, é uma boa prática utilizar a notação de estilo K&amp;R (ou uma de suas variantes). A qual define que se coloque a chave de abertura de escopo na linha precedente. Exemplo: 
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image024.jpg"><img loading="lazy" decoding="async" class="aligncenter wp-image-615 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image024.jpg" alt="image024" width="499" height="140" /></a>
<h2 style="text-align: justify;">Atenção ao utilizar à variável this no JavaScript</h2>
Diferentemente de linguagens que possuem o conceito de classe, como C# e Java, em JavaScript o valor da variável this é definido dinamicamente quando a função é executada, e não quando ela é definida. Além disso, em JS qualquer função, seja ela pertencente ou não a um objeto, pode utilizar a variável this. Assim, utilizar essa variável requer um pouco de atenção, uma vez que a definição do valor da mesma pode se dar em quatro casos distintos:
<h4 style="text-align: justify;">⦁ Quando a função que a utiliza é chamada como um método;</h4>
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image026.jpg"><img loading="lazy" decoding="async" class="aligncenter wp-image-616 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image026.jpg" alt="image026" width="607" height="304" /></a> 
Nesse exemplo, embora inicialmente a função que utiliza a variável this seja criada separada do objeto animal, no momento em que essa é executada a variável this corresponde ao objeto animal.
<h4 style="text-align: justify;">⦁ Quando a função que a utiliza é chamada como uma função;</h4>
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image028.jpg"><img loading="lazy" decoding="async" class="wp-image-617 size-full aligncenter" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image028.jpg" alt="image028" width="499" height="130" /></a> 
No exemplo acima, a chamada à função func irá exibir um alerta contendo a representação em string do objeto Window. Nas especificações mais recentes da linguagem esse comportamento foi alterado para que o valor undefined seja definido para a variável this nesse caso. porém, por motivos de compatibilidade, os browsers atuais conservam o comportamento antigo. O comportamento segundo as especificações mais recentes pode ser alcançado utilizando-se o modo strict (“use strict”).
<h4 style="text-align: justify;">⦁ Quando a função que a utiliza é utilizada como um construtor;</h4>
<h4 style="text-align: justify;">⦁ Quando a função é chamada com o operador new, a variável this é inicializada com o objeto criado.</h4>
<h4 style="text-align: justify;">⦁ Quando o valor de this é definido explicitamente.</h4>
Em JavaScript uma função pode ser chamada definindo-se explicitamente a que objeto a variável this se refere. Para isso, a função deve ser executada por meio dos métodos call ou apply. Exemplo: 
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image0301.jpg"><img loading="lazy" decoding="async" class="aligncenter wp-image-619 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image0301.jpg" alt="image030" width="575" height="258" /></a> 
Entender o funcionamento da variável this pode ser bastante útil para identificar construções que levam a comportamentos inesperados, como o do código a seguir: 
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2016/01/image032.jpg"><img loading="lazy" decoding="async" class="aligncenter wp-image-620 size-full" title="JavaScript" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image032.jpg" alt="image032" width="572" height="221" /></a> 
Desenvolver em JavaScript exige uma abordagem completamente diferente da abordagem adotada em linguagens voltadas para a orientação a objeto. A partir do momento em que o desenvolvedor tem conhecimento das peculiaridades dessa linguagem, é possível produzir software de maneira organizada e gerar código de qualidade.
Há ainda uma série de outros artigos na internet com boas práticas que vão desde a estruturação do código à melhoria de performance para web, o que eu sugiro fortemente a quem queira se aventurar nessa linguagem.
 Por: Marco Túlio Ferreira

Dicas e boas práticas com JavaScript

Desbloqueie o futuro do seu negócio

Mais conteúdos como esse

Travessa Dona Zilda, 125, sala 203, São Gonçalo – Pelotas, RS. CEP: 96075-166

14841 Dallas Parkway, 8th Floor Addison, TX 75254

R. Levindo Lopes, 357, 5º e 12º Andar – Savassi, Belo Horizonte MG, 30112-010