Bloques en Javascript: reorganizando código

21 May 2012

Introducción

En Javascript existen muchas formas de organizar el código. De hecho, tras casi dos décadas de lenguaje, no hay aún una guía de estilo que se considere estándar y así, nos encontramos con varías tendencias que poco a poco se han ido establecido abanderadas bien por grandes empresas como Google, bien por proyectos punteros como jQuery, o finalmente, por la fuerte personalidad de los grandes gurús del lenguaje, caso este último de Douglas Crockford (pichar sobre los enlaces para ver sus respectivas propuestas).

Cada uno ha ido dejando su sello y dictando aquellas formas que estima más oportunas para que los programas resulten al final, más legibles: cómo hacer uso de los comentarios, cómo indentar el código, dónde hay que abrir y cerrar llaves…

Un punto interesante, y obvio, de todas estas convenciones, es que utilizan las formas y herramientas que ofrece el propio lenguaje para articularse. Y, aún así, no las usamos todas…

Es el caso, por ejemplo, de los bloques en Javascript: una entidad casi completamente desconocida fuera del contexto en el que solemos utilizarla que puede permitirnos presentar el código de formas alternativas.

Echémosles un vistazo a ver qué ofrece estas estructura rara

Los bloques

Los bloques en Javascript se delimitan mediante llaves, una de apertura ‘{‘, y otra de cierre ‘}’. Por lo general, los encontramos cuando creamos un objeto siguiendo la notación literal:

var myObj = {
  property1 : 'foo',
  property2 : 'bar'
};

O para agrupar el contenido de bucles y / o condicionales:

// Bucle
for( var x = 0; x < 1000; x++ ){
  // Do awesome here...
}
 
// Conditional
if( x === 1000 ){
  // Do awesome here...
}

Nada nuevo; parece que es el lugar natural de los bloques y que no pueden desligarse de los ejemplos anteriores…

Pero no es así. En Javascript, los bloques pueden abrirse en cualquier momento y, al no crearse ‘scopes’ o ámbitos dentro de ellos como en otros lenguajes, permiten que éstos sean utilizados en cualquier parte de nuestro código sin que esto repercuta en la funcionalidad que estamos elaborando.

NOTA: En Javascript, las llaves no crean un ámbito local. Es decir, dentro de un bucle o un condicional, las variables que declaremos no son locales y exclusivas a dicho ámbito, sino que lo son de la función u objeto que las agrupa.

Lo anterior quiere decir que es perfectamente válido emplear los bloques como agrupadores o contenedores sin que estos alteren el código original. Consideremos el código:

function test(param1, param2) {
  var myConstant = 100,
    result;
 
  result = myConstant + param1 + param2;
 
  return result;
}
test( 10, 20 ); // 130

El código anterior es completamente inútil, pero puede ilustrar bien el caso que estudiamos.: nuestra función únicamente toma dos valores que suma a una constante predefinida y devuelve resultado.

Ahora, probemos a reorganizarlo con el uso de bloques:

function test(param1, param2) {
 
  declareVars: {
    var myConstant = 100,
    result;
  }
 
  processing: {
    result = myConstant + param1 + param2;
  }
 
  printResults: {
    return result;
  }
 
}
test( 10, 20 ); // 130

Como la función era muy simple, se puede apreciar muy claramente la redistribución, quizá más limpia y legible, de su contenido sin alterar en nada su funcionamiento. Lo que hemos hecho es similar al uso de comentarios pero recurriendo a una estructura natural del lenguaje. Esto puede ser muy interesante cuando por ejemplo tenemos que pasar nuestro código a producción y utilizamos algún minificador u otra herramienta que eliminar comentarios que nos interesa conservar (para debug u otra cosa)…

En un código real, la idea sería separar por ejemplo, un bloque de definición de variables, otro de procesado o cálculo y, quizá, otro de salida. El resultado final puede ser un nuevo código con divisiones internas claras que nos ayuden a depurarlo en un futuro (o simplemente una frikada a modo de sello personal).

Es importante recordar que los bloques que hemos definido arriba no suponen una alteración del código a nivel funcioal: declareVars, processing o printResults, no son objetos, ni variables con valor y, por tanto, no hay que declararlos previamente ni eliminarlas después; no ocupan memoria ni fuerzan cálculos extra al interpréte. A nivel estructural, son tan inocuos como un comentario tradicional.

Manipulando flujos en los bloques

Los bloques pueden incluso utilizarse para alterar flujos de ejecución. Quizá no sea el medio más usual, o incluso legible, pero la cuestión es que puede salirse de un bloque siempre que se requiera mediante el uso de la palabra reservada break.

Veamos el ejemplo sencillo:

var x;
 
foo : {
  x = "Hello World";
  break foo;
  x = "Goodbye Lenin";
}
 
console.log( x ); // Hello World

Obsérvese que la instrucción break obliga al intérprete a salir del bloque impidiendo así que se realice la segunda asiganación a x. Nótese también como en este caso, es necesario acompañar a break con el nombre del bloque (foo) ya que, de lo contrario, daría error.

NOTA: El uso de break sin etiquetar es sólo válido dentro de condicionales o bucles.

Conclusión

Como se comentó anteriormente, esta forma de organizar el código no tiene porque ser del gusto de todos. De hecho, muchos puristas pueden encontrar innecesario el uso de estas estructuras para reemplazar lo que un comentario simple consigue del mismo modo.

Pero como nos gusta llevar el lenguaje hasta sus límites, o al menos conocerlos, no está de más conocer que, como siempre, en Javascript hay más de una forma de hacerlo todo

Para más información sobre guías de estilo en diversos lenguaje, incluido Javascript, puede consultarse la sección correspondiente en OpenLibra:

OpenLibra | Tags: Guía de Estilo

Más:

{4} Comentarios.

  1. Cristian Martín

    Este uso del break me recuerda demasiado a los GOTO. Pero he querido ver qué pasaba si ponía un break dentro de un bloque que a su vez está en un loop. Lo he probado con firebug y el resultado es que sale del loop:

    var i = 0;
    do {
    label: {
    i++;
    if (i == 5) break;
    }
    console.log(i);
    } while (i < 10);

    resultado:
    1
    2
    3
    4

  2. Julio Cesar

    La verdad muy interesante…. Me has dado algunos tips muy validos para mis futuros proyectos.

    Saludos.

  3. Raulucco

    Es un tip muy bueno sobretodo para organizar los bloques. En mi opinion queda bastante claro. Gracias

  4. Cristian Martín

    Saludos Cristian Martín, probé tu código y efectivamente se sale del grupo, a menos que coloques la etiqueta del bloque luego del break, como indican en el artículo:


    var i = 0;
    do {
    ·· label: {
    ···· i++;
    ···· if (i == 5) break label;
    ·· }
    ·· console.log(i);
    } while (i < 10);

    resultado:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *