Por qué las variables globales dan valores indefinidos en JavaScript

JavaScript es uno de los lenguajes de programación más antiguos. Dado que es compilado y ejecutado por el navegador, la forma en que funciona es algo diferente de los lenguajes de nivel de sistemas como C o Java.

El comportamiento del lenguaje de programación JavaScript puede resultar un poco extraño para muchos programadores principiantes. Para comprender completamente el lenguaje JavaScript, debe comprender a fondo varios conceptos de este lenguaje, como bucle de eventos, burbujeo y captura, pila de llamadas y muchos más.

En este artículo, aprenderemos sobre uno de esos conceptos del lenguaje de programación JavaScript llamado elevación. Antes de entrar en por qué las variables globales dan valores undefined, primero comprendamos el concepto de elevación en JavaScript.

Concepto de elevación y por qué las variables globales dan valores undefined en JavaScript

El alojamiento es un concepto en JavaScript donde todas las declaraciones de variables presentes en el código JavaScript se eliminan y se les asigna un valor undefined durante el tiempo de compilación. De manera similar, todas las declaraciones de funciones dentro de JavaScript se extraen y almacenan dentro del alcance global.

Esto se llama elevación variable. Esto es independiente de si el alcance de la variable o función es local o global.

Comprendamos ahora cómo funciona el concepto de alojamiento en JavaScript y cómo asigna valores undefined a las variables en JavaScript. En el siguiente código de ejemplo, hemos definido una variable global llamada abc y una función a().

let abc;
function a() {
  console.log('This is a function...');
}
console.log(abc);
debugger
abc = 5;
console.log(abc);

Producción :

undefined
5

Aquí, ¿ha notado que puede usar la variable abc incluso antes de que se inicialice? ¿Alguna vez te has preguntado cómo es esto posible?

Esto no está permitido en otros lenguajes de programación. La razón por la que esto está sucediendo es debido a la elevación.

El código anterior representa la primera instrucción de la consola. Aquí, es importante agregar un depurador para ver el estado de las variables dentro de las herramientas de desarrollo de Chrome.

Después de escanear el código JavaScript, el compilador de JavaScript escanea todas las variables y funciones, las agrega al alcance global y asigna undefined a la variable abc.

Luego, el motor de JavaScript comienza a ejecutar el código línea por línea, y tan pronto como encuentra la variable abc, se le asigna un valor, en este caso, 5. Asignará 5 a la variable abc en el ámbito global.

El siguiente resultado representa la segunda declaración de la consola después de que a la variable se le haya asignado un valor de 5.

Así funciona el concepto de variables y elevación de funciones. Y esta es la verdadera razón por la que las variables globales en JavaScript dan el valor undefined.