JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Elevación de variables (hoisting) en JavaScript

GruaEn esta ocasión quiero hablar de un efecto quizá poco conocido pero importante del modo en que procesa el código JavaScript.

En JavaScript existen variables globales, las cuales tienen sus ventajas en un lenguaje como este, pero también están llenas de peligros, y variables locales, cuyo ámbito se circunscribe exclusivamente a las funciones en las que se declaran.

Podemos utilizar una variable global desde dentro de una función cualquiera, ya que están accesibles desde cualquier lugar de la página, por ejemplo:

//Variable global
var name = "Jose";

function HelloWorld(){
  alert(name);
}

HelloWorld();

Al hacer esto saltará el mensaje con el nombre que hay en la variable. Bastante obvio.

Bien, pero ¿qué pasa si definimos una variable con el mismo nombre dentro de la función?:

//Variable global
var name = "Jose";

function HelloWorld(){
  //Variable local
  var name = "Pepe";
  alert(name);
}

HelloWorld();

Las reglas de precedencia de variables en JavaScript dicen que las variables locales preceden a las globales, por lo que en este caso veríamos aparecer por pantalla la palabra “Pepe” que es el valor de la variable local.

Sin embargo ahora vamos a hacerle un sutil cambio al código anterior y haremos lo siguiente:

//Variable global
var name = "Jose";

function HelloWorld(){
   alert(name);
   //Variable local
   var name = "Pepe";
}

HelloWorld();

¿Qué veremos ahora por pantalla?

Por lógica parece que deberíamos ver “Jose”, ya que en el momento de llamar al alert todavía no se ha declarado la variable local, y por lo tanto se debería acceder a la global ¿verdad? Pues no.

Lo que veremos por pantalla es un bonito “undefined”:

Undefined

¿Por qué ocurre esto?

Declaración vs Definición de variables en JavaScript

Una variable en JavaScript se declara de dos formas diferentes: mediante la palabra clave “var”, o bien directamente nombrándola por primera vez cuando se le asigna un valor (sin poner var delante, lo cual es muy mala práctica, por cierto).

El hecho de declarar una variable no implica tener que definirla, ya que la podemos declarar pero no necesariamente asignarle un valor:

var variable1;  //Se declara pero no se define
variable1 = “1”; //Se define asignándole un valor

var variable2 = 2; //Se declara y se define todo a la vez

Ahora que tenemos claro este concepto, podemos entender mejor lo que ocurre en el ejemplo anterior para que se muestre un undefined por pantalla.

El efecto de elevación

Aunque JavaScript es un lenguaje interpretado y procesa las líneas de código una a una según se las va encontrando, en realidad no es del todo así. En el caso de las variables que hay dentro de una función lo que hace el intérprete es declararlas todas a la vez al principio de la función, independientemente de donde estén realmente declaradas dentro de ésta. Por eso, en el ejemplo anterior aunque la variable está declarada y definida abajo del todo, cuando la vamos a mostrar nos devuelve un “undefined”: el intérprete “eleva” la declaración implícitamente al principio de la función, así que el código anterior es equivalente a este:

//Variable global
var name = "Jose";

function HelloWorld(){
   //Variable local
   var name;
   alert(name);
   name = "Pepe";
}

HelloWorld();

Si vemos el código de esta manera entonces el resultado cobra todo el sentido del mundo ¿verdad?

Así que precisamente por este efecto se considera una buena práctica el declarar todas las variables locales de nuestras funciones siempre al principio, independientemente de donde las vayamos a definir o utilizar. Esto nos evitará efectos desagradables como este.

Es un efecto que es interesante conocer y que puede evitarnos algún “bug” raro que nos sería muy difícil corregir si no somos conscientes de su existencia.

¡Espero que te sea útil!

Para saber más: JavaScript profesional para desarrolladores y diseñadores web

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (7) -

Genial, me encanta este lenguaje, esto no lo sabía, desde ahora a declarar las variables al comienzo de las funciones. Slds.

Responder

Excelente, había leído varias explicaciones en ingles entendiendo más o menos el concepto pero este articulo acabó de aclarar el hoisting en variables, sólo una acotación, faltó añadir el hoisting en las en las funciones, en este caso además se eleva su definición (nada más en funciones las declaradas, no en expresiones).

Responder

Excelente explicación amigo, me ha servido mucho para entender este desconocido lenguaje.

Muchas gracias!!

Responder

Un motivo mas para decir que JavaScript es un cacao. Pero mientras siga siendo el lenguaje más usado en el mundo, habrá que seguir rompiéndose los sesos intentando encontrar fallos en los programas causados por "caprichos" del lenguaje como este.

Estupenda explicación.

Responder

Colombia Elkin Bernal

Segundo Graaaaacias de la noche jajaja! Tus publicaciones son geniales, seguiré leyendote, espero sigas publicando como lo vienes haciendo.!!!!

Saludos! :)

Responder

Francisco Robles

Excelente, muy clara la explicación del concepto. Gracias.

Responder

Ezequiel Est

Revelador! gracias por compartirlo.

Responder

Agregar comentario