Ámbito: enmascaramiento de variables en JavaScript

En este artículo, aprenderemos sobre el enmascaramiento de variables, que también se conoce como sombreado de variables , es decir, una variable con el mismo nombre sombreará la variable en el ámbito externo. Cuando una variable está enmascarada, la variable enmascarada es completamente inaccesible usando ese nombre de variable. El alcance es jerárquico, por lo que podemos ingresar un nuevo alcance sin obstaculizar el antiguo.

 

¿Dónde puede ocurrir?

1. Métodos o Funciones.
2. Funciones de devolución de llamada.
3. Alcance del bloque.

Nota: Puede evitar cambios o reasignaciones a las variables definidas en el ámbito externo desde el ámbito interno.

Ejemplo 1:

{
    // block 1
    const x = 'Hi';
    console.log(x); // logs "Hi"
}
// logs "undefined" as x is out of scope
console.log(typeof x);
  
{
    // block 2
    const x = 1;
    console.log(x); // logs "1"
}
// logs "undefined" as x is out of scope
console.log(typeof x);

Producción:

 

Ejemplo 2: Ahora, observaremos lo que sucede cuando tenemos alcances anidados: 

{
    // outer block
    let x = 'Hi';
    console.log(x); // logs "Hi"
    {
        // inner block
        let x = 1;
        console.log(x); // logs "1"
    }
    console.log(x); // logs "Hi"
}
// logs "undefined" as x is out of scope
console.log(typeof x);

Producción:

Enmascaramiento de variables en ámbitos anidados

Explicación: En el bloque interno, la variable x es distinta del bloque externo con el mismo nombre. Enmascara (oculta) la x que está definida en el ámbito externo. Cuando la ejecución ingresa al bloque interno, no tenemos forma de acceder a la variable en el ámbito externo ya que tiene el mismo nombre. Se define una nueva variable x con variables en el ámbito. Aquí hay otro ejemplo donde x entró en el alcance y luego salió del alcance antes de que la segunda variable llamada x hiciera lo mismo.

Ejemplo: 

{
    // outer block
    let x = { color: "blue" };
    let y = x; // y and x refer to the same object
    let z = 3;
    {
        // inner block
        let x = 5; // outer x now masked
        console.log(x); // logs 5
        console.log(y.color); // logs "blue"; 
        // object pointed to by
        // y (and x in the outer scope) is
        // still in scope
        y.color = "red";
        console.log(z); // logs 3; z has not been masked
    }
    // logs "red"; object modified in inner scope
    console.log(x.color);
      
    // logs "red"; x and y point to the same object
    console.log(y.color); 
      
    console.log(z); // logs 3
}

Producción:

 

Nota: Debe evitarse el enmascaramiento de variables, ya que puede perturbar la intención y la claridad del programa, lo que podría generar errores ocultos y resultados no deseados.

¿Cómo debemos evitarlo? El enmascaramiento de variables (sombreado) se puede evitar cambiando el nombre inequívoco de la variable.

Ejemplo:

let girl = 'Radha';
  
['Ram', 'Raj', 'Ramesh'].forEach(boy => {
  //variable 'girl' defined is accessible in the inner scope.
    
  // Radha Radha Radha (repeated three times in each loop)
  console.log(girl);
    
  // Ram Raj Ramesh
  console.log(boy); 
});

Producción:

 

Esto concluye que es la práctica de nombrar dos variables (una variable global y local/variable local y un parámetro de función de devolución de llamada) con el mismo nombre que coexiste en un ámbito donde estas variables son accesibles. La string de alcance determina qué variables están en el alcance: todas las variables en la string de alcance actual están en el alcance y (siempre que no estén enmascaradas), se puede acceder a ellas.