Qué es el Hoisting en Javascript ?
El hoisting es un nombre utilizado para referirse a cómo funcionan los contextos de ejecución en JavaScript para la creación y ejecución de funciones y variables. Entender qué es el hoisting y cómo funciona y nos da cómo desarrolladores un entendimiento más amplio del lenguaje y fortalece nuestra base de concomiento.
Antes de entrar en detalle y para hacerlo simple, el hoisting "mueve" las declaraciones de funciones y declaraciones de variables al comienzo del código. Veamos pues cómo funciona el hoisting en funciones y variables.
Hoisting en funciones
Observemos por un momento el siguiente código e intentemos determinar qué sucede.
fullname("Steave Jobs");
function fullname(fullName) {
console.log("Hello " + fullName);
}
En la primera línea de código se ejecuta la función fullname. Sin embargo no es hasta las siguientes dos líneas que esta función es declarada. El resultado de esta ejecución es después de todo la siguiente:
Hello Steave JobsQué sucede aquí ? resulta que la declaración de función es "movida" al inicio del código, por lo cual el código anterior es equivalente al siguiente:
function fullname(fullName) {
console.log("Hello " + fullName);
}
fullname("Steave Jobs");
Vamos un poco más allá e intentemos anidar la ejecución de la función fullname a una función anónima. El siguiente código es bastante predecible, funciona tal y como nosotros esperaríamos y se obtiene el mismo resultado visto anteriormente.
function fullname(fullName) {
console.log("Hello " + fullName);
}
(function(){
fullname("Steave Jobs");
})();
Ahora bien, qué pasa si definimos nuevamente la función fullname justo después de ejecutarla ?.
function fullname(fullName) {
console.log("Hello " + fullName);
}
(function(){
fullname("Steave Jobs");
function fullname(fullName) {
console.log("Hi " + fullName + ", what's up ?");
}
})();
Al ejecutar el código anterior obtenemos sin embargo lo siguiente:
Hi Steave Jobs, what's up ?Esto es porque nuevamente el código de la declaración de la función ha sido "movido" al inicio del código en el scope. El código equivalente según esto sería el siguiente:
function fullname(fullName) {
console.log("Hello " + fullName);
}
(function(){
function fullname(fullName) {
console.log("Hi " + fullName + ", what's up ?");
}
fullname("Steave Jobs");
})();
Después de todo esto, queda mucho más fácil entender la salida del siguiente script.
fullname("Bill Gates");
(function(){
fullname("Steave Jobs");
function fullname(fullName) {
console.log("Hi " + fullName + ", what's up ?");
}
})();
function fullname(fullName) {
console.log("Hello " + fullName);
}
Hello Bill Gates
Hi Steave Jobs, what's up ?Hoisting en variables
El hoisting en variables es muy similar al hoisting en funciones con una leve diferencia. Solamente se "mueve" la declaración de la variable más no su inicialización. Otro aspecto a tener en cuenta es que el hoisting solo funciona en variables declaradas con la palabra reservada var. Antes de ver nuestro primer ejemplo recordemos qué sucede cuando intentamos utilizar una variable no definida.
console.log(myName); // Uncaught ReferenceError: myName is not defined
La ejecución del código anterior arroja una excepción ReferenceError. Ahora bien, tratemos de determinar qué sucede con el siguiente código.
console.log(myName);
var myName = "Steave";
En primer lugar se intenta utiliza la variable myName en la primera línea de código. Después de esto, en la segunda línea de código se declara e inicializa la variable. El resultado del ejemplo anterior es el siguiente:
undefinedResulta que la declaración de la variable es "movida" al inicio del código, por lo cual el código anterior es equivalente al siguiente:
var myName;
console.log(myName);
myName = "Steave";
Vamos a ir un poco más allá e intentemos anidar la declaración de la variable myName a una función anónima. El siguiente código nuevamente es bastante predecible, funciona tal y como nosotros esperaríamos con la diferencia que el resultado no es undefined sino "Steave".
var myName = "Steave";
(function(){
console.log(myName);
})();
Ahora bien, qué pasa si declaramos nuevamente la variable myName justo después de utilizarla ?.
var myName = "Steave";
(function(){
console.log(myName);
var myName = "Bill";
})();
Al ejecutar el código anterior obtenermos sin embargo lo siguiente:
undefinedEsto es porque nuevamente el código de la declaración de la variable ha sido "movido" al inicio del código en el scope. El código equivalente segúne esto sería el siguiente:
var myName = "Steave";
(function(){
var myName;
console.log(myName);
myName = "Bill";
})();
Después de todo esto queda mucho más fácil entender la salida del siguiente script.
console.log(myName);
(function(){
console.log(myName);
var myName = "Bill";
})();
var myName = "Steave";
undefined
undefined