No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Hoisting

9/29
Recursos

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.

Hoisting en variables declaradas con var

Mira el siguiente c贸digo, 驴qu茅 crees que sea el resultado del console.log?

console.log(nombre) // undefined
var nombre = "Andres" 

La respuesta del console.log es undefined, porque al hacer referencia a una variable que no est谩 declarada a煤n, JavaScript crea esta variable antes de declararla y le asigna un valor de undefined.

Lo que JavaScript est谩 haciendo ser铆a lo siguiente:

// Hoistin: Declara y asigna undefined
var nombre = undefined
console.log(nombre) // undefined
nombre = "Andres"

Aqu铆 el nombre de Hoisting o elevaci贸n.

Hoisting en funciones

Mira el siguiente c贸digo, 驴qu茅 crees que sea el resultado del console.log?

console.log( saludar() )

function saludar() {
  return "Hola"
}

La respuesta es "Hola", porque al invocar una funci贸n que no est谩 declarada, JavaScript la eleva y por eso podemos invocar una funci贸n antes de declararla.

// Hoisting: Declara la funci贸n antes de ser invocada
function saludar() {
  return "Hola"
}

console.log( saludar() ) // "Hola"

Pero, lo que realmente sucede es que JavaScript guarda la funci贸n en memoria en la fase de creaci贸n de un contexto de ejecuci贸n, no asigna undefined como con las variables.

Buenas pr谩cticas

El tema de Hoisting solo sucede con las declaraciones de variables y funciones, por lo que se** recomienda declarar las variables y las funciones lo m谩s arriba posible del c贸digo**, para evitar errores.

Tambi茅n, el tema de hoisting ya est谩 solucionado con las nuevas formas de declarar variables con let y const.

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 806

Preguntas 89

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Realice un resumen sobre lo que yo entend铆 de lo que es el hoisting, aunque no s茅 que tan correcto sea lo que yo aprendi, igual se los dejo esperando les sea de ayuda a entender el concepto de mejor manera:

El Hoisting es un proceso del compilador de JavaScript, que consiste en que la declaracion de las variables y las funciones son llevadas al inicio del codigo, sin importar su posicion, para su procesamiento, sin embargo, la inicializacion de las variables no es llevada al inicio del codigo para su compilacion, sino solo su declaracion, lo cual suele dar espacio a errores cuando se declara una variable sin inicializarla y se procesa en el codigo antes de haber llegado a su inicializacion, lo cual nos suele dar una variable con valor undefined, ya que la variable s铆 fue almacenada en memoria, pero no se le asigno un valor hasta despues de su ejecuci贸n.

Aqui un ejemplo de esto:

saludo();

function saludo() {
    console.log("Hola " + nombre);
}

var nombre = "Aaron";

El output de este codigo seria el siguiente:

Hola undefined

Debido a que como lo hemos dicho, la variable se tomo en cuenta y se le asigno memoria, sin embargo, el compilador no la inicializo y se le dio el valor de undefined, y con ese valor se ingreso a la funcion, y ya despues de correr la funcion se le asigno el valor.

Este comportamiendo se puede entender facilmente si se comprenden estos dos puntos esenciales:

  • Las funciones siempre se mueven arriba del scope. Por lo tanto, podemos elegir donde declararlas y usarlas.
  • La declaraci贸n de las variables se mueven arriba del scope, pero no la asignaci贸n. Antes de usar una variable, habr谩 que crearla y asignarla.

En base al segundo punto, fue por eso que se cometio el error de usar la variable antes de inicializarla, pues sin problema el compilador le asigna memoria, pero no el valor hasta despues.

Basicamente por pasos, lo que hizo el compilador fue esto:

Tenemos el codigo asi:

saludo();

function saludo() {
    console.log("Hola " + nombre);
}

var nombre = "Aaron";
  1. El compilador toma las funciones y variables y las 鈥渟ube鈥 en el codigo, sin inicializar variables:

