Cómo funciona el Global Scope

El scope es cada uno de los entornos donde las variables tienen alcance dentro del código de JavaScript. En otras palabras, determina que valor tendrá la variable dependiendo dónde se encuentre.

Imagina que pierdes algo importante (llaves, dinero, etc.), comienzas a buscar este objeto por los lugares más cercanos en que te encuentras; si no lo encuentras, buscas en los lugares más lejanos y así sucesivamete hasta encontrarlo. En JavaScript sucede algo similar.

Si haces referencia a una variable, el motor de JavaScript buscará su declaración en el entorno más cercano, y seguirá buscando en entornos más lejanos hasta llegar a la línea de código que la variable esté declarada. A este proceso se lo denomina cadena de scope (scope chaining).

Se dice que JavaScript tiene un scope léxico (lexical scope), porque para determinar el scope de una variable es necesario leer el código, sin ejecutarlo.

Tipos de scope

Existen dos tipos de scope: global y local. El scope local puede ser de función o de bloque.

Un bloque es toda porción de código que está encerrada entre llaves {}, estos pueden ser los bloques: función, if, else, while, y for.

En la imagen anterior, el entorno más cercano para la variable saludo es el scope de bloque, luego el scope de función y finalmente el scope global. Este es un ejemplo del recorrido que sigue JavaScript hasta encontrar la variable que se hace referencia.

Declaración y asignación de variables

La declaración de una variable en el código es crearla mediante var, let o const y un identificador. La asignación es proveer de un valor a la variable creada.

var nombre // declaración
nombre = "Andres" // asignación

La declaración y la asignación se puede realizar en la misma línea de código.

var nombre = "Andres"

Declaración de variables con var, let y const

Hasta ahora aprendiste a declarar variables con var, sin embargo, a partir de la especificación de ECMAScript 6 se agregaron nuevas formas para la declaración de variables.

Let y const resuelven varios problemas con var como el hoisting, variables globales, re-declaración y re-asignación de variables. En el tema del scope, que es el que nos interesa, se diferencian porque let y const tienen un scope de bloque y var no.

Variables re-declaradas y re-asignadas

La re-declaración es volver a declarar una variable, y la re-asignación es volver a asignar un valor.

• Una variable declarada con var puede ser re-declarada y re-asignada.
• Una variable declarada con let puede ser re-asignada, pero no re-declarada.
• Una variable declarada con const no puede ser re-declarada, ni re-asignada. Su declaración y asignación debe ser en una línea, caso contrario habrá un error.

Existe un curso de ECMAScript 6+ para que descubras las nuevas características que agregan al lenguaje.

Scope Global

Las variables globales son aquellas que se encuentran declaradas fuera de los bloques de código o funciones y no importa si son declaradas con var, let o const.

El scope global es el entorno donde las variables globales pueden ser accedidas desde cualquier lugar de nuestro programa.

En el siguiente ejemplo, mira el código y piensa qué mostrará en consola. Una vez tengas las respuestas, abre la consola. ¿Qué sucedió?

var saludoVar = "Hola var" 
let saludoLet = "Hola let" 
const saludoConst = "Hola const"

function saludar() {
  var saludoVar = "Chao var";
  console.log(saludoVar)
  console.log(saludoLet)
  console.log(saludoConst)
}

saludar()

• Ejemplo usando variables en el scope global.{target="_blank"}

Con este ejemplo podemos concluir que: el valor "Chao var" prevalece para el valor global "Hola var", y los demás valores globales si se muestran en consola. Una variable global puede ser accedida en cualquier parte, porque el scope global es el último entorno en el que JavaScript busca una variable. Recuerda esto cuándo se hable de scope local.

Buenas prácticas de Scope

• Declarar las variables con el scope más reducido posible.
• Siempre declarar variables. (empieza dejar de usar var)
• Nunca realizar una doble declaración. Por ejemplo: let nombre = animal = "gatito"

*Contribución creada con los aportes de Andrés Guano.