Introducción

Uno de los aspectos más controvertidos de Javascript es el tipado blando (o no tipado) de variables. Como explicamos en este artículo de hace algún tiempo, esta característica del lenguaje implica que no es necesario indicar el tipo de datos que manejará una variable en el momento de su declaración.

Unido a este concepto y, llevándolo aún más lejos, tenemos que recordar que además  de no ser necesario el tipo, tampoco lo es la propia declaración. Javascript permite utilizar variables que no han sido declaradas con anterioridad enviándolas en segundo plano al contexto global.

Este comportamiento, además de resultar una mala práctica, puede dar lugar a diversos errores en tiempo de ejecución relacionados con ámbitos y clausuras. Es por ello que una de las aportaciones del modo estricto en la especificación ECMAScript 5 es el advertir estos descuidos relacionados con las variables.

Además del modo estricto, disponemos de validadores externos como JSLint, o el más reciente JSHint, que informan sobre estos errores potenciales. Estas herramientas resultan tan valiosas para medir la calidad de nuestros códigos que los IDEs más populares (Eclipse, Komodo, Visual Studio, …) permiten incluso una integración directa con las mismas.

Si por alguna razón no tenemos la posibilidad de ejecutar estas herramientas o preferimos monitorizar nosotros mismos todo el proceso, podemos escribir una función que detecte y nos informe sobre cada nueva variable global declarada.

El snippet para monitorizar nuevas variables

El código es el siguiente:

(function( context ){
  var globals = { viewGlobals : true },
      startGlobals = [],
      newGlobals = [];
 
  for (var j in window) {
    globals[j] = true;
    startGlobals.push(j);
  }
 
  setInterval(function() {
    for ( var j in window ) {
      if ( !globals[j] ) {
        globals[j] = true;
        newGlobals.push(j);
        console.warn( 'New Global: ' + j + ' = ' + window[j] + '. Typeof: ' + (typeof window[j]) );
      }
    }
  }, 1000);
 
  context.viewGlobals = function(){
    console.groupCollapsed( 'View globals' );
      console.groupCollapsed( 'Initial globals' );
        console.log( startGlobals.sort().join( ",\n" ) );
      console.groupEnd();
      console.groupCollapsed( 'New globals' );
        console.warn( newGlobals.sort().join( ",\n" ) );
      console.groupEnd();
    console.groupEnd();
  };
 
})(this);

Para utilizar este código, basta con pegarlo directamente en nuestros scripts, preferiblemente tras las variables globales declaradas intencionadamente. Automáticamente, cuando se cree una nueva variable global, se nos advertirá de ello en la consola.

Si en algún momento queremos conocer las variables que componen nuestra aplicación, podemos llamar desde la consola o( desde el mismo código) la función:

viewGlobals();

Obtendremos con esto un resúmen de las variables globales iniciales y aquellas añadidas durante tiempo de ejecución en la misma ventana de la consola.

En este pequeño código, hemos hecho uso de algunas de las funcionalidades de la consola de Firebug: console.group y console.warn. Si estamos trabajando sobre otro navegador o queremos simplemente máxima compatibilidad, podemos cambiar estos mensajes por otros del tipo alert.

NOTA: Para conocer más sobre todas las posibilidades de la consola de Firebug, se recomienda leer el artículo «Consola de Firebug al detalle«.

Conclusión

Con este pequeño snippet podemos monitorizar la declaración de variables en nuestra aplicación con el fin de evitar errores accidentales como la omisión de declaraciónes.

En un futuro post, convertiremos este pequeño código en una extensión Firebug para integrarlo directamente en la consola. 🙂