Comprender los ámbitos de las variables en JavaScript

En JavaScript, hay dos tipos de ámbitos.

1. Alcance global : alcance fuera de la función más externa adjunta a la ventana.
2. Ámbito local : dentro de la función que se está ejecutando.

Veamos el código a continuación. Tenemos una variable global definida en primera línea en alcance global. Entonces tenemos una variable local definida dentro de la función fun().

let globalLet = "This is a global variable";
   
function fun() {
  let localLet = "This is a local variable";
   
  console.log(globalLet); // This is a global variable
  console.log(localLet); // This is a local variable
}
fun();

Salida:

cuando ejecutamos la función fun(), la salida muestra que tanto las variables globales como las locales son accesibles dentro de la función, ya que podemos consolarlas. Registrarlas. Esto muestra que dentro de la función tenemos acceso tanto a variables globales (declaradas fuera de la función) como a variables locales (declaradas dentro de la función). Muevamos las instrucciones de console.log fuera de la función y colóquelas justo después de llamar a la función.

let globalLet = "This is a global variable";
   
function fun() {
  let localLet = "This is a local variable";
   
}
fun();
  console.log(globalLet); // This is a global variable
  console.log(localLet); // localLet is not defined

Salida:

Todavía podemos ver el valor de la variable global, pero para la variable local console.log arroja un error. Esto se debe a que ahora las declaraciones de console.log están presentes en el ámbito global donde tienen acceso a las variables globales pero no pueden acceder a las variables locales.

Advertencia: siempre que declare variables, utilice siempre el prefijo let. Si no utiliza la palabra clave let, las variables se crean de forma predeterminada en el ámbito global. Por ejemplo, en el ejemplo anterior, eliminemos la palabra clave let antes de la declaración de localLet.

let globalLet = "This is a global variable";
   
function fun() {
   localLet = "This is a local variable";
}
   
fun();
  console.log(globalLet); // This is a global variable
  console.log(localLet); // This is a local variable

Producción:

Ahora también podemos consolar. registrar la variable local porque localLet se creó en el ámbito global ya que nos perdimos la palabra clave let al declararla. Lo que realmente sucedió es que como no usamos la palabra clave let, JavaScript primero buscó localLet en el ámbito local y luego en el ámbito global. Como no había ninguna variable global existente con ese nombre, creó una nueva variable global.
Una de las preguntas más frecuentes en las entrevistas es el escenario en el que tanto la variable global como la local tienen el mismo nombre. Veamos qué pasa entonces.

let globalLet = "This is a global variable";
   
function fun() {
  let globalLet = "This is a local variable";
}
fun();
console.log(globalLet); // This is a global variable

Salida:

En este ejemplo, tenemos declarada una variable local y global «globalLet». Lo que importa aquí es el ámbito en el que estamos accediendo. En el ejemplo anterior, estamos accediendo a él en el ámbito global, por lo que generará la variable global como variable local no está presente en su ámbito. Vamos a mover la instrucción console.log dentro de la función fun().

let globalLet = "This is a global variable";
   
function fun() {
  let globalLet = "This is a local variable";
  console.log(globalLet); // This is a local variable
}
fun();

Salida:

Dentro de la función fun(), tanto las variables locales como las globales son accesibles. Pero cuando consolamos la variable globalLet, primero JavaScript intenta encontrar una variable local en el ámbito actual. Encuentra la variable local y la emite. De lo contrario, habría buscado la variable «globalLet» en el ámbito externo (que en este caso es el ámbito global).

¿Qué pasa si queremos acceder a la variable global en lugar de la local aquí? Bueno, el objeto ventana viene a nuestro rescate. Todas las variables globales declaradas usando la palabra clave «var» o sin usar ninguna palabra clave se adjuntan al objeto de la ventana y, por lo tanto, podemos acceder al nombre de la variable global como se muestra en el ejemplo a continuación.

var globalLet = "This is a global variable";
   
function fun() {
  let globalLet = "This is a local variable";
  console.log(window.globalLet); // This is a global variable
}
fun();

Salida:

después de discutir sobre los alcances en JavaScript, adivinar la salida de los siguientes fragmentos de código debería ser pan comido.

function fun(){
    function fun2(){
         i = 100;
    }
    fun2();
    console.log(i); // 100
}
fun(); 

Producción:

function fun(){
    function fun2(){
        let i = 100;
    }
    fun2();
    console.log(i); // i is not defined 
}
fun();

Producción:

En el primer ejemplo, como no usamos la palabra clave let, se asumió que la variable «i» se declaraba en el ámbito global y, por lo tanto, la salida era 100. En el segundo ejemplo, «i» se convirtió en una variable local y, por lo tanto, no accesible fuera del alcance de esa función.

Veamos otro ejemplo-

function fun(){
    if(true){
        let i = 100;
    }
    console.log(i); // i is not defined
}
fun();

Producción:

Después de ES2015, comenzamos a usar let en lugar de var para declarar variables y ahora el bloque if también se cuenta como un alcance de bloque, por lo que en el ejemplo anterior obtenemos un error en lugar del valor 100. Si cambiamos let a var, obtendrá 100 como salida como si el bloque no se considerara un alcance de bloque anteriormente, solo las funciones lo fueran.

Si también desea exhibir su blog aquí, consulte GBlog para escribir un blog invitado en GeeksforGeeks.