¿Que es el Hoisting de JavaScript?

JavaScript

¡Hola! El hoisting es un concepto importante en JavaScript que se refiere a la forma en que el intérprete de JavaScript maneja las variables y declaraciones de funciones. Aunque puede parecer un poco confuso al principio, una vez que entiendas cómo funciona el hoisting, podrás escribir código JavaScript más fácilmente y evitar errores comunes.

Cuando el intérprete de JavaScript procesa tu código, primero pasa por un proceso de "compilación" en el que analiza todo tu código y crea una representación interna de él. Durante este proceso, todas las declaraciones de variables y funciones se "elevan" al principio de tu código, lo que significa que puedes usarlas antes de haberlas declarado en tu código. Esto se conoce como hoisting.

Por ejemplo, mira este código:

console.log(num);
let num;

 

Aunque puede parecer que estamos intentando acceder a la variable num antes de que haya sido declarada, el intérprete de JavaScript primero "eleva" la declaración de la variable al principio del código, por lo que el código se procesa realmente como si fuera:

let num;
console.log(num);

 

Como puedes ver, esto significa que la declaración de la variable num se ejecuta antes de que intentemos acceder a ella, por lo que no obtendremos un error. Sin embargo, debido al hoisting, la variable num todavía no ha sido inicializada con un valor, por lo que su valor será undefined.

El hoisting también se aplica a las declaraciones de funciones. Por ejemplo:

miFuncion();

function miFuncion() {
  console.log("Hola");
}

 

En este caso, el intérprete de JavaScript eleva la declaración de la función al principio del código, por lo que el código se procesa realmente como si fuera:

function miFuncion() {
  console.log("Hola");
}

miFuncion();

 

Es importante tener en cuenta que solo las declaraciones de funciones se elevan completamente al principio del código. Las asignaciones de funciones a variables no se ven afectadas por el hoisting. Por ejemplo:

miFuncion();

var miFuncion = function() {
  console.log("Hola");
}

En este caso, obtendremos un error porque la asignación de la función a la variable miFuncion no se ha elevado al principio del código. En su lugar, la variable miFuncion se inicializa con un valor de undefined y luego intentamos llamar a una función.