Las variables globales en Javascript pueden ser un problema serio en nuestro código. Aparecen muchas veces sin que nos demos cuenta, de hecho, muchas más de las que pensás. En este post, te voy a mostrar dos formas de crear variables globales sin querer, y así evitarte más de un mini-pre-infarto.
La forma «queriendo»
La forma «queriendo» de crear variables de forma global, es decir, variables que pueden ser accesibles desde cualquier punto de nuestra aplicación, es creando en el Execution Context Global (o sea en nuestro programa principal) una variable, de la siguiente manera:
var miVariableGlobal = 'soy global';
De esta forma, podemos acceder a esa variable desde dentro de cualquier función, o sea, desde cualquier Execution Context:
var miVariableGlobal = 'soy global';
function f() {
console.log('f', miVariableGlobal)
}
f();
var miVariableGlobal = 'soy global';
/* desde dentro de un objeto */
var o = {
run:function() {
console.log('o', miVariableGlobal)
}
};
o.run();
var miVariableGlobal = 'soy global';
/* desde dentro de IIFE */
(function f() {
console.log('IIFE', miVariableGlobal)
})()
La forma «sin querer»
Así como hay formas de crear variables globales de manera intencional , también existen las formas «sin querer», en donde uno puede crear variables globales sin pretenderlo, y te voy a mencionar dos de ellas:
Forma 1: nos olvidamos de usar var
Cuando nos «olvidamos» de definir una variable dentro de una función usando «var«, «let» o «const«; cuando definimos una variable dentro de una función, o sea, si definimos lo siguiente:
function f() {
var miInnerVar='Inner'
}
f(); //ejecutamos la función
console.log(miInnerVar);
La variable «miInnerVar» no es visible para el Contexto de Ejecución Global, y el código que escribimos arrojaría el siguiente error:
app.js:6 Uncaught ReferenceError: miInnerVar is not defined
Ahora bien, ¿qué pasaría si nos olvidáramos de declarar la variable «miInnerVar» con la palabra reservada «var«?
function f() {
miInnerVar='Inner'
}
f(); //ejecutamos la función
console.log(miInnerVar);
varInnerVar = 'Afuera';
function f() {
miInnerVar='Adentro'
}
f(); //ejecutamos la funcion
console.log(miInnerVar);
Forma 2:
Una segunda manera de crear una variable global «sin querer» es haciendo una asignación múltiple en una misma línea, por ejemplo;
function f() {
var a=b='Inner'
}
f();//ejecutamos la función
console.log(b);
(function() {
var a=b='Adentro';
})();
console.log(b);
Conclusiones
Crear variables globales puede traernos muchos daños colaterales y, conociendo a Javascript y su forma «rara» de comportarse, es mejor evitar lo que más podamos estos comportamientos «raros». Por eso, no te olvides de declarar CADA variable con su «var«, «let» o «const» y no hacer asignaciones múltiples en una misma línea.