Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

¿Qué es el hoisting?

10/12
Recursos

Aportes 104

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Les dejo un video fantástico sobre hoisting de Sacha Lifs que está fantástico por si les quedaron dudas.

.

https://www.youtube.com/watch?v=uI6o97A4IrI&t=1s

El ‘levantamiento’ del que hablan es mas a fines didácticos y está bien, pero no es tan así, no es que FISICAMENTE levanta las declaraciones y las pone al principio como muchos explican. Lo que se hace en realidad es tomar ‘registros’ en memoria de donde está cada declaración(todo esto previo a que se ejecute el código en sí) y depende si es var, let, const o una función, JS va a asignarle referencias a cada una.
Si es:

  • var : asigna la referencia undefined (si de acá viene el famoso undefined)

  • let/const: asigna la referencia uninitialized(declarado pero no inicializado)

  • función: guarda un registro con la función entera(por eso la podemos llamar antes de que este creada)

Hoisting: Eleva las declaraciones, esto pasa en el momento en que se compila nuestro código antes de ser interpretado por el navegador.

De esta forma podemos asignar nuestros valores o acceder a un valor que previamente no ha sido declarado dentro de esta estructura.

Saludos amigos, como complemento a esta clase les comparto un articulo que escribi sobre este tema cuando me encontre con este comportamiento del motor de Javascript por primera vez.

Click aqui, cualquier recomendacion es bien recibida 😃

Recordar que las arrow functions no tienen la caracteristica de hoisting, entonces debemos tener cuidado en el orden de declaracion al menos en este ejemplo.

IMPORTANTE:

El hoisting solo funciona con las palabras var y function, eso significa que con const y let no funcionará, tampoco con las arrow function, recomiendo el Curso Básico de JavaScript para entendero mejor.

Y ahora que ya sbes cómo funciona el hoisting, te reto a resolver este reto de la maravillosa @teffcode:

https://twitter.com/teffcode/status/1334844911905099780

Aporte 💚

// Hoisting
// Levantamiento de variables (ayuda que da javascript por defecto)
// cada identidificador sin una declaracion si es una variable(var),let,const se terminara por convertir en una var a; a = 2
a = 2;
console.log('valor a por hoisting: ', a);
var a;
// Hoisting funciona solo en las declaraciones de variables
console.log('valor a por var: ', a);

console.log(a);
var a;

// Hoisting para var y functions
// Solo nos jode en variables var
// para las funciones el levantamiento nos ayuda a que si esta funcion aun no se ha definido, este lo tomara como si definitivamente fuera a crearse pero mas tarde por lo cual lo deja y cuando termine este dice se encontro la funcion por ende si existe en este punto por lo cual se referencia a ella

nameOfDog('Mascota Desde Hoisting')

function nameOfDog(name){
    console.log(name);
}

nameOfDog('Sandy sin hoisting')

No está de más decirlo pero…
Hoisting ≠ Hosting

aqui les dejo otra forma de ver el hoisting por sacha

https://www.youtube.com/watch?v=uI6o97A4IrI

Esta clase se llama. no tientes a la suerte

El hosting: Es el trabajo que hace el interpreter del engine de javaScript (motor de javaScript) que esta por defecto en nuestros navegadores, cuyo propósito es levantar todas nuestras funciones y variables inicializadas al principio de nuestro código, todo con el fin de poderlo optimizar.

Nota: para que el hoisting no te de una mala pasada, por buenas costumbres manda a llamar primero las variables y funciones en tu editor de código.

undefined no es un error, es una propiedad global que representa un valor primitivo, lo cual significa que a una variable no se le ha asignado un valor

El intérprete de Javascript funciona en dos fases. En la primera, el intérprete lee declaraciones de variables y funciones. Y en la segunda sucede la ejecución del código el cual procesa function expressions y asignaciones a variables.

Y por qué sucede esto del var hoisting?

Según Brendan Eich, el creador de Javascript, var hoisting fue un efecto colateral del uso del hoisting de funciones. Seguramente debido a la rápida implementación y diseño de Javascript.

https://twitter.com/aravind030792/status/522379485895983104

Hoisting: Eleva las declaraciones, esto pasa en el momento en que se compila nuestro código antes de ser interpretado por el navegador. De esta forma podemos asignar nuestros valores o acceder a un valor que previamente no ha sido declarado dentro de esta estructura.

OJO

