Convenciones de código: JavaScript

Los buenos programadores usan sus cerebros, pero unas buenas directrices nos ahorran de tener que hacerlo en cada caso.

— Francis Glassborow

Algo importante en las comunidades Open Source, es crear un código legible a nivel de comprensión, que se pueda entender por otros desarrolladores, alargando así la vida de nuestro software, al poder identificar problemas y bugs en el código mucho mas rápido, y dando la oportunidad a otros programadores a participar

Para eso se han creado unas convenciones de código que detallan un estándar de buenas practicas y define una guía de "diseño" del código, mirando aspectos como el nombramiento de funciones y variables, la identación o sangrado, posición de los elementos respecto a otros, etc

Esto no quiere decir que un código que sea diferente a estas directrices este mal, de hecho algunos equipos de desarrollo/desarrolladores establecen las suyas propias, pero podemos usarlas como una buena base para crear las nuestras o para crear un buen habito que nos ayudara al revisar nuestro código

Hoy trataremos el lenguaje JavaScript, un lenguaje bastante utilizado siendo el que mas repositorios tiene en GitHub, ampliando su uso con su implementación del lado del servidor con Node.js, etc.

Variables y nombrado general de elementos

En cuanto a variables y demás elementos que creamos en nuestro código, se nombran usando lo que se llama camelCase, esto es, escribir sin espacios entre palabras, diferenciadolas entre ellas solo porque la primera letra de cada palabra empieza por mayúscula. En especial, se utiliza lowerCamelCase, donde la primera palabra tiene la primera letra en minúscula, dando igual que no haya segunda palabra:

var ejemploVariable = 10;
var variable = 10; 

Si la variable es global, todo en mayúsculas (esto no es importante):

var EJEMPLOGLOBAL = 10;

Nunca se utilizan guiones -, no están permitidos en el nombrado de elementos. Ya sean variables normales o arrays, se terminan con punto y coma ;.

Espacios entre operadores

Para identificar correctamente cada elemento, se utilizan espacios entre los operadores = + - * / y después de las comas:

var variableSuma = 10 + 10;
var variableArray = [10, 15, variableSuma];

Funciones y sentencias

Ya sea para funciones que nosotros creemos o sentencias propias de JavaScript (iteraciones for, switch, condicionales, etc), existen ciertas reglas generales:

• A la hora de poner nombre a las funciones que creemos nosotros, se siguen las mismas reglas que con las variables, camelCase.
• El corchete de apertura { al final de la primera linea, con un espacio antes:
• Corchete de cierre } en una linea separada, sin punto y coma ; detrás.

function ejemploFuncion() {
    // Codigo
}

Sangrado

Conocido como identation en ingles, se trata de una parte muy importante que consta de sangrar o desplazar secciones de código a la derecha, con el fin de identificar apartados dentro del mismo, como el contenido de una función o de una sentencia condicional, etc:

function ejemploFuncion(argumento) {
    var sangrado = 4;
    if(argumento == true) {
        return true;    
    }
}

El sangrado se tiene que hacer con espacios, no con tabulaciones, ya que estas últimos no suelen tener el mismo tamaño en todos los sistemas/programas, mientras que los espacios si. Una rápida forma de solucionar esto es usar la función "Buscar y reemplazar" de cualquier editor de código.

Objetos

Para identificar correctamente objetos (una unidad de la Programación orientada a objetos):

• El corchete de apertura { se escribe en la misma linea donde va el nombre del objeto.
• Espacio después de los dos puntos : siguientes a una propiedad.
• Solo se usan comillas en strings (cadenas de texto), nunca en valores numéricos.
• No se añade una coma después de la propiedad final del objeto.
• El corchete de cierre } se coloca en una linea separada, con un punto y coma ; detrás.
• También se pueden escribir objetos en una sola linea, respetando las reglas de espacios.

var ejemploObjeto = {
    ejemploPropiedadString: 'Valor en string',
    ejemploPropiedadNumerica: 10
};

var ejemploObjeto = {ejemploPropiedadString: 'Valor en string', ejemploPropiedadNumerica: 10};

Integración con HTML

A la hora de seleccionar elementos mediante su id (getElementById), tendremos que respetar el formato que guarda en HTML, sin añadir o cambiar mayúsculas o minúsculas. Para que esto no suponga un problema, podemos seguir las mismas convenciones de JavaScript a la hora de asignar ID's en nuestro HTML.

Otras reglas

Según la W3C se pueden utilizar saltos de linea en el código cuando la linea supera los 80 caracteres, pero esto no parece tan importante. Si se quiere hacer, es después de un operador o una coma.

Fuentes: JavaScript Style Guide and Coding Conventions (W3C), The usage of programming languages in GitHub, Imagen de articulo