Explicar el alcance y la string de alcance en JavaScript

En este artículo, intentaremos comprender cuál es el alcance de una variable, así como su función (o un método). Veremos qué es Scope Chain con la ayuda de ciertos ejemplos de codificación.

Veamos primero la siguiente sección que describe los ámbitos. 

Alcance:

• El alcance en JavaScript en realidad determina la accesibilidad de las variables y funciones en varias partes del propio código o programa.
• En otras palabras, Scope nos ayudará a determinar una parte determinada de un código o un programa, a qué variables o funciones se puede acceder y a qué variables o funciones no se puede acceder.
• Dentro de un ámbito en sí mismo, se puede acceder a una variable, una función o un método. Fuera del alcance especificado de una variable o función, no se puede acceder a los datos.
• Hay tres tipos de ámbitos disponibles en JavaScript: ámbito global, ámbito local/de función y ámbito de bloque. Tratemos de comprender brevemente cada uno de ellos en el siguiente apartado.

Alcance global:

• Las variables o funciones (o métodos) que se declaran bajo un espacio de nombres global (como área o ubicación) se determinan como Ámbito global. 
• Significa que se puede acceder fácilmente a todas las variables que tienen alcance global desde cualquier lugar dentro del código o programa.

Ejemplo 1: En este ejemplo, declararemos una variable global que usaremos en la última parte de nuestro código. Llamaremos a esa variable en una función. Llamaremos a esa función dentro de otra función y luego llamaremos a esa otra función para ver el resultado.

<script>
    // Global Scoped Variable
    var global_variable = "GeeksforGeeks";
  
    // First function...
    function first_function() {
        return global_variable;
    }
  
    // Second function...
    function second_function() {
        return first_function();
    }
  
    console.log(second_function());
</script>

Producción:

GeeksforGeeks

Ámbito local o funcional:

• Las variables que se declaran dentro de una función o un método tienen alcance local o de función.
• Significa que solo se puede acceder a esas variables o funciones que se declaran dentro de la función o un método dentro de esa función.

Ejemplo 2: En este ejemplo, declararemos la función principal que consistirá en una variable de ámbito local/función. Declararemos una función anidada que tendrá en cuenta esa variable y realizará una operación de multiplicación sobre ella. Llamaremos a la función anidada dentro de la función principal y luego a la función principal fuera de su declaración.

Luego, por fin, llamaremos a nuestra variable de alcance local/función junto con la función de alcance local/función para ver qué salida mostrarán al llamar.

<script>
    function main_function() {
  
        // Variable with Local Scope...    
        var a = 2;
  
        // Nested Function having Function Scope    
        var multiply = function () {
              
            // It can be accessed and altered as well
            console.log(a * 5);
        }
  
        // Will be called out when main_function gets called
        multiply();
    }
      
    // Display's the result...
    console.log(main_function());
  
    // Throws a reference error since it 
    // is a locally scoped variable
    console.log(a);
  
    // Throws a reference error since it 
    // is a locally scoped function
    multiplyBy2();
</script>

Producción:

10
undefined
Uncaught ReferenceError: a is not defined

Alcance del bloque:

• Block Scope está relacionado con las variables o funciones que se declaran usando let y const ya que var no tiene alcance de bloque.
• Block Scope nos dice que las variables que se declaran dentro de un bloque { }, solo se puede acceder dentro de ese bloque, no fuera de ese bloque.

Ejemplo 3: En este ejemplo, declararemos un bloque usando llaves «{ }», y dentro de ese bloque, declararemos una variable que tiene un valor determinado. Llamaremos a esa variable fuera del alcance bloqueado para ver qué salida muestra realmente al llamar.

<script>
    {
        let x = 13;
    }
    // Throws a reference error 
    // since x is declared inside a block which 
    // cannot be used outside the block
    console.log(x);
</script>

Producción:

Uncaught ReferenceError: x is not defined

String de alcance :

• El motor de JavaScript utiliza ámbitos para averiguar la ubicación exacta o la accesibilidad de las variables y ese proceso en particular se conoce como string de ámbito.
• String de alcance significa que una variable tiene un alcance (puede ser global o local/función o alcance de bloque) es utilizada por otra variable o función que tiene otro alcance (puede ser global o local/función o alcance de bloque).
• Esta formación de string completa continúa y se detiene cuando el usuario desea detenerla de acuerdo con el requerimiento.

Ejemplo 4: en este ejemplo, primero declararemos una variable de alcance global que usaremos en la última parte del código, y luego declararemos la función principal dentro de la cual haremos algunas cosas. Declararemos otra variable local/con ámbito de función dentro de esa función principal y justo después declararemos dos funciones anidadas (con ámbito local/de función) dentro de la propia función principal.

• Primero, la función anidada imprimirá el valor de la variable de ámbito local/de función y la segunda función anidada mostrará el valor de la variable de ámbito global.
• Llamaremos a las dos funciones anidadas dentro de la función principal y luego llamaremos a la función principal fuera de su espacio de nombres de declaración. 

<script>
    // Global variable
    var global_variable = 20;
  
    function main_function() {
        // Local Variable
        var local_variable = 30;
  
        var nested_function = function () {
  
            // Display the value inside the local variable
            console.log(local_variable);
        }
  
        var another_nested_function = function () {
              
            // Displays the value inside the global variable
            console.log(global_variable);
        }
  
        nested_function();
        another_nested_function();
    }
  
    main_function();
</script>

Producción:

30
20