El ‘levantamiento’ del que hablan es mas a fines didácticos y está bien, pero no es tan así, no es que FISICAMENTE levanta las declaraciones y las pone al principio como muchos explican. Lo que se hace en realidad es tomar ‘registros’ en memoria de donde está cada declaración(todo esto previo a que se ejecute el código en sí) y depende si es var, let, const o una función, JS va a asignarle referencias a cada una.Si es:

  • var : asigna la referencia undefined (si de acá viene el famoso undefined)
  • let/const: asigna la referencia uninitialized(declarado pero no inicializado)
  • función: guarda un registro con la función entera(por eso la podemos llamar antes de que este creada)

Codigo de la clase

//Hoisting : elevamiento de las declaraciones
//Solo en declaraciones, no en inicializaciones

a = 2;
var a;
console.log(a) //Resultado: 2

console.log(b);
var b = 2; // Resultado: undefined


nameOfDog('Doge') //Resultado: Doge

function nameOfDog(name){
    console.log(name)
}

Aquí se explica super completo el Hoisting.

Les recomiendo bastante en Youtube el canal de Sacha : La cocina del código, ya que explica esta clase de temas con más detenimiento y de una manera más completa que ayuda a entender.
https://www.youtube.com/channel/UCY2ogSxB2beBNBRMKU_dXzA

En palabras sencillas el Hoisting se genera cuando ejecutamos alguna variable o función antes de que sea declarada. Por lo que la consola o navegador nos retorna un undefined.

//lo que ocurre es que al momento de compilar
//javascript ordena y pone primero la declaracion y luego la asignacion
a = 2;
var a;
console.log(a); // la ejecuacion muestra 2

//igual que lo anterior. El motor del lengua, lo que haces es que lee todas las declaraciones
//y por eso de esta forma al hacer la ejecucion encuentra lo que esta buscando

console.log('tomi');

function nameOfDog(name) {
    console.log(name);
}


Cuando hago el ejemplo del profesor de la siguiente manera da error
const nameOfDog = (name) =>{console.log(name)}

pero cuando lo hago de la manera que lo hace que se muestra en la clase no da error.
¿Alguien me podría explicar porque?

  • Hoisting, es el levantamiento de las declaraciones.

El hoisting sólo se usa en las declaraciones, más no en las inicializaciones.

a = 2;
var a;
console.log('Value hoisting: ', a);  //2

console.log('Value hoisting: ', b); //undefined
var b=4;

no c hasta que punto js llego a ser una chin …

Notas de la clase:
Hoisting: Eleva las declaraciones, esto pasa en el momento en que se compila nuestro código antes de ser interpretado por el navegador.
De esta forma podemos asignar nuestros valores o acceder a un valor que previamente no ha sido declarado dentro de esta estructura.
En este proceso las variables con var declaradas “son elevadas” al inicio de la función a la que pertenecen, pero solo su declaración no su inicialización.
Las funciones también sufren de este proceso con definición incluida. Si la función se usa en una expresión, es decir se asigna a una variable será esta la que se eleve.
Las clases no sufren este proceso.
La importación de modulo si se eleva.

Recomiendo el curso de JavaScript Engine (V8) y el Navegador para entender mejor como funciona JS por detrás

Algo importante a tener en cuenta:
Las funciones de expresión, que están declaradas dentro de variables o constantes no pueden ser invocadas antes de ser declaradas

Lo que pasa es que el motor de javascript, lee primero las funciones y las eleva al principio de todo el código y posteriormente pasa a ejecutarlas…
Eso y más se explica en el curso basico de Javascript impartido por el profesor Diego degranda.

¿Qué es el hoisting?


Es el levantamiento de las declaraciones. Js eleva la declaración de la variable pero no el valor, en cambio cuando se trata de una función, esta la eleva por completo, salvo que está este declarada por una variable.

Let y const no sufren del hoisting, sino de que van a una dead zone temporal, donde ya fueron inicializadas pero no tienen ningún valor, lo cual hace que salte error cuando la invocamos pero no la declaramos por completo.

a = 2
var a
console.log(a)

console.log(b)
var b = 2

nameOfDog('Apolo')
function nameOfDog(name) {
    console.log(name)
}

Ejemplo 1:

a = 2
var a
console.log(a)
//Output: 2

Ejemplo 2:

console.log(a)
//variable inicializada
var a = 2
//Output: Undefined

Nota: JavaScript sólo utiliza el hoisting en declaraciones, no en inicializaciones.
Ejemplo 3 (Función): las funciones también se le aplica hoisting.

