Dicas e boas práticas com JavaScript

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:

Use com consciência os comparadores de igualdade == e ===

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:

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:

Como adendo, evite ainda declarar objetos como String e Number. Eles não podem ser utilizados para fins de comparação:

Sempre utilize o ponto e vírgula nos locais apropriados

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:

Ao executar o código acima, iremos nos deparar com o seguinte erro:

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 .

Evite declarar variáveis no escopo global

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:

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:

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.

Tenha cuidado ao trabalhar com decimais

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:

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:

Crie o hábito de utilizar o estilo de indentação K&R ou um de seus variantes

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:

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:

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&R (ou uma de suas variantes). A qual define que se coloque a chave de abertura de escopo na linha precedente. Exemplo:

Atenção ao utilizar à variável this no JavaScript

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:

⦁ Quando a função que a utiliza é chamada como um método;

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.

⦁ Quando a função que a utiliza é chamada como uma função;

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”).

⦁ Quando a função que a utiliza é utilizada como um construtor;

⦁ Quando a função é chamada com o operador new, a variável this é inicializada com o objeto criado.

⦁ Quando o valor de this é definido explicitamente.

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:

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:

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