2.13. Alcance (Fundamentos de jQuery)

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 = 'hello';
var sayHello = function() {
    console.log(foo);
};

sayHello();         // muestra en la consola 'hello'
console.log(foo);   // también muestra en la consola 'hello'

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

var sayHello = function() {
    var foo = 'hello';
    console.log(foo);
};

sayHello();         // muestra en la consola 'hello'
console.log(foo);   // no muestra nada en la consola

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

var foo = 'world';
var sayHello = function() {
    var foo = 'hello';
    console.log(foo);
};

sayHello();         // muestra en la consola 'hello'
console.log(foo);   // muestra en la consola 'world'

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

var myFunction = function() {
    var foo = 'hello';
    var myFn = function() {
        console.log(foo);
    };

    foo = 'world';

    return myFn;
};

var f = myFunction();
f();  // registra 'world' -- 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