nameOfDog('laika')
function nameOfDog(name){
	console.log(name)
}
//nameOfDog('laika')
//Output: laika

Pdt: solo funciona con funciones creadas con la palabra function, con arrow function debes declarar primero la función para proceder a usarla.

Funciona -->

nameOfDog('Elmno');

function nameOfDog(name) {
  console.log(name);
};

No funciona -->

nameOfDog('Elmno');

const nameOfDog = (name) => {
  console.log(name);
};

Mi granito de arena
En la fase de compilación, checkea todas las DECLARACIONES de funciones o variables como : let, const, var, function, luego que se compilaron las palabras reservadas, y se les asigna un espacio en memoria (lo conocido como hoisting: levantamiento),
En la fase de ejecución, se vuelve hasta la primera línea de código pero esta vez para ASIGNAR valores a las variables así como a las funciones.
Si bien en var y en funciones, no hay problema con declararlas luego de usarlas, otra es la historia cuando se trata de let y const… ya que a estas últimas si bien se les hace hosting , no se les inicializa, es decir no se les asigna un valor ( ni siquiera el undefined como sí se le hace a var y functions)
Por eso al hacer como en la clase un ejemplo tipo:

b = 5;
let b;
//Nos botará un error del tipo ReferenceError ya que nos indicará que no se ha inicializado la variable

El hoisting se puede decir que es la inicialización de las variables antes de cualquier asignación, solo se aplica a var; let y const no sufren de hoisting, si no se inicializan mostrarán un error en su asignación.

El motor de JavaScript primero lee variables y funciones antes de ejecutar cualquier código por ende en el ejemplo del profe Oscar la función ya ha sido almacenada en memoria y la variable name se inicializó a causa del hoisting antes de la ejecución de dicha función.

Quisiera hacer una corrección al ejercicio

console.log(a)
var a = 2

realmente la variable a si esta disponible, lo que no está es inicializada al momento del llamado, siguiendo la lógica de que las declaraciones se elevan (lo que realmente sucede es que la referencias se cargan primero en memoria) es como si tuvieramos

var a
console.log(a) //undefined
a = 2

cuando una variable no esta referenciada, el navegador retorna un error

console.log(foo) //ReferenceError: a is not defined

Les comparto una buena lectura sobre el hosinting: https://medium.com/@anamartinezaguilar/qué-es-el-hoisting-327870f67b36

Estupenda explicación instructor Oscar, pudimos ver cómo se da la elevación de las declaraciones de var y function. Cuando hagan las practicas con let y const se darán cuenta que este efecto no ocurre con este tipo de declaraciones.

comparto codigos de la clase

a = 2;
var a;
console.log(a); //2

console.log(a); //undefined
var a=2;

//js usa hoisting en las inicializaciones y no en las funciones

function  nameOfDog(name) {
    console.log(name);
}
nameOfDog('Dido'); // Dido


nameOfDog('Dido'); // Dido
function  nameOfDog(name) {
    console.log(name);
}

Con funciones expresivas pasaría así. ` functionA() const functionA = function() { ... } ` El resultado va ser undefined. Lo mismo pasa con arrow functions.

Considerar que en el minuto 2:50 lo que response el programa es undefined y no error, son cosas distintas.

Hoisting
En compilación las declaraciones, no sus instancias, de las variables se ejecutan primero. Evitando así que tengamos un error de inexistencia de variables, esto solo sucede con var, con let o const no. LAs funciones también se elevan pero estas si se elevan por completo

Cuando hablamos de hoisting, hacemos referencia a cómo el compilador construye las funciones y sus llamados. Primero levanta la construcción de las funciones, así cuando se hagan llamados a tal función estaremos seguros de encontrarla.

js es un lenguaje interpretado, como es que tambien compila no entiendo?minuto 2:10

Bueno, yo tenía entendido que cuando el código es leído, toma todas las funciones primeramente y las “almacena” para luego ser interpretadas de acuerdo a sus llamados.

Hoisting: es el comportamiento predeterminado de JavaScript de mover las declaraciones a la parte superior.
By: https://www.w3schools.com/js/js_hoisting.asp

A veces se maneja un lenguaje técnico que para los que apenas estamos viendo ya prendiendo el lenguaje nos es difícil de digerir…me gusta mucho como explica Daniel este tema

