100 Días de Javascript - 4 de 100 - Visibilidad de variables

En este día he decidido escribir sobre la visibilidad de variables, o variable scope, en JS.

Es importante conocer el comportamiento de JS con respecto al scope que tiene una variable a fin de evitar problemas con la sobreescritura accidental de estas, así como para comprender qué variables están disponibles en diferentes partes del código..

#Happy Coding!

Variable scopes

En JS hay tres tipos principales de scopes:

• Global scope: Las variables declaradas fuera de cualquier función tienen un alcance o scope global. Esto significa que pueden ser accedidas desde cualquier parte del código, ya sea dentro de funciones, bloques o en el nivel superior del archivo.

var globalVariable = "Hola"; // Variable global

function miFuncion() {
  console.log(globalVariable); // Se puede acceder a globalVariable aquí
}

• Local scope (funcional o block scope): Las variables declaradas dentro de una función o un bloque (introducido por las sentencias let o const desde ES6) tienen un alcance local. Estas variables solo son accesibles dentro de la función o bloque donde fueron declaradas.

function miFuncion() {
  var localVariable = "Hola"; // Variable local

  if (true) {
    let blockVariable = "Hola desde el bloque"; // Variable de bloque
    console.log(localVariable); // Se puede acceder a localVariable aquí
    console.log(blockVariable); // Solo se puede acceder a blockVariable aquí
  }

  console.log(localVariable); // Se puede acceder a localVariable aquí
  // console.log(blockVariable); // Esto causaría un error, blockVariable no está disponible aquí
}

• Lexical scope: En JS las funciones pueden acceder a variables definidas en su entorno léxico, es decir, las variables definidas fuera de la función pero dentro de su alcance exterior (como una función que contiene otra función).

function exterior() {
  var externalVariable = "Externa";

  function interior() {
    console.log(externalVariable); // interior() puede acceder a externalVariable de exterior()
  }

  interior();
}

exterior(); //

El uso de lexical scope facilita la creación de código más limpio, modular y seguro, permitiendo el control del acceso a las variables y protegiendo la lógica interna de funciones.

Variable shadowing

En distintas ocasiones nos vamos a encontrar este caso en la declaración de variables, el cual ocurre cuando una variable local tiene el mismo nombre que una variable en un scope superior, lo que oculta temporalmente el acceso a la variable de alcance superior. Es decir: el scope local tiene precedencia dentro del bloque donde se encuentre declarada la variable, de tal manera que ya no se podrá tener acceso a la variable con el mismo nombre que se encuentra en otro scope.

// Variable global
var variable = "Variable global";

function ejemploShadowing() {
  // Nueva variable dentro de la función con el mismo nombre que la variable global
  var variable = "Variable local";

  console.log("Variable local:", variable); // Imprimirá "Variable local"
}

ejemploShadowing(); // Llama a la función

console.log("Variable global:", variable); // Imprimirá "Variable global"

En este caso, la función ejemploShadowing tiene una variable local llamada variable, que tiene el mismo nombre que la variable global variable. Dentro de la función, cuando se hace referencia a variable, se accede a la versión local y no a la variable global con el mismo nombre. Esto es el shadowing: la variable local hace sombra a la variable global temporalmente dentro del ámbito de la función, pero fuera de ella, el acceso sigue siendo a la variable global.