Hoisting en Javascript

En este artículo vamos a hablar de la importancia y las limitaciones de hoisting en JavaScript. Si has entrado a este artículo es que estás habituado a escribir código de parte del lado del cliente, ¿verdad? Pero seguro que pocos de vosotros conocéis el término hoisting. El hoisting es uno de los comportamientos predeterminados de JavaScript, y es el proceso de mover todas las declaraciones de variables a la parte superior de la función o del entorno. En este artículo vamos a explicar el hoisting en detalle con algunos ejemplos. Espero que este artículo sea de tu agrado.

Entrando en materia

Yo, personalmente, paso más tiempo implementando códigos del lado del cliente en lugar de códigos del lado del servidor. Creo que siempre es bueno hacer la formación de los datos en el lado del cliente en lugar de hacerlo en el lado del servidor. Los bucles del lado del cliente son siempre más rápidos que los del lado del servidor. Como el desarrollador del lado del cliente (ya habéis visto de qué pie cojeo), debes entender la palabra Hoisting en JavaScript. Aquí vamos a discutir eso.

Antes de entrar en materia, necesitamos saber unas cositas de JavaScript.

¿Sabías que...?

En JavaScript podemos utilizar cualquier variable antes de que se declare. También se podría decir que una variable puede declararse después de su utilización.

Por ejemplo:

Los siguientes dos scripts devolverán la misma salida.

x = 5; 
alert(x);
var x;

...y...

var x; 
x = 5; 
alert(x);

Limitaciones del hoisting

Con el proceso de Hosting podemos mover las declaraciones de variables a la parte superior del código, pero no todo son buenas noticias. El hoisting también cuenta con algunas limitaciones. Esto es muy importante, no se puede hacer hoist de la inicialización de una variable, el hoist solamente es válido para declaraciones de variables. Grábate a fuego eso en la mente. Pongamos unos sencillos ejemplos para que se entienda mejor:

Estos scripts provocaráb diferentes salidas.

var x = 2; 
var y = 4; 
alert(x+y);

Creo que a estas alturas ya nadie duda que esto será 6, ¿verdad?

Y

var x = 2; 
alert(x+y);
var y = 4; 

Esto provocará un NaN como una catedral de grande. Ya que estamos inicializando el valor de y, el hoist Javascript no está sucediendo, por lo que el valor de y será indefinido. El JavaScript considerará que y aún no se ha declarado.

Así que el segundo ejemplo es el mismo que el de a continuación.

var x = 2; 
var y;
alert(x+y);
y = 4; 

Esto provocará también una salida de NaN.

Una de las mayores máximas de los programadores es hacer siempre las cosas de manera simple. Como decía mi profesor de programación, la complejidad en la software no trae nada bueno, así que hazlo simple imbecil (Principio KISS). Así que, para no equivocarte declara siempre las variables en la parte superior de tu función o del entorno.

Y este ha sido el artículo en el que trataba explicaros un poco el hoisting en Javascript, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!