Como se ejecuta el código en Javascript (Hoisting)

Es muy natural pensar que la ejecución del código sucede de arriba a abajo, línea por línea. Así es como se ejecuta la mayor parte del código en JavaScript, pero con algunas excepciones.

Consideremos el siguiente código, pero antes de ejecutarlo, pensemos en cual sería su salida:

console.log( a );
var a = 1;

Si lo que pensamos fue, que esto es un código no válido y que el resultado sería undefined cuando llamamos a console.log(), estamos absolutamente en lo correcto. Sin embargo, ¿qué sucede con esto otro código?

a = 1;
var a;
console.log( a );

¿Cuál debe ser la salida del código anterior? Es normal esperar undefined, ya que como la sentencia var a viene después de a = 1, y parecería normal asumir que la variable es redefinida al valor undefined. Sin embargo, la salida es 1.

Cuando vemos var a = 1, JavaScript lo divide en dos sentencias: var a y a = 1. La primera sentencia, la declaración, se procesa durante la fase de compilación, mientras que la segunda sentencia, la asignación, en la fase de ejecución.

Por lo tanto, el snippet anterior se ejecutará de la siguiente manera:

var a;   //---- Fase de compilación

a = 1;    //------ fase de ejecución
console.log( a );

Mientras que el primer snippet de esta otra:

var a;     //-----Fase de compilación

console.log( a );  
a = 1;     //------fase de ejecución

Como podemos ver, las declaraciones de funciones y variables se mueven hasta arriba del código durante la fase de compilación – también conocido como elevación (Hoisting en ingles). Como dato importante, recordar que solo las declaraciones son elevadas, mientras que cualquier asignación u otra lógica ejecutable se deja en su lugar.

El siguiente snippet muestra cómo se elevan las declaraciones de función:

foo();
function foo() {
    console.log(a); // undefined
    var a = 1;
}

La declaración de la función foo() es elevada de tal manera que podemos ejecutar la función antes de definirla. Algo importante a tener en cuenta del hoisting, es que funciona mediante el scope. Dentro de la función foo(), la declaración de la variable a se elevará a la parte superior de la función foo() y no a la parte superior del programa. La ejecución real de la función foo() con hoisting será algo como:

function foo(){
    var a;
    console.log( a ); // undefined
    a = 1;
}

Resumiendo, primero se elevan todas las declaraciones en el orden en que se encuentren para su posterior compilación, posteriormente son ejecutadas las asignaciones.

Estaré publicando algunos cosas del libro que estoy viendo, se los recomiendo, pueden descargarlo en el siguiente enlace Mastering Javascript, de aquí extraje este primer post, saludos.

P.D. Espero que les haya gustado