https://platzi.com/clases/1798-javascript-navegador/25684-ejemplo-de-objeto-global-y-hoisting/

Hoisting realiza un levantamiento (una lectura) en memoria de cuando se declaran funciones o variables (ojo, no con todas las funciones) y solo pasa cuando se compila el código, antes de ser interpretado por el navegador. Por eso se puede acceder a un valor que es declarado después de ser llamado.
·
Solo se utiliza en declaraciones, nunca en inicializaciones.
·
EL flujo es: El motor V8 lee las declaraciones, las pasa en memoria, se ajustan o adaptan , por último ejecuta.

Aquí otro video (está en inglés; ojo) por si aún tienen dudas:
https://www.youtube.com/watch?v=j-9_15QBW2s&ab_channel=ColtSteele

HOISTING APUNTES

// var a;
a = 2;
var a; // el hoisting eleva nuetras declaraciones como 
       // si hubieramos establecido var al inicio
       // esto sucede cuando js se compila
console.log(a);// 2

// Aqui da error porque estamos accediendo al valor sin que esta establecido
console.log(a); //undefined
var a = 2;

// Teniendo en cuenta nuestro dos ejemplos javascript utiliza el hoisting
// Dentro de nuestras declaraciones  y no en las inicializaciones

//Ejemplo 3 
//aunque invoquemos nuestra funcion antes de declararla funcionara
//ya que js lo que primero compila son nuestras funciones y variables
nameOfDog('elmo');
function nameOfDog(name){

    console.log(name)
}

Cuando Oscar da el ejemplo de:

console.log(b);
var b = 2;

realmente no es un error como el lo indica, si no que, la variable “b” mediante el hoisting se declara antes del console.log con el valor “undefined” y no logra mostrar la asignacion al numero 2 que hace despues porque esta en la siguiente linea.-

Las Function Declaration se pueden ejecutar antes de que este construida la función en cambio las Function Expression no.

Pueden leer mas sobre el tema aquí

si fuese una Function Expression no funcionaria ya que se agrega a una constante que se tiene que declarar antes

nameOfDog('Elmo') 
const nameOfDog = (name) => {
	console.log(name)
}

esto daría error

Hoisting es el levantamiento de las declaraciones.

a veces es bueno ir declarando mientras vamos usando algunas variables, pero a veces esto puede ocacionar algunos problemas o toparnos con un caso de Hoisting.

En el momento en que se compila nuestro codigo, este declara las variables que hayamos utilizado en caso donde NOSOTROS no lo hubieramos hecho. El hoisting de JS solo utiliza en declaraciones, pero no en declaraciones, si nosotros usaramos:

console.log(a);
var a = 2; //RESULTADO -> UNDEFINED

Java Script lo leeria de la siguiente forma:

var a;
console.log(a);
a = 2;

Por eso se puede decir que es un “levantamiento” ya que levanta todas las declaraciones.

lo que sucede es que **var a **se guarda en memoria y eso es lo que hace ver que se eleve la función

El hoisting eleva las variables esto pasa antes de ser interpretado por el navegador

Solo sucede en declaraciones y no en inicializaciones es decir

var a; //Aqui si 
var a = 2; //Aqui no

El motor compila Js antes de ser interpretado, las pasa a memoria, lo ajusta y despues ejecuta

nameOfDog('Elmo');

function nameOfDog(name){
console.log(name);
}
//Imprime Elmo

Entiendo que una solución a el hoisting en las variables es usar let o const según sea el caso, en lugar de var.

Pero en las funciones, de lugar de utilizar funciones declaradas, es mas recomendable usar funciones expresadas o arrow functions?

Hoisting

Es javascript se conoce como hoisting a cuando las variables y las funciones se declaran antes que se procese el código y esto pasa con versiones EMS 5 hacia abajo.

En js para utilizar una variable se tiene que dar los siguientes pasos primero que declarar la variable y luego se inicializa la variable. También se puede inicializar la variable al momento de la declaración, que es la forma mas común de hacerlo

var miNombre = "Patricio"; 

Pero en ocasiones tienes variables cuyo valor aun no conoces y tienes que declararlas y luego asignar el valor cuando lo tengas

var miNombre;
miNombre = "Patricio"; 

El problema que genera el hoisting es que a veces se manda a llamar a una variable sin antes haberla declarado

console.log(miNombre);
miNombre = "Patricio"; 

