"O pior dos problemas da gente é que ninguém tem nada com isso." Mario Quintana

Sou da opinião de que uma das primeiras coisas que um programador deve fazer é conhecer as boas práticas para escrita de código limpo. Nesse contexto, um dos livros que acho essencial para programadores de qualquer linguagem é o Clean Code do Robert C. Martin.

Aqui, entretanto, o foco é particular em JavaScript, então tomei como referência a primeira seção do livro Maintainable Javascript do Nicholas Zackas e fiz um resumo das melhores partes:

1. Fim de Declaração

Um dos mais confusos recursos do Javascript é sua capacidade de inserção automática de ponto-e-vírgula(ASI - Automatic Semicolon Insertion) no final de declarações. As regras de ASI são tão difíceis de lembrar que é melhor não optar pelo uso. Simplesmente coloque o ponto-e-vírgula ao final de declarações, conforme recomendam Douglas Crockford e o Google Javascript Style Guide.

Um exemplo do que pode acontecer é que o código abaixo:

//código ruim
function problem(){  
    return 
    {
          name: "problema"
    }
}

Acaba sendo transformado para:

//código ruim
function problem(){  
    return; 
    {
          descricao: "problema"
     };
}

A melhor maneira seria:

//código bom
function noProblem(){  
    return {
          descricao: "sem problemas"
     };
}

2. Quebra de Linha

O máximo de caracteres recomendado por linha na maioria dos guias de estilo de código é 80. Se alguma linha de código sua passar desse limite em uma declaração de função ou de string, é recomendável quebrá-la depois do operador e utilizar dois níveis de indentação:

// bom: quebra de linha depois do operador e dois níveis de indentação
longFunction(argument1, argument2, argument3, argument4, argument5, argument6,  
          argument7);
// ruim: Um nível de indentação
longFunction(argument1, argument2, argument3, argument4, argument5, argument6,  
      argument7);
// ruim: Quebra antes do operador
longFunction(document, element, window, "some string value", true, 123  
         , navigator);

Uma situação em que tive a desagradável experiência de constatar comportamentos inesperados foi quando invoquei uma função recebendo um argumento string muito longo. Neste caso, novamente é recomendado a quebra de linha depois do operador:

// ruim: não há utilização do operador
longStringFunction("inicio1;inicio2;incicio3;inicio4;fim1;fim2;

fim3;fim4;meio1;meio2;meio3;meio4;continua1;continua2;continua3");

// bom: utiliza o operador (+)
longStringFunction("inicio1;inicio2;incicio3;fim1;" + 

"fim3;fim4;meio1;meio2;meio3;"); 

O mesmo é válido em condicionais muito extensos, então quebre a linha depois dos operadores '&&' ou '||' e utilize dois níveis de indentação.

Obs: Declarar funções com muitos argumentos é uma má prática de programação, mas esteja preparado para esse tipo de situação, pois nem todo código que você utilizará será feito por você.

3.Usando comentários

A utilização de comentários é considerada má prática entre a maioria dos programadores. Isso porque a maneira correta de escrever código é dar significado a ele de modo que seja tão facilmente entendido como um texto qualquer em português, inglês ou qualquer outra linguagem humana.

Isso, porém, não é tão fácil de fazer quanto parece principalmente porque a maioria dos desenvolvedores não é tão experiente a esse ponto e porque a tarefa é difícil mesmo. Por causa disso, muitas vezes você acaba sendo incumbido de resolver um problema, mas se depara com um arquivo gigantesco sem nenhum comentário e código difícil de entender. Isso a princípio não deveria ser nenhum empecilho, desde que o tempo para resolver o problema fosse razoável, mas a maioria das vezes não é assim: o tempo é limitado, bastante limitado. Nessas horas você gostaria de ter, pelo menos, um panorama geral do que está acontecendo para poder agir mais rápido e precisamente.

Existem situações, entretanto, em que a utilização de comentários é sempre recomendada. Normalmente, é quando seu código possui uma intenção não aparente, vejamos:

// ruim: intenção aparente

// tamanho do array
var tamanho = array.length;  
// bom: intenção não é aparente

// valor 10 está sendo utilizado por razões de performance
//mudá-lo faria o mar virar sertão!
var tamanho = 10;  

4.O With Statement

A utilização do with no código, além de ser suscetível a erros, descontextualiza o código, deixando-o mais difícil de entender. Nem o próprio comitê do ECMA recomenda mais sua utilização.
Atualmente, com tantos bons editores de texto não há sequer razão para querer "economizar dedo".

Exemplo do MDN:

var a, x, y;  
var r = 10;

with (Math) {  
  a = PI * r * r;
  x = r * cos(PI);
  y = r * sin(PI / 2);
}

5.Uso de continue em loops.

Ao contrário do break que interrompe toda a iteração do loop, o continue 'salta' apenas valores específicos. Seu uso é pouco recomendado, porque na maioria das vezes pode ser evitado. No entanto, não é proibido usá-lo, apenas o use com cautela, sabendo que a legibilidade do código é o que pesa mais na decisão.

Exemplo do MDN:

var i = 0;  
var n = 0;

while (i < 5) {  
  i++;

  if (i === 3) {
    continue;
  }

  n += i;
}

É mais legível, porém, optar por:

var i = 0;  
var n = 0;

while (i < 5) {  
  i++;

  if (i !== 3) {
    n += i;
  }

}

6. Strict Mode

O modo strict está disponível desde o ECMAScript5 e seu uso é muito recomendado por 'forçar' o código a se enquadrar em bons padrões. Declarar, entretanto, "use strict" no escopo global pode ter consequências indesejáveis principalmente quando você está comprimindo vários scripts em um só e muitos deles são scripts antigos que não se enquadram no "modo estrito", ficando, portanto, suscetíveis a erros.

// Ruim - strict mode no escopo global
"use strict";
function strictFunction1() {  
    // code
}

function strictFunction2() {  
    // code
}
// Melhor maneira
(function() {
    "use strict";
    function doSomething() {
        // code
    }
    function doSomethingElse() {
        // code
    }
})();

7. Equality == Vs ===

Ok, não é necessariamente um problema de estilo, mas vamos lá:

Evite o uso de == ou !=. Ao invés disso, procure sempre utilizar === ou !==. O uso dos dois primeiros acarreta no chamado 'type coercion'.Isso significa que na comparação de variáveis de tipos diferentes o JavaScript acabará transformando um tipo no outro para só então proceder com a verificação de igualdade de valores. As consequências são comportamentos um tanto inusitados e você, com certeza, vai querer evitá-los:

console.log(5 == "5");  // true  
console.log(25 == "0x19");  // true  
console.log(1 == true);  // true  
console.log(0 == false);  // true  
console.log(2 == true);  // false  

Veja Também

Sobre o Autor

Johel Carvalho

Johel Carvalho

Engenheiro Civil formado pelo Instituto Militar de Engenharia (IME-RJ) em Dezembro de 2012. Largou a profissão pelo desenvolvimento web, começando com C# e sendo atualmente aficionado por JavaScript.

comments powered by Disqus