¿Qué es el hoisting en JavaScript?
Men? de navegaci?nMen?
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

¿Qué es el hoisting en JavaScript?

GruaElevadora

Una de las particularidades de JavaScript es lo que se conoce comúnmente como hoisting. Dicha característica consiste en que con independencia de donde esté la declaración de una variable, ésta es movida al inicio del ámbito al que pertenece. Es decir, aunque nuestro código sea como el siguiente:

function foo() {
    console.log(x);
    var x=10;
}

Realmente se tratará a todos los efectos como si hubiésemos escrito:

function foo() {
    var x;
    console.log(x);
    x=10;
}

Por supuesto, al ejecutar el código este imprime “undefined” en pantalla, pero no es porque la variable x no esté definida al momento de ejecutar el console.log, es porque no tiene valor (y las variables sin valor asignado se les asigna el valor de undefined). Esto hace que el hoisting pase indvertido muchas veces, pero debemos tener cuidado con él. Por ejemplo, supongamos el siguiente código:

var x='global value';
function foo() {
    console.log(x);
    var x='local value';
    console.log(x);
}

foo();

Uno podría esperar que se imprimiese primero “global value” y luego “local value”, ya que parece que cuando se ejecuta el primer console.log(x) la variable x local todavía no existe, por lo que se imprimiría el valor de la variable x global. Pero no ocurre esto. En su lugar dicho código muestra “undefined” y luego “local value”. Eso es debido a que gracias al (o por culpa del) hoisting es como si realmente hubiésemos escrito:

var x='global value';
function foo() {
    var x;
    console.log(x);
    x='local value';
    console.log(x);
}

foo();

Ahora se puede observar claramente como la variable x local oculta a la variable x global incluso antes del primer console.log.

Es importante además recalcar que, a diferencia de otros lenguajes, el código dentro de las llaves de un if o de un for no abre un ámbito nuevo. Supongamos un código como el que viene a continuación:

function foo() {
    var item={v:'value'};
    for (var idx in [0,1]) {
        var item = {i: idx};
        console.log(item);
    }
    console.log(item);
}

foo();

Este código parece que tenga que imprimir {i:0}, {i:1} (al iterar dentro del for) y luego {v:'value'} (el valor de la variable item de fuera del for). Pero  realmente la declaración de la variable item dentro del for se mueve fuera de este, ya que el bloque for no declara un nuevo ámbito de visibilidad. De este modo el código es equivalente a:

function foo() {
    var item;       // Primer item declarado
    var item;       // Segundo item declarado dentro del for
    var idx;        // Variable idx declarada en el for
    item={v:'value'};
    for (idx in [0,1]) {
        item = {i: idx};
        console.log(item);
    }
    console.log(item);
}

foo();

Declarar dos veces una misma variable en JavaScript no da error y ahora se puede ver como la salida real de nuestro programa será {i:0}, {i:1} y luego{i:1} otra vez. Fíjate que lo mismo ocurriría en el caso de la variable idx si hubiese otra variable idx declarada antes del for.

En resumen, el hoisting es una característica de JavaScript que aunque muchas veces pasa inadvertida debemos comprender, para así entender algunos comportamientos del lenguaje que de otro modo nos parecerían totalmente erráticos.

Eduard Tomás Eduard es ingeniero informático y atesora muchos años de experiencia como desarrollador. Está especializado en el desarrollo de aplicaciones web y móviles. Mantiene un conocido blog sobre desarrollo en .NET en general y ASP.NET MVC en particular. Colabora con la comunidad impartiendo charlas en formato webcast y en eventos de distintos grupos de usuarios. Puedes seguirlo en Twitter en @eiximenis. Ver todos los posts de Eduard Tomás

No te pierdas ningún post

Únete gratis a nuestro canal en Telegram y te avisaremos en el momento en el que publiquemos uno nuevo.

Archivado en: Desarrollo Web

Comentarios (4) -

La primera vez que me encontré con el término fue, hace tiempo, cuando andaba buscando información sobre el ámbito de las variables en Javascript. Aquí os dejo un par de enlaces que guardé en su momento y que me ayudaron con el tema:

www.adequatelygood.com/...coping-and-Hoisting.html
code.tutsplus.com/.../quick-tip-javascript-hoisting-explained--net-15092

Keep writing :-)

Responder

Nicolás Herrera
Colombia Nicolás Herrera

Otro caso, y que en ocasiones confunde, es con el uso de las funciones en sus dos presentaciones,  declaraciones y expresiones:

foo();
function foo() {console.log('foo...')} // Ok!
- - -
foo();
var foo = function() {console.log('foo...')} //Error!! :'C Incluso con las expresiones nombradas...

Saludos

Responder

Hola Nicolás:

¡Muchas gracias por tu aportación!

Un saludo

Responder

Pedro Luna
Latin America Pedro Luna

Este es el «it's not a bug, it's a feature» del día.

Responder

Agregar comentario