Estándares de codificación para Javascript

Estandares de codificación para el lenguaje javascript

Indice

• Declaración de variables
  • Nombres de variables
  • Valores de variables
  • Declaración de multiples variables
  • Variables de tipo colección
• Declaración de funciones
  • Nombres de funciones
  • Llaves y espaciado de funciones
  • Tipos de funciones
  • Argumentos de una función
• Construcción de cadenas
• Operaciones
  • Operaciones lógicas de igualdad y desigualdad
• Por considerar
• Referencias

Declaración de variables

Declarar variables es una de las cosas más importantes a la hora de codificar, por eso es necesario tener en cuenta las siguientes premisas:

Nombres de variables

Los nombres de variables deben ser escritos con notación camelCase.

var test;  // Nombre de variable correcto
var i_am_bad; //  Nombre de variable incorrecto
var iAmFine; //  Nombre de variable correcto

Valores de variables

Los espacios entre el nombre y el valor de una variable son muy importantes, puesto que mejoran la legibilidad del código.

var test = 1;  // Nombre de variable correcto
var iAmFine = true; //  Nombre de variable correcto

Declaración de multiples variables

Cuando se declaran multiples variables deben declararse todas con la misma sentencia var, una variable por linea y con coma (,) al final a menos que sea la ultima variable, en cuyo caso se usará punto y coma (;) al final de la linea. A partir de la segunda linea debe usarse 4 espacios antes del nombre de variable para mejorar la legibilidad del código fuente. El orden de las variables debe ser alfabetico de ser posible.

• Una declaración erronea es de la siguiente manera:

// declaración erronea
var bad1 = 1;
var iAmFine = false;
var sampleVariable = "wrong";

• Una declaración correcta es de la siguiente manera:

// declaración correcta
var iAmFine = true, // usa coma
    greatDay = 1, // usa coma
	sampleVariable = true; // usa punto y coma por que es la ultima variable

Nota: Es aconsejable que cada variable tenga un comentario acerca de su objetivo, de manera que aumente la comprensibilidad del código.

Variables de tipo colección

Cuando la variable a declarar contiene un elemento de tipo colección (arreglo y objeto) y su contenido excede los 70 caracteres o tiene más de 2 elementos debe tener cada item de la colección en una linea diferente para mejorar la legibilidad del código.

// declaración correcta
var elements = [], // colección vacia
    gender = ["male", "female"], // colección con 2 elementos
    users = {
        "Hugo": "Duck 1",
        "Paco": "Duck 2",
        "Luis": "Duck 3"
    }, // colección con más de 2 elementos
    attributes = [
        "fuerza",
        "velocidad",
        "inteligencia",
        "carisma",
    ],
    base64_logo_parts = [
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAB+',
        'FBMVEUAAAA/mUPidDHiLi5Cn0XkNTPmeUrkdUg/m0Q0pEfcpSbwaVdKskg+lUP4zA/iLi3m',
        'sSHkOjVAmETdJSjtYFE/lkPnRj3sWUs8kkLeqCVIq0fxvhXqUkbVmSjwa1n1yBLepyX1xxP',
        '0xRXqUkboST9KukpHpUbuvRrzrhF/ljbwaljuZFM4jELaoSdLtElJrUj1xxP6zwzfqSU4i0',
        // ...
        // more lines 
        // ...
        '/0rbNvHVxiJywa8yS2KDfV1dfbu31H8jF1RHiTKtWYeHxUvq3bn0pyjCRaiRU6aDO+gb3aE',
        'fEeVNsDgm8zzLy9egPa7Qt8TSJdwhjplk06HH43ZNJ3s91KKCHQ5x4sw1fRGYDZ0n1L4FKb',
        '9/BP5JLYxToheoFCVxz57PPS8UhhEpLBVeAAAAAElFTkSuQmCC'
    ]; // colección con más de 70 caracteres

Declaración de funciones

Uno de los elementos más importantes de javascript son las funciones, éstas son conocidas como ciudadanos de primer tipo. Para la declaración de funciones es necesario tener en cuenta las siguientes premisas:

Nombres de funciones

Los nombres de funciones deben ser escritos con notación camelCase.

function testFunction() {
    // code here
}

Llaves y espaciado de funciones

Las llaves de las funciones deben empezar en la misma linea que se declara la función y debe haber un espacio entre el parentesis de cierre de argumentos y la llave de inicio de cuerpo de función, así:

// A. Declaración de función
// B. Parentesis de argumentos
// C. Espacio
// D. Llave de inicio de cuerpo de función.

// ------- A ------- --- B --- C D
function testFunction(username) { 
    console.log('Hello ' + username + '...');
}

Tipos de funciones

En javascript las funciones pueden ser funciones como tal o funciones como variables. En caso de que sean funciones como variables es necesario usar punto y coma (;) despues del cuerpo de la función para finalizar la sentencia.

function testFunction() {
    console.log('Hello Test...');
}

var anotherTestFunction = function() {
    console.log('Hello Test...');
}; // ; para fin de sentencia.

Argumentos de una función

Para mejorar la legibilidad del código javascript los argumentos de funciones deben ser nombres con notación camelCase. Si son varios argumentos deben estar separados por coma (,) y un espacio, así:

function testFunction(arg1, arg2, arg3) {
    console.log('Hello Test...');
}

var testFunction = function(arg1, arg2) {
    console.log('Hello Test...');
}; // ; para fin de sentencia.

Si unicamente hay un argumento no hay espacios a ningún lado, así:

function testFunction(arg1){
    console.log('Hello Test...');
}

Construcción de cadenas

Deben ser usadas comilas simples ( ' ) puesto de ésta manera se reducen los problemas a la hora de escapar las comillas dobles ( " ) usadas cuando se genera HTML y mejora la legibilidad.

// Incorrecto
var container0 = "<div class=\"another-container\" data-type=\"html\"></div>";
var container1 = "<div class="+'"'+"another-container"+'"'+
    " data-type="+'"'+"html"+'"'+"></div>";
// Correcto
var containerString = '<div class="container" data-type="html"></div>';

Nota: Para los casos en que no se estan construyendo elementos del DOM también deben ser usadas las comillas simples por uniformidad en el código.

Operaciones

Todas las operaciones deben tener espacios entre los operadores y los operandos para mejorar la legibilidad del código. Si se están usando parentesis no es necesario usar espacio entre los parentesis y los operandos.

var v1 = b * h / 2,
    v2 = (location.toLowerCase() === 'medellin') ? 'frijoles' : 'lentejas';

Operaciones lógicas de igualdad y desigualdad

Deben usarse los comparadores estrictos (aquellos que comparan valor y tipo ===, !==) para todas las operaciones lógicas de comparación.

function factorial(x) {
    if(x === 0){
        return 1;
    } else if(x !== 0) {
        return factorial(x - 1) * x;
    }
}

factorial(10);

Por considerar

• Constructores VS. Prototipos en modulos de Angular.js. enlace.
• Nombramiento de variables (getters, setters, is, etc).
• Paquetes, namespaces y gerarquía de modulos
• Estandares de documentación de funciones y módulos
• Ecmascript 6 enlace 1, enlace 2, enlace 3

Referencias

• http://javascript.crockford.com/code.html
• javascript: The good parts