Hoistinges el comportamiento predeterminado de JavaScript para mover declaraciones a la parte superior.
Las declaraciones JavaScript son Hoisted
En JavaScript, se puede declarar una variable después de haber sido utilizada.
En otras palabras; una variable se puede utilizar antes de haber sido declarada.
El ejemplo 1 da el mismo resultado que el ejemplo 2:
Ejemplo 1:
x = 5; // Asigna 5 a x
elem = document.getElementById("demo"); // Encuentra un elemento
elem.innerHTML = x; // Muestra x en el elemento
var x; // Declara x
Ejemplo 2:
var x; // Declara x
x = 5; // Asigna 5 a x
elem = document.getElementById("demo"); // Encuentra un elemento
elem.innerHTML = x; // Muestra x en el elemento
Para entender esto, hay que entender el término "hoisting".
hoisting es el comportamiento predeterminado de JavaScript para mover todas las declaraciones a la parte superior del alcance actual (a la parte superior del script actual o de la función actual).
Las palabras clave let y const
Las variables definidas con let y const se elevan a la parte superior del bloque, pero no se inicializan.
Significado: el bloque de código conoce la variable, pero no se puede utilizar hasta que se haya declarado.
El uso de una variable let antes de declararla dará como resultado un ReferenceError.
La variable está en una "zona muerta temporal" desde el inicio del bloque hasta que se declara:
Ejemplo:
Esto dará como resultado un ReferenceError:
carName = "Volvo";
let carName;
Usar una variable const antes de declararla es un error de sintaxis, por lo que el código simplemente no se ejecutará.
Ejemplo:
Este código no se ejecutará.
carName = "Volvo";
const carName;
Leer más sobre let y const en JS Let / Const.
Las inicializaciones de JavaScript no se activan
JavaScript solo genera declaraciones, no inicializaciones.
El ejemplo 1 no da el mismo resultado que el ejemplo 2:
Ejemplo 1:
var x = 5; // Inicializar x
var y = 7; // Inicializar y
elem = document.getElementById("demo"); // Encuentra un elemento
elem.innerHTML = x + " " + y; // Muestra x & y
Ejemplo 2:
var x = 5; // Inicializar x
elem = document.getElementById("demo"); // Encuentra un elemento
elem.innerHTML = x + " " + y; // Muestra x & y
var y = 7; // Inicializar y
¿Tiene sentido que y no esté definido en el último ejemplo?
Esto se debe a que solo la declaración (var y), no la inicialización (=7), se eleva a la cima.
Debido al levantamiento, y se ha declarado antes de usarse, pero debido a que las inicializaciones no se elevan, el valor de y no está definido.
El ejemplo 2 es lo mismo que escribir:
Ejemplo:
var x = 5; // Inicializar x
var y; // Declarar y
elem = document.getElementById("demo"); // Encuentra un elemento
elem.innerHTML = x + " " + y; // Muestra x & y
y = 7; // Asignar 7 a y
Declare sus variables en la parte superior
Hoisting es (para muchos desarrolladores) un comportamiento desconocido o pasado por alto de JavaScript.
Si un desarrollador no comprende hoisting, los programas pueden contener errores.
Para evitar errores, declare siempre todas las variables al principio de cada bloque.
Dado que así es como JavaScript interpreta el código, siempre es una buena regla.
JavaScript en modo estricto no permite el uso de variables si no están declaradas. Estudie el "uso estricto" en el próximo capítulo.
W3Schools es el sitio de desarrolladores web más grande del mundo.