JavaScript — Que es Hoisting?

Hoisting es cuando en JS una declaracion es elevada(‘hoisted’) a la parte superior del scope por el interprete de JS

Hoisting es un comportamiento por default de JS de mover todas las declaraciones a la parte superior del scope actual.

Hoisting variables

Empecemos con un ejemplo:

function containsHoisting() {
console.log(hoistedVariable);
var hoistedVariable = "I was hoisted!";
}
containsHoisting(); // logs undefined

Como es que hoistedVariable se convierte en undefined? debería ser undeclared ya que no hemos tocado la variable hoistedVariable aun.

Esto es debido al hoisting ! Veamos, como el interprete JS lo cambia a a esto:

function containsHoisting() {
var hoistedVariable; // <-- agrega esta linea aqui!
console.log(hoistedVariable);
hoistedVariable = "I was hoisted!";
}
Entonces ahora esta declarada, pero no definida.

En javascript una variable puede ser declarada después de haber sido usada, en otras palabras, una variable puede ser usada antes de que haya sido declarada.

Las inicializaciónes no son Hoisted(elevadas)

JavaScript solo eleva declaraciones, no inicializaciones
var x = 5; // Initialize x
elem = document.getElementById(“demo”); // Find an element 
elem.innerHTML = x + “ “ + y; // Display x and y
var y = 7; // Initialize y

Aquí vemos que y esta indefinida, esto es por que solo la declaración de (y) y no su inicialización (=7) están siendo elevadas(hoisted) a la parte superior.

Recuerda siempre declarar tus variables en la parte superior!


.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.