JavaScript | Izar

En JavaScript, Hoisting es el comportamiento predeterminado de mover todas las declaraciones en la parte superior del ámbito antes de la ejecución del código. Básicamente, nos da la ventaja de que no importa dónde se declaren las funciones y las variables, se mueven a la parte superior de su alcance, independientemente de si su alcance es global o local. 

Nos permite llamar funciones incluso antes de escribirlas en nuestro código. 

Nota: JavaScript solo eleva las declaraciones, no las inicializaciones.

JavaScript asigna memoria para todas las variables y funciones definidas en el programa antes de la ejecución.

Entendamos qué es exactamente esto: 
La siguiente es la secuencia en la que ocurren la declaración e inicialización de variables. 

Declaración –> Inicialización/Asignación –> Uso 

// Variable lifecycle
let a;        // Declaration
a = 100;      // Assignment
console.log(a);  // Usage

Sin embargo, dado que JavaScript nos permite declarar e inicializar nuestras variables simultáneamente, este es el patrón más utilizado:  

let a = 100;

Nota: Recuerde siempre que, en segundo plano, Javascript primero declara la variable y luego la inicializa. También es bueno saber que las declaraciones de variables se procesan antes de ejecutar cualquier código. 

Sin embargo, en javascript, las variables no declaradas no existen hasta que se ejecuta el código que las asigna. Por lo tanto, asignar un valor a una variable no declarada la crea implícitamente como una variable global cuando se ejecuta la asignación. Esto significa que todas las variables no declaradas son variables globales.

// hoisting
function codeHoist(){
    a = 10;
    let b = 50;
}
codeHoist();
 
console.log(a); // 10
console.log(b); // ReferenceError : b is not defined

Producción: 

Explicación: en el ejemplo de código anterior, creamos una función llamada codeHoist() y allí tenemos una variable que no declaramos usando let/var/const y una variable let b. JavaScript asigna el alcance global a la variable no declarada, por lo que podemos imprimirla fuera de la función, pero en el caso de la variable b, el alcance está limitado y no está disponible fuera y obtenemos un error de referencia.

Nota: Hay una diferencia entre ReferenceError y error indefinido. Un error indefinido ocurre cuando tenemos una variable que no está definida o definida explícitamente como tipo indefinido. Se lanza ReferenceError al intentar acceder a una variable no declarada previamente. 

ES5

Cuando hablamos de ES5, la variable que nos viene a la mente es var. Elevar con var es algo diferente en comparación con let/const. Hagamos uso de var y veamos cómo funciona la elevación:  

// var code (global)
console.log(name); // undefined
var name = 'Mukul Latiyan';

Producción: 

Explicación: en el código anterior, intentamos consolar el nombre de la variable que se declaró y asignó más tarde que usarlo, el compilador nos da undefined que no esperábamos, ya que deberíamos haber obtenido ReferenceError ya que estábamos tratando de usar la variable de nombre incluso antes declarándolo 

Pero el intérprete ve esto de manera diferente, el código anterior se ve así:  

//how interpreter sees the above code
var name;
console.log(name); // undefined
name = 'Mukul Latiyan';

Producción: 

Variable de ámbito de función

Veamos cómo se elevan las variables con ámbito de función.  

//function scoped
function fun(){
    console.log(name);
    var name = 'Mukul Latiyan';
}
fun(); // undefined

Producción: 

No hay diferencia aquí, ya que en comparación con el código en el que declaramos la variable globalmente, nos quedamos sin definir ya que el código visto por el intérprete es: 

//function scoped
function fun(){
    var name;
    console.log(name);
    name = 'Mukul Latiyan';
}
fun(); // undefined

Producción: 

Para evitar este escollo, podemos asegurarnos de declarar y asignar la variable al mismo tiempo, antes de usarla . Algo como esto:  

//in order to avoid it
function fun(){
    var name = 'Mukul Latiyan';
    console.log(name); // Mukul Latiyan
}
fun();

Producción: 

ES6

Háganos 
saber que las variables declaradas con las palabras clave let tienen un alcance de bloque y no un alcance de función y, por lo tanto, no hay ningún tipo de problema cuando se trata de izar. 

Ejemplo:  

//let example(global)
console.log(name);
let name='Mukul Latiyan'; // ReferenceError: name is not defined

Producción: 

Como antes, para la palabra clave var, esperamos que la salida del registro no esté definida. Sin embargo, dado que es6 let no nos toma con amabilidad el uso de variables no declaradas, el intérprete arroja explícitamente un error de referencia. Esto asegura que siempre declaramos nuestra variable primero. 

const se comporta de manera similar a let cuando se trata de izar.