¿Por qué evitar las variables globales en JavaScript?

Las variables globales son variables que se declaran o definen fuera de cualquier función en el script. Esto indica que se puede acceder a las variables globales desde cualquier parte del script en particular y no están restringidas a funciones o bloques. Las variables globales de JavaScript también se pueden declarar desde dentro de una función o bloque y luego se puede acceder a ellas desde cualquier lugar, como se mencionó anteriormente. El objeto de la ventana se utiliza para este propósito exacto.

Ejemplo 1: Definir una variable global y usarla en una función y un bloque y también definir una variable global dentro de una función usando el objeto ventana y usarlo en la misma función y bloque, indicando el alcance global de ambas variables.

<script>
  
    // Global variable 'a' declared and assigned
    const a = "GFG";
  
    // Global variable 'b' declared inside a function
    function geeksForGeeks() {
        window.b = 12;
    }
  
    // Global variables 'a' and 'b' can 
    // be used in this function
    function geeks() {
        console.log("From function: " + a, b);
    }
  
    geeksForGeeks();
    geeks();
  
    // Global variables 'a' and 'b' can
    // be used in this block as well
    {
        console.log("From block: " + a, b);
    }
</script>

Producción:

From function: GFG 12
From block: GFG 12

Explicación: El primer ejemplo da una idea de las formas típicas en que se pueden crear variables globales y luego usarlas o acceder a ellas en JavaScript. La variable a se define en ámbito global en el script utilizando la sintaxis tradicional. Por otro lado, la variable b se declara y se le asigna un valor con el objeto ventana . La aplicación de este objeto es necesaria debido al hecho de que b se declara dentro de una función, por lo tanto, tiene un alcance de función por defecto y el objeto ventana lo convierte al alcance global.

A primera vista, puede parecer que las variables globales son fáciles de usar y son más convenientes que usar funciones locales y variables de ámbito local o de bloque. Pero lo cierto es que se debe minimizar al máximo el uso de variables globales. Esto se debe a que una vez que se declara una variable global, cualquier función sucesiva o bloque definido dentro de la secuencia de comandos, o varias secuencias de comandos, pueden modificarla fácilmente, y cualquier nombre de variable puede estar mal escrito por error, lo que genera problemas de depuración, especialmente para bases de código grandes. 

Para combatir esto, siempre se recomienda utilizar variables locales siempre que sea posible. Ahora varias funciones o bloques pueden tener variables definidas localmente con el mismo nombre y no causar ningún conflicto, lo que a su vez conduce a una baja probabilidad de errores.

Ejemplo 2: Crear una variable local con alcance local dentro de una función y también crear una variable local con el mismo nombre que la variable local anterior dentro de otra función. Esto asegura que no haya conflictos en múltiples variables con el mismo nombre definido en el script.

<script>
    function GFG() {
        var localVariable = 12; // Local variable
        console.log("Local variable:", localVariable);
    }
      
    function geeksForGeeks() {
        // Local variable with same name, different value
        var localVariable = "Geek"; 
        console.log("Local variable:", localVariable);
    }
      
    // Function call
    GFG();
    geeksForGeeks();
</script>

Producción:

Local variable: 12
Local variable: Geek

Explicación: El segundo ejemplo ilustra la utilización de variables locales con el mismo nombre pero diferentes valores en diferentes funciones. Si se hubiera utilizado aquí una variable global, la segunda variable con el mismo nombre habría tenido el mismo valor que la primera variable debido al alcance global en lugar del alcance local, que no es el comportamiento deseado en este ejemplo. Esta es la razón por la cual las variables locales deben usarse siempre que sea posible, como se mencionó anteriormente.

Ejemplo 3: este ejemplo muestra una solución o alternativa para usar variables globales en JavaScript. Implica envolver todo el script en una función de cierre y luego las variables que necesitan tener un alcance global pueden exponerse manualmente.

<script>
    (function () {
        var myVar = "GFG";
        console.log("This is within the closure function");
          
        // Manually exposing the variable to global scope
        window["myVar"] = myVar; 
    })();
      
    console.log("Global variable:", myVar);
</script>

Producción:

This is within the closure function
Global variable: GFG

Explicación: El tercer ejemplo muestra una forma alternativa de representación de variables globales pero sin los inconvenientes antes mencionados usando funciones de cierre. La variable que necesita tener un alcance global se puede exponer manualmente usando la sintaxis window[“var_name”] = var_name . Aún así, se recomienda evitar el uso de variables globales tanto como sea posible y, en su lugar, utilizar variables con ámbito de función o de bloque (ámbito local).