Buenas prácticas de JavaScript por Google

Introducción

Javascript, como quizá ya he dicho alguna vez, es el lenguaje con mayor relación de uso y desconocimiento del mismo, y cuando falla, la gente se sorprende, a pesar de que hayan empezado a programar en JavaScript sin tener ni idea del asunto.

Logo Google

Aquí vemos una serie de buenas prácticas traidas de Google, en su mayoría, que nos aclararán muchas ideas y nos ayudarán a mejorar nuestro código.

Buenas prácticas

Uso de la palabra var

A pesar de que se puede declarar una variable dentro de una función sin var, no es recomendable, porque no está claro en que contexto podemos acceder a ella. De tal forma, que no hay colisiones de nombres entre diferentes variables.

Uso de punto y coma

Quizá no sepas que JavaScript tiene por defecto lo que se llama implicit insertion, esto significa que por defecto inserta punto y coma el solito antes de cada salto de línea. Esto, que en principio podría parecer bueno y cómodo se convierte en un auténtico dolor de cabeza en ciertos casos, como este: 

1
2
3
4
5
6
7

MyClass.prototype.myMethod = function() {
  return 42;
} // Sin punto y coma
 
(function() {
  // Inicialización de variables aquí
})();

Declaramos un método (no nos paremos a lo de prototype, ya lo explicaré en otro post) y después usamos una función anónima, pues bien, a la función primera se le pasa la segunda como parámetro, ¿intuitivo al máximo verdad? Pues para evitarlo sólo tenemos que tener en mente que siempre tenemos que usar los puntos y comas cuando acabemos una línea.

Usar objetos para tipos primitivos

Si queremos tener una variable de tipo booleana, o de un tipo primitivo hacer esto puede liar bastante las cosas: 

1
2
3
4

var x = new Boolean(false);
if (x) {
  alert('hi');
}

Intuitivamente pensaríamos que no se va a imprimir nada, pero lo cierto es que si ejecutas el código, verás el alert con el texto ‘hi’.

Por tanto cuando queramos iniciar una variable de tipo primitivo, como “Boolean”, debemos usar la siguiente sintaxis: 

1
2
3
4

var x = Boolean(0);
if (x) {
  alert('hi');  
}

Y ahora no veremos el ‘hi’. De hecho si usamos el typeof para ver el tipo de datos que tenemos podemos comprobar que lo que estábamos creando antes no era un booleano, sino un objeto.

1
2

typeof Boolean(0) == 'boolean';
typeof new Boolean(0) == 'object';

Ambas son true, así que tienes que tener claro cuando estás haciendo una variable de tipo objeto y cuando del tipo primitivo boolean.

Los estándares se deben imponer

Usa funciones o métodos estándar antes que otros que no lo son, porque favoreceran la compatibilidad entre navegadores y tu código se podrá integrar en otros más fácilmente, por ejemplo es preferible usar string.charAt(3) que string[3].

Reglas de Estilo

En todo lenguaje hay una serie de buenas prácticas, pero también un cierto estilo que nos ayuda a poder entender mejor el código y a adquirir una serie de reglas que hacen que el código sea igual en estilos en cualquier lugar.

Nombres

Siempre todo junto y cuando son varias palabras pues con mayúsculas a partir de la segunda.

  • Funciones: estoEsUnaFuncion
  • Variables: estoEsUnaVariable
  • Clases: estoEsUnaClase
  • Enumerados: enumeradoTres
  • Métodos: estoEsUnMetodo
  • Constantes: ESTO_ES_UNA_CONSTANTE

Strings

Preferiblemente con ” (comillas simples) en vez con “” (comillas dobles), sobre todo de cara a que cuando escribimos HTML en un string, no tenemos que “escapar” las comillas.

Paréntesis

Solo cuando hagan falta, por ejemplo, no uses paréntesis en operadores como delete, typeof o void, o después de palabras reservadas como return, throw, case o new.

Se consciente de lo que es true o false

Uno de tantos problemas tontos con los que te encuentras cuando programas en JavaScript es asumir que ciertas cosas son verdaderas o falsas. Aquí tienes una lista: 

1
2
3
4
5
6
7
8

null //false
undefined  //false
'' string vacío //false
0 como número //false
 
'0' cero como string  //true
[] array vacío  //true
{} objeto vacío  //true

Comenta con estilo

Cuando se comenta el código además de hacer la razón por la que hacemos algo tenemos la posibilidad de generar documentación a la vez de manera sencilla, siguiendo una serie de reglas. Google lo hace así, y muchos desarrolladores lo recomiendan, en concreto podemos usar JSDoc, y si todos lo hiciéramos sería más sencillo leer el código de otros y entenderlo, así que adelante con ello.

Más información

Tienes más consejos y buenas prácticas aquí, hay muchos más, solo he destacado los más importantes y relativamente fáciles de explicar para no irme mucho del tema.