Creando variables globales "sin querer" en Javascript - El Mundo de Angular

Creando variables globales «sin querer» en Javascript

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();


O desde dentro de un objeto:


var miVariableGlobal = 'soy global';

/* desde dentro de un objeto */
var o = {
    run:function() {
      console.log('o', miVariableGlobal)
    }
};

o.run();


Incluso, hasta dentro de una IIFE


var miVariableGlobal = 'soy global';

/* desde dentro de IIFE */
(function f() {
    console.log('IIFE', miVariableGlobal)
})()


 Ahora bien.. ésta no es la única forma de crear variables globales. Hay otras formas de crear esas mismas variables pero de manera más rebuscada.

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);


Esto, por otro lado SÍ imprimiría en consola la variable «miInnerVar«, por lo tanto, estamos creando una variable global dentro de una función.
Con ésto podemos pisar un valor, o destruir objetos completos solo por olvidarnos el «var«.


varInnerVar = 'Afuera';

function f() {
    miInnerVar='Adentro'
}

f(); //ejecutamos la funcion
console.log(miInnerVar);


En este ejemplo vemos que el valor de «miInnerVar» se pisa con el valor ‘Adentro‘, y todo ésto solo por olvidarnos de agregar var delante de la declaración de la función.

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);

En este ejemplo, como la variable «b» no está precedida por «var«, es una variable global, y al igual que en el caso anterior, es accesible en cualquier parte del código.
Es más, ni siquiera IIFE nos salva las papas del fuego de este problema, si tuviéramos lo siguiente:

(function() {
   var a=b='Adentro';
})();

console.log(b);

La variable «b» seguiría siendo global trayendo los problemas ya mencionados.

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.

 

About the Author

Mi nombre es Gustavo Hernán Dohara, soy Ingeniero en Sistemas y, sobre todas las cosas, soy un apasionado por la tecnología; tengo más de 10 años de experiencia en diferentes tecnologías y he decidido compartir mis conocimientos y experiencias con cualquiera que desee aprender: alumnos, empleados, freelancers y vos. Al ritmo que cada uno pueda, en el horario en que cada uno pueda y en el lugar que cada uno elija.

 ¡OFERTA! 

 101 Preguntas Sobre javascript

Que te Harán En Cualquier Entrevista (Con Sus Respuestas)