Comprender el alcance de las variables en JavaScript

El ámbito es el contexto de ejecución de una variable o función. Define a qué datos tiene acceso. Este concepto puede parecer bastante sencillo, pero tiene algunas sutilezas importantes.

Tradicionalmente, JavaScript ha tenido dos tipos de ámbito: el ámbito global y el ámbito local. El objetivo del ámbito es proporcionar acceso a todas las variables y funciones a las que tiene acceso un contexto de ejecución.

Alcance global

Cuando una variable se declara fuera de cualquier función, automáticamente pasa a ser de ámbito global y se puede acceder a ella desde cualquier parte del programa, ya sea una función o cualquier bloque. Además, si se desea, en el navegador podemos crear una variable global declarándola como window.newVariableen cualquier lugar del programa.

const nestAnimal = 'crocodilian';   // belongs to the Global scopefunction getNestInfo(){  window.eggs = 5;     // as well belongs to the Global scope}

De hecho, en el navegador, las variables en el ámbito global pertenecen al windowobjeto global.

JavaScript es un lenguaje que recolecta elementos no utilizados, mantiene disponibles todas las variables mientras se ejecuta el programa en el contexto y las elimina después. Consideremos el ciclo de vida de la variable. La variable surge durante la ejecución de la función. La variable se usa dentro de la función y luego la función termina. En ese punto, esta variable ya no es necesaria, por lo que su memoria se puede recuperar y JavaScript la elimina de la memoria. Pero las variables globales permanecen en la memoria durante todo el tiempo que la aplicación se ejecuta y la obstruyen, lo que ralentiza el programa y también puede causar conflictos de nombres inesperados.

Todo esto significa que, siempre que sea posible, se debe evitar definir variables globales. Solo son realmente necesarias en casos muy específicos, por lo que se debe tener cuidado con esto.

Ámbito local

ES6 introdujo variables con alcance de bloque mediante las palabras clave consty let. Con estas palabras clave, se crea un alcance local y existe dentro del bloque más interno que lo rodea. Puede ser una función, forun bucle while, ifun bloque, etc. A estas variables con alcance local solo se puede acceder desde dentro de ese bloque.

Cada bloque tiene su propio contexto de ejecución que define a qué datos tiene acceso y cómo debe comportarse. Cuando se ejecuta código en un contexto, se crea una cadena de alcance. Esta incluye todas las variables y funciones declaradas dentro de ese bloque, luego los datos del contexto que lo contiene (el principal), y así sucesivamente. Este patrón continúa hasta que se alcanza el contexto global.

Veamos un ejemplo:

let caymanMood = 'calm';function changeMood(newMood){  if (caymanMood === 'calm'){    caymanMood = newMood;  } else {    caymanMood = 'calm';  }}changeMood('happy');

La función changeMoodtiene una cadena de alcance con dos objetos en ella: su propia variable object (arguments object newMood) y la variable object del contexto global caymanMood. La función tiene acceso a caymanMoodporque es parte de su cadena de alcance.

Aumento de la cadena de alcance

Es posible ampliar la cadena de alcance además de los contextos de ejecución globales y locales. Podemos hacerlo de dos maneras.

• Punto 1:A con declaración
• Punto 2:El catchbloque en una try...catchdeclaración.

function buildNest() {  const assets = 'grass';  with(reptilian){    const building = ability + assets;  }  return building;}

withcrea un objeto que se agrega al frente de la cadena de alcance, pero el problema es que cuando lees el código no puedes saber con certeza qué objeto exactamente se modificará. ¿Será la variable global abilityo la variable en este contexto reptilian.ability? Por lo tanto, no se puede garantizar la ejecución correcta del programa. withLa documentación web de MDN no recomienda el uso de la declaración, ya que puede ser una fuente de errores confusos y problemas de compatibilidad.

La catchdeclaración crea un nuevo objeto variable que contiene una declaración para el objeto de error lanzado y este objeto de error se agrega al frente de la cadena de alcance.

Terminando

Con esto, ahora debería tener una comprensión un poco mejor de cómo funciona el alcance local y global en JavaScript y cómo confiar en el contexto local más cercano posible es una buena idea para escribir código fácilmente legible y mantenible.