El scope chain en Javascript

El Scope Chain es el mecanismo de Javascript que me dice qué variables pueden ser accedidas por una función en particular. No todas las variables pueden ser accedidas por todas las funciones, algunas, sólo pueden ser accedidas por una función en particular, y otras, pueden ser accedidas por todas las variables. Y todo esto depende de DÓNDE definimos nuestras variables.

Ejemplo 1

Si, por ejemplo, tenemos el siguiente código:

function a() {

    console.log(miVariable);
}

function b() {
    var miVariable=2;
    a();
}

var miVariable= 1;

b()

¿Podés adivinar qué se imprime en consola? Se imprime el valor de 1… y ¿por qué?

Como la función «a» se crea en el Contexto de Ejecución Global, el acceso de las variables es también de ese contexto de ejecución. En el ejemplo, el valor de miVariable es uno (1).

Pero… ¿por qué la función «a» toma el valor de la variable «miVariable» del Execution Context Global?

Bueno, primero recordemos cómo se genera el Execution Context de las funciones «a«, «b«, y el global:

¿Recordás que en el post de Execution Context se creaban varias cositas, como la variable «this» o el objeto global (que es Window si estás en un browser)?. Además de todo eso, Javascript se encarga de crear referencias a lo que se conoce como «Outer Environment«.

Y esas referencias Outer Environment las define el motor de Javascript, cuando crea el Execution Context, osea cuando ejecuta las funciones. Existe esta regla de definir los Outer Environment:

El Outer Environment de una función, es la función que la creó. Dicho de otra forma, el Execution Context que crea una función, es el Outer Environment de esa función.

En el ejemplo de más arriba, el Outer Environment de la función «a» y de la función «b«, es el Execution Context Global:

Y es por eso que la función «a» imprime el valor de 1 en la variable miVariable, porque ese valor lo saca del Execution Context Global.

Ejemplo 2

Otra forma de ver el Scope Chain es la siguiente:

function b() {
    function a() {
        console.log(miVariable);
    }

    var miVariable=2;
    a();
}

var miVariable= 1;
b()

En ese caso, lo que se imprime en consola es «2» ya que miVariable ahora está definida en el Contexto de Ejecución de la función «b«.

Ejemplo 3

Es más, si sacamos la definición de var miVariable = 2 dentro de la función «a«:

function b() {
    functiona() {
      console.log(miVariable);
    }

    a();
}

var miVariable= 1;
b()

Lo que la función buscará es la variable miVariable, definida en el Contexto de Ejecución de la función «b«. Como no está ahí, la va a buscar al Contexto de Ejecución global, ahí está, y su valor es «var miVariable= 1»

Ahí es donde vemos el Scope Chain o cadena de alcance (de variables) en Javascript.

Conclusiones

El Scope Chain es un concepto fácil de entender, pero puede conducir a múltiples errores si no lo tenemos claro. Otro de los puntos «raros» en Javascript. Otro de los puntos que te conviene dominar si querés dominar este lenguaje y aprovecharlo al máximo.