Si se ejecuta el bloque de código anterior vamos a obtener como resultado un undefined, pero por qué no se genero un error como pasaría en otro lenguaje, esto es porque cuando el código de js se compila en el navegador al momento de que detecta lo que js piensa que puede ser una variable le reserva un espacio de memoria y como no la encuentra declarada, la declara por nosotros y la inicializa con un valor de undefined que sería como que si hiciéramos esto en nuestro código

var miNombre = undefined; 
console.log(miNombre);

Como se definió al principio el hoisting también se puede dar en la funciones.

hey();

function hey() {
  console.log("Hola " + miNombre);
}
var miNombre = "Patricio"; 

Lo que pasa si ejecutamos bloque de código anterior es que nos va a devolver Hola undefined porque en js las funciones y las variables en ese orden se procesan antes de ejecutar cualquier bloque de código y esto es lo que puede dar paso al hoisting.

Entonces en nuestro ejemplo al momento que detecta la función js la declara al inicio del código y hace lo mismo al detectar la variable declarándola con un valor de undefined de la siguiente forma

function hey() {
  console.log("Hola " + miNombre);
}
var miNombre = undefined; 

hey();

var miNombre = "Patricio"; 

Hay que tener en cuneta que javascript solo utiliza el hoisting en las declaraciones y no en las inicializaciones.

Es por eso que por buenas prácticas todas las variables y funciones que vayamos a utilizar se tienen que declarar al inicio del código para evitar este tipo de problemas relacionados con el hoisting.

Hace tiempo escribí algo sobre el tema cuando hice otro curso aquí les dejo el link:
Hoisting

Repositorio 🐙

Es bueno aclarar que el hoisting solo de aplica a function y var

Resumen: En palabras sencillas el Hoisting se genera cuando ejecutamos alguna variable o función antes de que sea declarada.

Elmo tor

Lo del hoisting, scope y Coerción se explica muy bien el curso básico de Javascript: https://platzi.com/clases/basico-javascript/

Hoisting es algo confuso, les recomiendo que den una leida en MDN
https://developer.mozilla.org/es/docs/Glossary/Hoisting

El Hoisting es entender como el motor de JS lee nuestro código

Elementos de JS que son afectados por el hoisting

Elemento Aplica Hoisting
var Aplica en su declaraciones
function Si aplica
import Si aplica
class No aplica el hoisting, lo que implica que tenemos que definir la clase antes de poder instanciarla.

Pero si probamos con una Arrow Function esto no pasa, ya que esto únicamente pasaba en versiones anteriores a ECMAScript 6.

Creo que era pertinente aclarar que el método del hoistig NO corre en funciones de arrow, ya que para estas el orden de las declaraciones es importante.

No se entiende nada. Lo había entendido con freddy en programación básica, sino estaría más perdida que turco en la neblina. Con la excusa de “la comunidad ayuda y te explica”, pagás para leer comentarios… Sacha es gratis…

Tomado de https://www.w3schools.com/js/js_hoisting.asp
Declare Your Variables At the Top!
Hoisting is (to many developers) an unknown or overlooked behavior of JavaScript.

If a developer doesn’t understand hoisting, programs may contain bugs (errors).

To avoid bugs, always declare all variables at the beginning of every scope.

Since this is how JavaScript interprets the code, it is always a good rule.

JavaScript in strict mode does not allow variables to be used if they are not declared.

Hoisting is JavaScript’s default behavior of moving declarations to the top of the current scope (to the top of the current script or the current function).

JavaScript Declarations are Hoisted

JavaScript only hoists declarations, not initializations.
In JavaScript, a variable can be declared after it has been used.

In other words; a variable can be used before it has been declared.

Example 1 gives the same result as Example 2:

Example 1
x = 5; // Assign 5 to x

elem = document.getElementById(“demo”); // Find an element
elem.innerHTML = x;
// Display x in the element

var x; // Declare x

Example 2
var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById(“demo”); // Find an element
elem.innerHTML = x;
// Display x in the element

The let and const Keywords

Variables defined with ‘let’ and ‘const’ are hoisted to the top of the block, but not initialized.

Meaning: The block of code is aware of the variable, but it cannot be used until it has been declared.

Using a let variable before it is declared will result in a ReferenceError.

The variable is in a “temporal dead zone” from the start of the block until it is declared

Example
This will result in a ReferenceError:
carName = “Volvo”;
let carName;

Using a const variable before it is declared, is a syntax error, so the code will simply not run.

Example
This code will not run.