var nombre;

function saludo() {
    console.log("Hola " + nombre);
}

saludo();

var nombre = "Aaron";
  1. Le asigna memoria a la variable y le da el valor de undefined al suceder la asignacion de memoria

var nombre = undefined;

function saludo() {
    console.log("Hola " + nombre);
}

saludo();

nombre = "Aaron";

Y como hemos visto, la variable se asigna como undefined y posteriormente su utiliza al llegar a la linea:

saludos()

pues ahi lo que hace es ejecutar la funcion que ya fue procesada, pero con un valor de la variable que aun no se le asigno, quedando como undefined.

  1. Despues de correr la funcion, le asigna el valor correcto a la variable ya declarada:

var nombre = "Aaron";

function saludo() {
    console.log("Hola " + nombre);
}

saludo();

Pero ya es demasiado tarde, pues la funcion ya fue ejecutada.

Es por eso que se tiene como buena practica declarar e inicializar tanto variables como funciones al inicio de nuestro programa, sin importar donde sean utilizadas, pues de esta manera se evita usarlas antes de ser inicializadas.

Debemos saber que el hoisting solo sucede con las palabras claves var y function, por lo tanto esto nos dice que solo se da en las versiones de ECMAScript 5 o Inferiores, ya que en la version 6 y superiores se permite la declaracion de variables con let y const, que son dos nuevas variables que no activan hoisting.

CONSEJO en Visual Studio Code:

驴Qu茅 es Hoisting?
En JavaScript, las declaraciones (por ejemplo, de variables o funciones) se mueven al principio de su scope o 谩mbito. Este comportamiento se conoce como hoisting y es muy importante tenerlo en cuenta a la hora de programar para prevenir posibles errores.

  • Las funciones siempre se mueven arriba del scope. Por lo tanto, podemos elegir donde declararlas y usarlas.
  • La declaraci贸n de las variables se mueven arriba del scope, pero no la asignaci贸n. Antes de usar una variable, habr谩 que crearla y asignarla.

Funcionamiento del hoisting


|
Les adjunto el articulo completo
https://dev.to/lydiahallie/javascript-visualized-hoisting-478h

FUN FACT: El concepto de Hoisting en ingl茅s se refiere a 鈥渋zar鈥, es decir elevar un objeto. Como una bandera o con estas cosas:

Hoisting es cuando las variables y las funciones se declaran antes de que se procese cualquier tipo de c贸digo. El Hoisting funciona de ECMAScript 5 para abajo, de ECMAScript 6 en adelante no sucede porque el Hoisting sucede con var y function. En las versiones de ECMAScript 6 en adelante aparece const y let.

A mi modo de ver, y viniendo de un lenguaje fuertemente tipado y fuertemente estructurado como Delphi, me parece que la mejor disciplina seria:

  1. Declaro e inicializo las variables - Arriba del archivo
  2. Declaro las funciones - Medio del archivo (por as铆 decirlo)
  3. Utilizar variables y funciones - Final del archivo

de ese modo consigo tener un archivo mas legible y ordenado y adem谩s evito el hoisting

var miNombre = "Platzi";
function mostrarNombre(miApellido){
	console.log(miNombre + " " + miApellido);
}

mostrarNombre("Cursos Online");

Nota del d铆a: Las funciones se declaran al inicio del code y si usamos varibales que a煤n no est茅n declaras entonces debemos asegurarnos que la llamada de la funci贸n se realice despu茅s de setear la variable, as铆 podremos evitar problemas con el hoisting.

interesante el concepto de hoisting.
en resumen.


//aqui se da el hoisting en las variables
//donde la variable es usada antes de ser declarada
//
console.log(miNombre);
var miNombre = "Francisco";

hey();

function hey() {
    console.log("hola " + miNombre);
}

var miNombre = "Francisco";

//Lo ideal es que se declaren la funcines al inicio

