5 min de lectura

Que es hoisting

Grúa con la capacidad de elevar determinadas cosas.
Referencia a levantamiento de variables.

La palabra a la que hace referencia hoisting – elevamiento – es a la forma en la que java script determina el comportamiento de las variables y funciones en tiempo de compilación.

Sin embargo, el termino puede llevar a malos entendidos debido a que suponemos que JS eleva las declaraciones y funciones hacia el “scope” de la función o programa, cuando esto no sucede en realidad debido a que JS  asigna memoria a variables y funciones para después ejecutar el código.

Uso de hoisting en funciones

Es por eso que una de las ventajas de hoisting es poder mandar llamar a funciones y variables sin siquiera ser declararlas, como se muestra a continuación.

Por lo que se esperaría que el siguiente código funcione con normalidad.

Es por la misma razón en que JS coloca las declaraciones de funciones antes que cualquier segmento de código del programa y se pueda mandar llamar la función antes de su declaración del código como se muestra en la siguiente función.

Al tener similitud sintáctica y estructura general de la familia de lenguaje C se esperaría que al momento de la ejecución este código imprima un error, debido a que se desconoce al no tener una previa declaración.

Sin embargo, al ser un lenguaje interpretado (que no requiere de ningún otro paso antes de la ejecución), el programa dejaría de funcionar hasta encontrarse con un error en el programa.

Incluso si el programa contiene errores pero no son detectados al ejecutarse algunos de estos bloques de código, este, seguiría funcionando.

Distintos usos de hoisting en variables.

Para el caso de las variables con hoisting en JS se pueden mandar llamar y usar antes de declararlas como se muestra en el ejemplo siguiente:

La siguiente función utiliza hoisting al inicializar y utilizar las variables sin previa inicialización, después se suma el valor dos, se asigna el valor de costoRefresco a total y este se imprime en la consola, por ultimo se realizan las declaraciones de las variables previamente utilizadas.

Forma en la que JS trabaja con hoisting.

Usar la estructura de código en JS

Sin embargo, no podemos utilizar las variables sin inicialización, por lo que, si utilizamos una variable sin inicializarla su valor por defecto será undefined, como se muestra en el siguiente ejemplo este comportamiento:

Al momento de sumar el costoRefresco con costoPapas y ejecutar el script arroja como resultado NaN (Not – a – Number) ya que costoPapas no a sido inicializado y al imprimir el total que es la suma de estos dos, este ultimo “transfiere” a esta variable el undefined.

A continuación veremos otro ejemplo en el que la ausencia de inicialización hace que costoPapas sea undefined:

En este caso es similar al primer ejemplo, sin embargo, aunque se ha declarado la variable costoPapas al inicio del scope, al imprimirse sigue sin inicializarse por lo que el compilador no puede determinar el valor de costoPapas y manda como resultado hacia la consola:      7 undefined.

El cual indica que costoRefresco es igual a 7 debido a su inicialización y que costoPapas es undefined debido a la ausencia de este último.

Scope vs Hoisting.

El scope como su palabra lo dice es el alcance de una variable la cual puede ser local o global, cuando queremos acceder desde cualquier parte del código a una variable se debe declarar global, de lo contrario optamos por declararla local ya que será en ese ámbito donde funcionará.

Dicho esto se puede ocasionar un problema al utilizarse dentro de los ámbitos global y local, como se muestra a continuación.

Este ejemplo muestra cómo queremos intentar mandar llamar a nuestra variable global dentro del scope de nuestra función, sin embargo, debemos tener cuidado al momento de declarar las variables así como asignarles nombres claros y significativos.

Al momento de mandar llamar dentro de la función, saludo ya a sido asignada como undefined ya que dentro del ámbito local no ha sido inicializada y JS no sabe aún qué valor tendrá dicha variable.

Código completo en el repositorio github en la siguiente liga:

https://github.com/diegoabundis/hoisting

 

Deja tus comentarios

This site uses Akismet to reduce spam. Learn how your comment data is processed.