carName = “Volvo”;
const carName;

JavaScript usa el hoisting en declaraciones y no en las inicializaciones

Muy experto el profe Óscar. Solo que en los cursos que he visto con él, pareciera que su forma de construir sus frases para explicar fueran buenas, pero no del todo… a mí me enreda muchas veces como habla. No sé si a alguien le pasa lo mismo.
Pero sin duda no he dejado de aprender con él.

En conclusión = siempre usar let para que no haya problemas

En general es mala práctica inicializar una variable antes de declararla y de igual manera llamar una función antes de declarar la misma.

Por esto mismo lo mejor para nuestro código es siempre declarar las variables y funciones al principio del mismo y así no tener problemas

otro concepto importante a tener en cuenta
¿Que sucede cuando utilizamos let o const?

  • Cuando utilizamos let o const para declarar nuestras variables ,estas son almacenadas en la zona muerta temporal : Esta es una zona temporal donde se guardan declaraciones echas con let y const hasta que el motor de javascript llegue a la lineal de código donde se le asigna un valor

  • ¿QUÉ ES LA TEMPORAL DEAD ZONE?

El Hoisting es un proceso que realiza el interprete de JavaSript, este se encarga de llevar las declaraciones de variables y funciones al inicio de la funcion a la que pertenezca o al inicio del scope global.

No importa en que posición del código declaremos las variables, si están declaradas con var, les afectará el hoisting.

Si declaramos e inicializamos una variable en la misma linea, el hoisting sólo subirá la declaración de esa variable y no la inicialización, por lo tanto, su valor será undefined hasta que se inicialice.

console.log(name); // undefined
var name = 'Mi Nombre;

Es como si hicieramos esto:

var name; // El hoisting lleva la declaracion al principio del código
console.log(name) //undefined
name = '"Mi Nombre'; //Cuando llega a esta línea, se inicializa la variable

Las funciones también son afectadas por el hoisting, cuando declaramos una función de esta manera:

function name(){
	return 'My name is ' + name;
}

Solamente a las funciones declarativas les afecta el hoisting. Por lo tanto, se puede acceder a esta función en cualquier parte del código, sin importar que no se halla declarado aún.
A diferencia de las variables, el hoisting sube la función completa y no solo su declaración.
Las variables declaradas con let y const tambien son elevadas, pero a un área llamada Temporal Dead Zone.

En simples palabras el hoisting es el comportamiento que tiene por defecto javascript para declarar las variables y funciones al principio del script antes de ejecutar el codigo.

como aporte, me gustaría agregar que las funciones expresivas no sufren el efecto del hoisting, no pueden ser llamadas antes de su declaración.

recomiendo la clase de hoisting con el profe Diego de Granda

Una buena aclaración:

JavaScript eleva las declaraciones de variables con var, si prueban con este codigo

a = 2;
let a;
console.log(a);

mostrará el error de que a no esta definida

El hoisting es el “levantamiento” de las declaraciones. Esto ocurre más que todo cuando utilizamos las palabras reservadas var y function, pero con la llegada de let y const en ECMAScript 6 se ha fomentado el evitar el hoisting.

Para esto veremos un ejemplo donde asignaremos una variable, más abajo la declararemos y por ultimo la llamaremos.

// var a = undefined; 
a = 2;
var a; //El compilador eleva esta variable y le asigna el valor de undefined
console.log(a);

// 2

El compilador de JavaScript, antes de interpretar el código, primero lo lee y cuando se da cuenta que el console.log manda a llamar la variable a, la eleva hasta el principio y le da el valor de undefined, luego se inicializa y finalmente se ejecuta nuestro código, dandole el valor que se les asignó. Aunque nosotros no lo hayamos escrito de esa manera. Veamos otro ejemplo.

// var a = undefined;
console.log(a); //El compilador detecta que se manda a llamar una variable no declarada
var a  = 5; //La declara al inicio del código con el valor undefined 

//undefined

De igual forma, vemos como ocurre el hoisting más explícito ya que cuando se ejecuta la segunda línea el valor de la variable es undefined porque la asignación aún no ha ocurrido.

Veamos un ejemplo con la palabra reservada function, donde haremos dos formas distintas de llamar y construir una función.

function nameOfDog(name) {
  console.log(name);
}

nameOfDog("Bruno"); //Se llama a la función construida previamente y se le pasa
//el parámetro

//Bruno

