Hoisting es un término para describir que las declaraciones de variables y funciones son desplazadas a la parte superior del scope más cercano, scope global o de función. Esto sucede solamente con las declaraciones y no con las asignaciones.

<aside> 💡 El código permanece igual, solo es una interpretación del motor de JavaScript. En el caso de las variables solamente sucede cuando son declaradas con var.

</aside>

Hoisting en variables declaradas con var

En el siguiente código, la respuesta del console.log es undefined, porque al hacer referencia a una variable que no está declarada aún, JavaScript crea esta variable antes de declararla y le asigna un valor de undefined.

console.log(nombre); // undefined
var nombre = "Andres";

// Hoisting
var nombre = undefined;
console.log(nombre);
nombre = "Andres";

Hoisting en scope de bloque

Mira el siguiente código y piensa cuál sería el resultado del console.log.

if (true){
	var saludo = "hola";
	let despedida = "chao";
}
console.log(saludo);
console.log(despedida);

<aside> 💡 La respuesta es primero "hola" y luego un error de referencia. Esto sucede por el hoisting, la declaración de la variable saludo se eleva fuera del bloque en un scope superior, que puede ser un scope de función o global.

</aside>

var saludo = undefined;
if (true){
  saludo = "hola";
	let despedida = "chao";
}

console.log(saludo); // "hola"
console.log(despedida); // ReferenceError: despedida is not defined

<aside> 💡 Es por eso que var no tiene scope de bloque, y se debe tener cuidado porque puede provocar errores en el código.

</aside>