Jquery - Alcance de las variables

El “alcance” (en inglés scope) se refiere a las variables que están disponibles en un bloque de código en un tiempo determinado. La falta de comprensión de este concepto puede llevar a una frustrante experiencia de depuración.

Cuando una variable es declarada dentro de una función utilizando la palabra clave var, ésta únicamente esta disponible para el código dentro de la función — todo el código fuera de dicha función no puede acceder a la variable. Por otro lado, las funciones definidas dentro de la función podrán acceder a la variable declarada.

Las variables que son declaradas dentro de la función sin la palabra clave var no quedan dentro del ámbito de la misma función — JavaScript buscará el lugar en donde la variable fue previamente declarada, y en caso de no haber sido declarada, es definida dentro del alcance global, lo cual puede ocasionar consecuencias inesperadas;

Funciones tienen acceso a variables definidas dentro del mismo alcance

var foo = 'hola';
    
    var sayHello = function() {
      console.log(foo);
    };
    
    sayHello();         // muestra en la consola 'hola'
    console.log(foo);   // también muestra en la consola 'hola'

El código de afuera no tiene acceso a la variable definida dentro de la función

var sayHello = function() {
      var foo = 'hola';
      console.log(foo);
    };
    
    sayHello();         // muestra en la consola 'hola'
    console.log(foo);   // no muestra nada en la consola

Variables con nombres iguales pero valores diferentes pueden existir en diferentes alcances

var foo = 'mundo';
    
    var sayHello = function() {
      var foo = 'hola';
      console.log(foo);
    };
    
    sayHello();         // muestra en la consola 'hola'
    console.log(foo);   // muestra en la consola 'mundo'

Las funciones pueden “ver” los cambios en las variables antes de que la función sea definida

var myFunction = function() {
      var foo = 'hola';
    
      var myFn = function() {
          console.log(foo);
      };
    
      foo = 'mundo';
    
      return myFn;
    };
    
    var f = myFunction();
    f();  // registra 'mundo' -- error

Alcance

// una función anónima autoejecutable
    (function() {
      var baz = 1;
      var bim = function() { alert(baz); };
      bar = function() { alert(baz); };
    })();
    
    console.log(baz);  // La consola no muestra nada, ya que baz
                       // esta definida dentro del alcance de la función anónima
    
    bar();  // bar esta definido fuera de la función anónima
            // ya que fue declarada sin la palabra clave var; además,
            // como fue definida dentro del mismo alcance que baz,
            // se puede consultar el valor de baz a pesar que
            // ésta este definida dentro del alcance de la función anónima
    
    bim();  // bim no esta definida para ser accesible fuera de la función anónima,
            // por lo cual se mostrará un error