nameOfDog("Bruno"); //Se llama a una función futura y el compilador entiende que lo 
//que está dentro es un argumento y posiblemente vaya a ser utilizado como parámetro, 
//por lo que lo guarda en memoria

function nameOfDog(name) {
  console.log(name);
} //Al ver que la llamada que se guardó en memoria tiene relación con la función lo 
//que hace el compilador es que asigna el argumento en el parámetro de la función para
//su uso y posteriormente imprime el resultado en consola

//Bruno

Al cambiar la llamada de la función hacia la parte superior, el compilador de JavaScript guarda en memoria esto antes de ser intepretado para su posterior ejecución, así la función no haya sido creada aún en ese momento.

Claramente, esto ocurre solo cuando utilizamos las palabras reservadas var y function, por lo que si utilizamos let, const y arrow functions nos evitamos muchísimo este funcionamiento inesperado de nuestro código, y es mejor que tengamos un error claro a que el código no funcione como lo esperamos.

Muy importante recalcar. El hoisting realmente no es bueno. Se le aplica únicamente a las palabras reservadas var y function.

Hoisting

Es el elevamiento de las declaraciones.

a = 2
var a
console.log(a) // 2

console.log(a) //undefined
var a = 2 

Javascript usa el hoisting en las declaraciones y no en las inicializaciones.

nameOfDog('Joen') // Joen

function nameOfDog(name) {
  console.log(name)
}

Lo que ocurre es que el motor de Javascript obtiene todas las declaraciones y les hace hoisting, o sea, las lleva a la parte más alta del código, y luego va a los llamados de las funciones y/o variables.

Otra explicación mía después de ver el video del profe Sascha Lifszyc: El hoisting afecta a la declaración de las variables pero no a su inicialización, por eso si se muestra por consola una variable que esta declara e inicializada despueés del llamado, va a salir undefined.

console.log(variable) // --> undefined
var variable = 'soy una variable'

debido a que la declaración de variable se “eleva” y se configura por defecto como undefined , pero no se inicializa. Luego siguen las funciones, estas se “elevan” por completo, por eso una función puede ser llamada antes de su declaración. Pero si una función es declarada como function expression no ocurre lo mismo, vamos a ver el ejemplo.

//Función declarativa, funcionamiento del hoisting

saludar('Santiago') // --> Hola soy Santiago

function saludar(name) {
	console.log(`Hola soy ${name}`)
}

// En este ejemplo lo que ocurre es que la función saludar hace 
// hoisting con todo lo que tiene dentro, por lo tanto el output es 
// correcto

El otro ejemplo con la función expresiva

saludar('Santiago') // ReferenceError: saludar is not defined

const saludar = (name) {
	console.log(`Hola soy ${name}`)
}

// Esto ocurre porque al ser una variable, solo la declaración se hace
// hoisting, es decir la variable "saludar" hace hoisting, pero no la 
// inicialización que seria la función.

por fin, pude entender el concepto y uso de hoisting!!

Javascript solo utiliza hoisting en declaraciones y no en inicializaciones

Muy claro!1

entendido a la perfección!

Hoisting levantamiento de las declaraciones

Excelente.

les recomiendo el curso de v8 engine
https://platzi.com/clases/javascript-navegador/

El hoisting js lo usa en las declaraciones y no en las inicializaciones

Uffff está clase si la neesitaba ahora si entendí esté concepto que me tenía enredada gracias Oscar 😄

Vale aclarar que el hoisting no aplica para las funciones flecha(arrow functions)

Se explica mejor en el curso basico de JS, es un buen complemento.

Exclente punto del profesor:
Js utiliza hoisting solo en la declaracion no en la inicializacion de variables.

Cuando utiliza el ejemplo de la funcion nos explica que no da error por que el motor de Js carga el codigo en momoria y luego lo ajusta para que el mismo no de error.

el hoisting tambien aplica si hacemos funciones anonimas con var? preguntas que no me dejan dormir

Hoisting
Se refiere a la elevacion de funciones y variables que hace javascript al momento de compilar el codigo.
lista de elevados

  • var = se eleva solo la declaracion

  • function= se eleva completo

  • importo=se eleva completo

  • clases=no se elevan

//esta simple declaracion 
var a=1
//puede ser igula a esta
var a;
a=1;
//aqui vemos un ejemplo de como javascript imterpreta la primera declaracion

" Y como lo mencionaba, Elmo-Tor que compila …"
JAJAJAJAJAJAJA

f