Explicación del Hoisting de JavaScript

El video de consejo rápido de hoy viene en respuesta a una pregunta en Twitter sobre el "hoisting" de JavaScript. ¿Qué es? ¿Cómo funciona? ¿Qué necesitas saber al respecto? Todo eso se cubrirá en esta lección de fundamentos enfocada en el principiante.

Transmisión de pantalla completa

Hoisting explicado

Ten en cuenta el siguiente código:

1

2

var myvar = 'my value'; 

3

alert(myvar); // my value

Bien, por supuesto, la alerta mostrará "mi valor". Eso es obvio; sin embargo, quédate conmigo. Luego, crearemos una función inmediata, que alerta el mismo valor.

1

2

var myvar = 'my value'; 

3

4

(function() { 

5

  alert(myvar); // my value 

6

})();

Está bien, está bien. Aún es obvio, lo sé. Ahora, revisemos la mezcla y creemos una variable local dentro de esta función anónima del mismo nombre.

1

2

  var myvar = 'my value'; 

3

4

(function() { 

5

  alert(myvar); // undefined 

6

  var myvar = 'local value'; 

7

})();

¿Eh? ¿Por qué la alerta ahora se muestra undefined? Aunque declaramos una nueva variable, todavía está por debajo de la alerta; por lo que no debería tener ningún efecto, ¿verdad? Incorrecto.

Las declaraciones de variables se suben

Dentro de su ámbito actual, independientemente de dónde se declare una variable, será, en segundo plano, a la parte superior. Sin embargo, solo se levantará declaration. Si la variable también está initialized, el valor actual, en la parte superior del alcance, se configurará inicialmente como undefined.

Bien, descifremos la diferencia entre los términos, declaration e initialization. Supongamos la siguiente línea: var joe = 'plumber';

1

2

var joe; // the declaration

1

2

joe = 'plumber'; // the initialization

Ahora que entendemos la terminología, podemos comprender más fácilmente lo que está sucediendo bajo el capó. Ten en cuenta la siguiente función falsa.

1

2

(function() { 

3

  var a = 'a'; 

4

  // lines of code 

5

  var b = 'b'; 

6

  // more lines of code 

7

  var c= 'c'; // antipattern 

8

  // final lines of scripting 

9

})();

Declara todas las variables en la parte superior.

Ten en cuenta que lo que se ejemplifica anteriormente se considera una mala práctica. No obstante, detrás de escena, todas esas declaraciones de variables, independientemente de dónde ocurran en el alcance de la función, se elevarán a la parte superior, así:

1

2

(function() { 

3

  var a, b, c; // variables declared 

4

  a = 'a'; 

5

  // lines of code 

6

  b = 'b'; // initialized 

7

  // more lines of code 

8

  c= 'c'; // initialized 

9

  // final lines of scripting 

10

})();

Momento Aha

Si ahora volvemos al fragmento de código undefined y confuso original, desde arriba:

1

2

 var myvar = 'my value'; 

3

4

(function() { 

5

  alert(myvar); // undefined 

6

  var myvar = 'local value'; 

7

})();

Ahora debería tener perfecto sentido por qué myvar está alertando undefined. Como aprendimos, tan pronto como se declaró la variable local, myvar, se elevó automáticamente a la parte superior del alcance de la función... por encima de la alerta. Como resultado, la variable ya había sido declarada en el momento de la alerta; sin embargo, debido a que las inicializaciones no se elevan también, el valor de la variable es: undefined.