El concepto de Hoisting es desconocido para muchos desarrolladores y es algo que provoca muchos errores si no se entiende bien.

¿Qué es el Hoisting?

Hoisting o elevación de variables, consiste en mover todas las declaraciones del código al principio del bloque en el que nos encontremos.

Es una acción que el intérprete de Javascript realiza de forma interna cuando ve que declaramos una variable o función.

Javascript eleva la declaración de variables o la declaración de funciones pero nunca sus asignaciones.

Vamos a ver un ejemplo.
Quiero sacar una variable por pantalla

Ejemplo Hoisting

function ejemplo1(){
alert("Valor de x: " + x );
var x = 7;
alert("Valor de x: " + x );
} 

Javascript eleva la declaración de la variable x al principio de la función pero no su asignacion con el valor 7.

Lo que veremos por pantalla :
Valor de x: undefined , Valor de x: 7
Esto es lo que realmente está pasando en el intérprete.

function ejemplo1(){
var x; 
alert("Valor de x: " + x );
x=7; 
alert("Valor de x: " + x );
} 

Vamos a ver un ejemplo donde el hoisting nos va a dar problemas.
Si lanzo una función antes de definirla, no pasará nada, el concepto de hoisting me la eleva

holaMundo();
function holaMundo(){
console.log('Hola Mundo');
} 

Internamente se ejecutará esto

function holaMundo(){
console.log('Hola Mundo');
}
holaMundo();
 

Pero… y si asigno la función a una variable???

Ejemplo Hoisting en funciones

holaMundo();
var holaMundo = function(){
console.log('Hola Mundo');
} 

Tendremos un error en la ejecucion porque internamente estará pasando esto. Recordad que solo se elevan las declaraciones, no sus asignaciones.

 
var holaMundo; 
holaMundo(); 
holaMundo = function(){
console.log('Hola Mundo'); 
} 

Scopes en Javascript

Otro de los grandes problemas en Javascript es el scope o ambito de las variables.

En javascript tenemos 2 tipos de scopes: global o local.

Ejemplo variable local

 
function mostrarMensaje(){
var mensaje = "Hola Mundo";
console.log(mensaje);
} 

Ejemplo variable global

 
var mensaje = "Hola Mundo";
function mostrarMensaje(){
   console.log(mensaje);
} 

El problema viene cuando llamamos a una variable global con el mismo nombre que una variable local y se nos mezcla con problemas de hoisting.

Ejemplo de scope + hoisting

 
var mensaje = "Soy variable global";
function mostrarMensaje(){
   alert(mensaje);
   var mensaje = "soy una variable local con hoisting";
   alert(mensaje);
}

mostrarMensaje();

Tendriamos un resultado de : undefined, ‘soy una variable local con hoisting’
Ya que internamente tendremos lo siguiente

 
var mensaje = "Soy variable global";
function mostrarMensaje(){
   var mensaje;
   alert(mensaje);
   mensaje = "soy una variable local con hoisting";
   alert(mensaje);
} 

Asi que mucho cuidado con el Hoisting y con el Scope de las variables en Javascript.

No dejes variables sin declarar y mucho cuidado con el nombre que le pones a las variables

Post By Rocio Muñoz (37 Posts)

Ingeniera Informatica. Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador. Trabajo como programadora en Cic en entornos Java. Apasionada del mundo web y la innovacion social.

Connect