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.
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
.
JavaScript cuando interpreta el código pasa las funciones y la declaración de las variables al inicio del scope (Por eso las variables se inicializan por defecto con undefined)
Las declaraciones se elevan pero solo las declaraciones, las funciones e imports se elevan por completo y las clases no sufren de hoisting.
Ejemplos
Aunque te haya dicho que el hoisting solo ocurre con declaraciones con var
, no es totalmente cierto. El hoisting hará que el intérprete de JavaScript eleve las declaraciones con let
y const
a la Temporal Dead Zone.
La Temporal Dead Zone es una región del código donde la variable está declarada, pero no es posible acceder a esta, provocando un error de tipo ReferenceError
.
console.log(nameVar) // undefined
console.log(nameLet) // ReferenceError: name Let is not defined
var nameVar = "myVar"
let nameLet = "myLet"
var
en las declaraciones de variables.