Esto fue lo que entend铆 y lo estructur茅 as铆, espero ayudar.

//MALA PRACTICA, EVITA EL HOISTING, NO RECOMENDABLE
miNombre();

function nombre (){ //Local
    var miApellido = "Sanchez";
    console.log(miNombre + " " +miApellido)
}

var miNombre = "Maximo";

/**
 * JavaScript es tan poderoso que entiende aunque tu codigo este desordenado
 * pero es una mala practica tener elcodigo as铆
 * Lo recomendable es declarar las variables y despues, despues la funci贸n y sus instrucciones
 * y por ultimo mandar a llamar la funcion
 * tal como se muestra abajo
 */

 //BUENA PRACTICA
var miNombre = "Maximo";

function nombre (){
    var miApellido = "Sanchez";
    console.log(miNombre + " " +miApellido)
}

miNombre();```

No se si soy el unico pero no entiendo un carajo el profesor explica a medias y no lo entiendo; ya se que es dificil pero no lo podria explicar mas sencilo porque no lo entiendo.

HOISTING

- Las funciones siempre se mueven arriba del scope. Por lo tanto, podemos elegir donde declararlas y usarlas.
- La declaraci贸n de las variables se mueven arriba del scope, pero no la asignaci贸n. Antes de usar una variable, habr谩 que crearla y asignarla.

- Se trata del comportamiento predeterminado para la declaraci贸n de las variables, funciones, y en general, la declaraci贸n de cualquier contexto en Javascript.
- El hoisting solo aparece en funciones y variables del ecmascript 5 para abajo
- El hoisting del ecmascript 6 en adelante aparece en funciones, variables, const y let

Algo que no explic贸, es que el navegador cuando lee todo el codigo, primero ejecuta las funciones y despu茅s toda otra linea de codigo. Es decir, que las funciones (salvo en este caso) se ejecutan donde sea que las pongas

Hola, les comparto mis anotaciones para esta clase.

Breve resumen con explicaci贸n.

// HOISTING
    //Es la forma en que JS organiza las declaraciones

        //  Como se escriben
            sumar();
            var x = 2;
            function sumar(){
                var suma = x + y;
                return suma;
            }
            var y = 1;

        // Como JS lo organiza
            function sumar(){
                var suma = x + y;
                return suma;
            }  
             var x = 2;
             var y = undefined;
            sumar();
             var y = 1;
            // Primero se cargan las funciones, segundo la declaraci贸n de variables y el resto en el orden normal del c贸digo.

Aparte de lo que el profesor explico tambi茅n es bueno aclarar que el Undefined se debe principalmente porque la programaci贸n tiene un tema b谩sico pero importante que es la programaci贸n secuencial quiere decir que el c贸digo se lee de arriba hacia abajo

CONSOLE.LOG
console.log () escribe un mensaje en la consola.
Es 煤til para realizar pruebas.
Puedes presionar F12 para ver la consola.
ejemplo:

console.log("Platzi")
.
var misfrutas = ["manzana", "naranja", "Mango", "Kiwi" ];
console.log(misfrutas);

console.log te acompa帽ar谩 a lo largo de tu vida como programador, 煤salo bien por que鈥

tuve que ver la clase varias veces, pero al final si se pudo burro xd

/* Hoisting es cuando las variables o las funciones 
se declaran antes de.*/

/* El Hoisting funciona de ecmascript 5 para abajo */

console.log(miNombre); /*  es una funcion para imprimir en consola */

var miNombre = "tu nombre";

/*  EL resultado SERIA undefined!!!!!
Esto pasa por que hay hoisting, dado que estamos 
llamando a una variable que todavia no ha sido definida
*/
/* Tambien hay hoisting con funciones! */
hey(); /* Llamamos la funcion primero */
function hey() {
    console.log ("Hola " + miNombre2);
}
var miNombre2 = "Felipe";
/* Si llamamos una variable despues de declarar
una funcion, esta no tomara el valor, como podemos observar
en el ejemplo de hey, pero las funciones si es valid*/

2 puntos por ser el primero en escribir

A脩O 2023.

No he entendido muy bien el lenguaje de javascript pero en unos a帽os buscare este comentario y dir茅 si pude !!

As铆 que animo , no te desanimes y por mas que no entiendas s铆guelo intentando.

鈥> Hoisting: Sucede cuando llamamos una variable antes de declararla e inicializarla.

  • var (solo la declaraci贸n), la function (por completo) y el import (por completo) 鈥渟uben鈥 hacia arriba del scope.
  • Se modifica la forma en que JS interpreta nuestro c贸digo
// Lo que nosotros ponemos:

console.log(miNombre);

var miNombre = "Juan";

// Lo que enrealidad sucede por el Hoisting:

var miNombre;

console.log(miNombre); // Me devuelve un undefined

miNombre = "Juan"; // Recien aqui se inicializa la variable

Hoisting es cuando las variables y funciones se declaran antes de que se procese cualquier tipo de c贸digo. El Hoisting ahorita solo pasa con versiones pasadas de JavaScript es decir de M script 5 hacia abajo y de M script 6 hacia delante ya no sucede, por que el Hoisting solo sucede con dos palabras claves que son variable y funci贸n y del M script 6 se agregaron dos mas que son Const y Led.
Cuando se declara una variable y se puede inicializar de inmediato o despu茅s.
Como sucede un Hoisting y como evitarlo: el Hoisting sucede cuando necesitamos o procesamos una variable que se declara despu茅s de nuestra l铆nea de c贸digo que la utiliza, ejemplo:
Console.log(miNombre);
Var miNombre = 鈥淓zequiel鈥;
Undefined
Aqu铆 lo que realiza JavaScript es crear una variable con el nombre de la variable que mandamos y no hemos declarado inicializada con el valor de 鈥渦ndefined鈥.
El Hoisting tambi茅n sucede con las funciones. Cuando nosotros mandamos llamar una funci贸n antes de su declaraci贸n nos mostrara el resultado que queremos siempre y cuando las variables que ocupe est茅n declaradas antes de llamar la funci贸n.
Por buenas practicas todas las funciones y variables que vamos a utilizar deben se declaradas al inicio del c贸digo. Vamos ya avanzados y ocupamos una variable y funciones nos regresamos al inicio donde declaramos las funciones y variables y colocamos las nuevas que ocupaos, con esto evitamos el Hoisting.

Si se intenta llamar una variable antes de poderla definir, simplemente va a arrojar un error diciendo que la variable no esta definida.

贸sea que tiene que ser as铆 para que funcione 驴cierto? miren mi codigo y prueben

saludar();
var miNombre = "Javi";

function saludar() {
    console.log("hola " + miNombre)
}

luego enter en la consola y se dar谩n cuenta.

Las variables y las funciones se procesan antes de ejecutar cualquier c贸digo, pero las funciones se declaran antes que las variables.

Buenas pr谩cticas: Declarar las variables antes de ejecutar cualquier funci贸n.

HOISTING

Es cuando las variables y las funciones se declaran antes de que inicie (procese) cualquier tipo de c贸digo.

Por buenas pr谩cticas todas las funciones que se ocupen en el c贸digo, deben declararse al inicio del c贸digo.

En resumen:

Mostrar en pantalla una variable no definida, provocar谩 un error:

console.log(nombre);

La consola muestra: ReferenceError: nombre is not defined
Este error corta la ejecuci贸n del programa.

Declararla despu茅s de utilizarla, provocar谩 que el valor en ese momento de la variable sea undefined

console.log(nombre);
var nombre = "Matias";

La consola muestra: undefined, esto no corta la ejecuci贸n del programa.
Nota: Esto solo ocurre con la palabra reservada var, si utilizan let o const obtendr谩n un error: Cannot access 鈥榥ombre鈥 before initialization, y la ejecuci贸n del programa se vera interrumpida.

Espero les sirva.

Proyectar谩 o imprimi en la consola #miNombre 馃憤

En este link el profesor Le贸nidas Esteban, tambi茅n explica muy bien que es el Hoisting.

Yo quede m谩s loco

Creo que va a salir Diego

Hoisting: Cuando las Variables y funciones se declaran antes de la ejecuci贸n del c贸digo
Creo que para el ejercicio saldr谩 undefined, ya que est谩 imprimiento una variable que no declaro o bueno no ha tomado valor鈥reo

鈿 Evita el usar hoisting para evitar errores a futuro.

Explico Scope a mi manera de la clase pasada, y referencio el tema de la clase actual.

Con aprecio para la comunidad, y los nuevos.

7 de 16.

Saludos,

Antes de que corra el video: Pienso que a la hora de correr el codigo primero se van a buscar las funciones y luego se van a procesar donde se hayan declarado鈥 A ver si tengo razon.

se mostrara un undefined.
El Hoisting seria, solo declarar implicitamente las variables o funciones al inicio del contexto, pero no las inicializa. Todo esto se realiza en la compilacion.

Hoisting

Es cuando las variables y las funciones se declaran antes de que se procese cualquier tipo de c贸digo. El hoisting solo pasa con versiones de Ecmascript5 hac铆a abajo. De Ecmascript6 en adelante ya no sucede, porque el hoisting solo sucede con dos palabras clave 鈥淰ariable鈥 y 鈥淔unci贸n鈥. En las nuevas versiones presentaron 2 nuevas variables que son 鈥淐onst鈥 y 鈥淟et鈥.
Vamos a declarar la variable e inicializarla.

//Declarar
var miNombre; 
//Inicializar
miNombre ="Iris";

Si en el navegador hici茅ramos esto

console.log(miNombre)
var miNombre ="Iris";

Suceder铆a el hoisting, porque estamos mandando a llamar una variable, antes de declararla e inicializarla.

Me gust贸 esta explicaci贸n:

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

No entiendo para que la gente utilizaba hoisting antes es muy desordenado a mi parecer

En el caso de la funci贸n, el output es que la funci贸n si se va a ejecutar, pues lo que he aprendido en otros cursos es que siempre las funciones se leen primero ya que al leerlas se les reserva un espacio en memor铆a, despu茅s se vuelve al inicio y hay si se lee el resto del codigo, siempre en el orden de arriba hacia abajo, pero por buena pr谩ctica o me parece que se mira mejor, declarar e inicializar primero antes de llamar, tanto para variables como para funciones.

Buenas tardes profesor De Granda
Este es el resultado que arroja la inspecci贸n en la p谩gina de Google. Primero el nombre, y luego el undefined. 驴Por qu茅?

console.log(miNombre);
var miNombre = 鈥淟uis鈥;
VM3227:2 Luis
undefined

hey();

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

var miNombre = 鈥淎aron鈥;

Hola undefined
undefined

al estudiar este tema me ayude con el siguiente articulo.
https://www.freecodecamp.org/espanol/news/contexto-de-ejecucion-de-javascript-y-hoisting-explicados-con-ejemplos-de-codigo/

se los recomiendo y de paso tambi茅n indicarles que si desean ir aprendiendo en Platzi y practicar c贸digo en freecodecamp pueden hacerlo totalmente gratis, yo he entendido la mayor铆a con las dos plataformas, ya programo mucho mas por la practica y ejemplos que est谩n en esa pagina, no se van a arrepentir, ademas por que les indican el paso a paso y es solo digitar el c贸digo. ademas si terminan el curso completo les dan certificado y sirve para adjuntarlo con el de Platzi.
https://www.freecodecamp.org/

hola colegas , emocionado de estar aca , aun me cuesta entender varias cosas , pero con la motivacion intacta y enfocado siempre en aprender 鈥 saludos !!

En resumen:

  • Las funciones y las variables se ejecutan antes de todo el c贸digo pero las variables s贸lo se declaran y las funciones se ejecutan por completo antes que las variables al igual que los import, algo que no sucede con las clases.

Consejo:

  • Declarar las variables y las funciones lo m谩s arriba posible del c贸digo, para evitar errores.

Hola 馃憢, por aqu铆 les dejo un par de recursos que me ayudaron a entender mejor el Hoisting

馃搶 https://www.youtube.com/shorts/IgXgH6H52og

Profe Sacha Lyfszic 馃憞
馃搶 https://www.youtube.com/watch?v=uI6o97A4IrI

Gentleman Programming 馃憞
馃搶https://www.youtube.com/watch?v=clc_pSl5ifA&t=512s

El resultado ser谩 un error/undefined, porque para que una variable se pueda ejecutar, toca declararlas antes de ser ejecutadas, porque el scope va de local a global 馃槃 (gracias #PlatziDay)

Hoisting 鈮 Hosting

En resumen; el hoisting; son problemas de orden de ejecuci贸n. listo, a dormir!

I鈥檓 stronger, I鈥檓 smarter, I鈥檓 better, I am better! 馃懞馃槅

Despu茅s de ver la clase, leer documentaci贸n y ver otros videos finalmente entend铆!

a mi me salio el nombre en la consola.

Con este video entend铆 todo mucho mejor https://www.youtube.com/watch?v=EvfRXyKa_GI

Esta en Ingles

Hosting: Cuando las variables y funciones se declaran o procesan antes que se ejecute cualquier tipo de c贸digo.
El hosting solo sucede con las palabras variable y funci贸n, la nueva version de ECMAScript 6+ presentaron const y left, la cual te permite ya no generar un hosting.

El hosting es una cuando no declaramos e inicializamos nuestras variables al principio. Lo que provocara que se eleven nuestras variables al principio y se declaren ellas mismas con un valor undefined.

var miNombre; //Se declara la variable
miNombre = "Diego";  //Se inicializa la variable

//A veces se declara y se inicializa en ese momento
//var miNombre = "Diego";


console.log(miNombre); //El Console Log es una funcion que nos da    el navegador y esta funcion nos ayuda a imprimir los resultados de agunas funciones y nos ayuda ver en la consola ciertas cosas

var miNombre = "Diego";

//Si nosotros ejecutamos esto en el navegador, el resultado sera un Undefined que es un valor que agrega directamente el navegador.

//Lo que pasa aca es algo que se llama hoisting que pasa cuando primero mandamos llamar una variable antes de declararla e inicializarla.

//En este proceso JavaScript al ver que no esta declarada, la declara y al ver que no esta inicilizada, le agrega el valor de Undefined.


//Ahora, esto sucederia si declaramos primero la variable

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

//Aqui la consola arrojara la variable como indefinida y el nombre "Diego" al inicializar la variable

var miNombre = undefined;
console.log(miNombre + "Soy ese hoisting")

miNombre = "Diego"

//Aqui sucedera lo mismo que con el ejemplo anterior a diferencia que la consola arrojara undefined como parte de la variable Nombre y el string "soy ese hoisting"


//Tambien existe Hoisting en las funciones que como se comentaba, el Hoisting es cuando las variables y las funciones se declaran al inicio del codigo antes de que se ejecute cualquier linea


hey();

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

var miNombre = "Diego";

//Si se corre esta funcion en el navegador, 驴Que crees que va a pasar? Nos sale un error al mandar llamar un string sin el signo de +

//Al adicionar el + antes de la variable miNombre, el resultado que arrojara la consola sera "Hola undefined" y esto pasa porque las variables y funciones se procesan antes de ejecutar cualquier codigo y las funciones se declaran antes que las variables.
//Todas las funciones deben ser declaradas al inicio del codigo por buenas practicas

Este video puede ayudar mucho: : https://www.youtube.com/watch?v=uI6o97A4IrI

Hola aqui va mi resumen espero les sirva.

Mi resumen para esta clase:

  • Hoisting es diferente a Hosting.

  • Hoisting se refiere cuando declaramos funciones y variables, y luego las llamamos.

  • Aplica tanto a funciones como a Variables:

  • En var se aplica primero declarando var y luego llamandola. No funciona al rev茅s.

  • En function se puede llamar una funcion antes de ser declarada si y solo si las variables que esta utiliza estan declaradas al inicio del c貌digo.

Buenas pr谩cticas:

  • Declarar variables al inicio del codigo y declarar funciones al inicio del bloque de c贸digo.

Gente les comparto este link de you tube, para comprender. Excelente video luego de algunos que vi. https://www.youtube.com/watch?v=sv4-Lq495Qc

La documentaci贸n de Mozilla explica muy bien el hoisting a mi parecer. Adem谩s, permite entender c贸mo funciona por debajo en compilaci贸n:
https://developer.mozilla.org/es/docs/Glossary/Hoisting

Por ejemplo, se explica el funcionamiento en memoria:

鈥渦na estricta definici贸n de hoisting sugiere que las declaraciones de variables y funciones son f铆sicamente movidas al comienzo del c贸digo, pero esto no es lo que ocurre en realidad. Lo que sucede es que las declaraciones de variables y funciones son asignadas en memoria durante la fase de compilaci贸n, pero quedan exactamente en d贸nde las has escrito en el c贸digo.鈥

Hoisting

.

Hoisting en variables

El interprete de JavaScript reserva un lugar en memoria para las variables declaradas con var antes de que el c贸digo se ejecute, y esto causa que si se utiliza una variable antes de su declaraci贸n 茅sta tenga el valor undefinded. 脡ste fen贸meno se identifica como hoisting.
.

console.log(myVar); // undefined
var myVar = "Hello World!"

.
Las declaraciones hechas con let聽y聽const聽no presentan hoisting.
.
El hoisting suele ser explicado como si el int茅rprete separara la declaraci贸n y la inicializaci贸n de las variables y moviera las declaraciones al comienzo del c贸digo o al comienzo de una funci贸n (las variables var tienen scope de funci贸n). Esto tambi茅n permitir铆a que las variables pudieran ser utilizadas previo a asignarles un valor y tendr铆an 茅stas el valor undefined.
.

Hoisting en funciones

Las funciones declaradas con function tambi茅n presentan hoisting en JavaScript, pero a diferencia de como pasa con las variables, las funciones se guardan completas en memoria previo a la ejecuci贸n del c贸digo, por lo que es posible invocar a una funci贸n antes de declararla.

Creo que podr铆a resumir lo que significa Hoisting con la expresi贸n: 鈥淣o puedes obtener agua si antes no abres el grifo鈥, no se puedo usar una variable sin antes haberla inicializarla declararla.

Que es el hoisting?
JavaScript Hoisting se refiere al proceso mediante el cual el int茅rprete asigna memoria para declaraciones de funci贸nes y variable antes de la ejecuci贸n del c贸digo.

piensado como un compilador de variables y funciones antes de la ejecucion del codigo.

Resumen:

  • Es cuando las variables y funciones son declaradas, independientemente de su posici贸n, antes del procesamiento del c贸digo.

  • Sin embargo la inicializaci贸n de las variables no sucede antes del procesamiento, por lo cual el valor de las variables ser谩 undefined hasta llegar a la parte del c贸digo donde son inicializadas.

  • Esto sucede sobre las palabras claves var y function.

  • Esto no sucede sobre las palabras clave const y let ( Agregadas en ES6)

  • Como buena pr谩ctica las funciones siempre se escriben las funciones al inicio.

Tenemos hoisting en las variables y hoisting en las funciones. Las funciones se declaran antes que las variables. Pero las variables a fuerza se deben declarar desde el principio, sino nos va a marcar error.

Apuntes completos en Notion

Excelente!

Hola @degranda no vi en la parte de enlances la lectura acerca de hosting, saludos!

Esta informaci贸n podr铆a complementar lo explicado en el v铆deo por si quieren ver otros ejemplos https://developer.mozilla.org/es/docs/Glossary/Hoisting

Dar谩 error, porque a煤n no se ha declarado ni inicializado la variable miNombre

Dejo un video del gran Sacha Lifszyc donde explica muy bien este tema:

驴QU脡 ES EL HOISTING en JAVASCRIPT? | JS en ESPA脩OL

por si a alguien le queda alguna duda lea este post, espero le sirva igual que a mi o mas https://www.jasoft.org/Blog/post/Elevacion-de-variables-(hoisting)-en-JavaScript.aspx

Por cierto, como mi pc tenia mala la fecha y hora, ya envi茅 el comentario de mis respuestas pero parece que estoy en el futuro. 馃ぃ馃槑

Solo es para agregarle humor al curso

9:57 ERROR鈥 aun no concatenas el 鈥渉ola鈥 con la variable

Perd铆 la cuenta de las veces que tuve que regresar y repasar los ejemplos y las definiciones de este v铆deo hasta que me quedara completamente claro. 隆Excelente clase!

Undefined.

no podria ejecutarse, saldria 鈥渦ndefined鈥

jejjeje super entendido.

鈥淟as funciones se declaran antes que las variables鈥

undefine

  • El hoisting solo sucede con dos palabras clave: var y function.

HOISTING
Es cuando las variables o funciones de declaran antes de cualquier tipo de c贸digo
Antes de versi贸n 5 eran para var y function
De 6 en adelante ya no const y let ya no tienen hoisting
HOISTING CON VARIABLES
Cuando se llama una variable antes de iniciar la variable飪 muestra undefined
El compilador hacer lo siguiente: define la variable con un valor inicial igual a undefined.
Buenas practicas 飪 Declarar variables al inicio del c贸digo

HOISTING CON FUNCIONES
Buenas practicas 飪燭odas las funciones deben estar al inicio del c贸digo
Las funciones se declaran antes que las variables

Dejo esta documentaci贸n de JS para el que este interesado en llevar todo en profundidad https://developer.mozilla.org/es/docs/Web/JavaScript/Guide

va a salir error! por no concatenar el hola y la variable de miNombre

todo claro 馃槂

Esta bueno el articulo del enlace para poder complementar lo que se ense帽a en la clase.

Hosting!!!

Debemos quedarnos con varios conceptos:

*Las funciones siempre se mueven arriba del scope. Por lo tanto, podemos elegir donde declararlas y usarlas.

*La declaraci贸n de las variables se mueven arriba del scope, pero no la asignaci贸n. Antes de usar una variable, habr谩 que crearla y asignarla.

*Para buenas pr谩cticas de desarrollo, declaramos las funciones al iniciar el c贸digo y solo se llaman al tener los valores que se usar谩n.

Si vienen de la clase de Responsive Design con Leonidas y realizaron la instalacion de Node.js pueden usar la terminal de VS code para realizar las pruebas para hacerlo van a la parte superior encontraran una opcion que dice Terminal > nueva Terminal. Una vez le den click van a tener algo como esto. Pueden ejecutar el archivo JS usando el comando node como esta en la imagen.

estoy pensando que escogi la actualizacion equivocada, habla de ES5 y 6 y van en la 10 NO SE

Entonces como buenas pr谩cticas hay que declarar las variables y funciones hasta la parte de arriba de nuestro c贸digo para evitar este tipo de Hoisting

Resultado
#1: Diego

Resultado:
#2: Hola diego (si la concatena)

Creo que va a fallar porque falta el signo + despues de "Hola "

Hoisting: Cuando las variables y las funciones son llamadas antes de ser declaradas.