Si abres la consola del navegador, con la combinación de teclas Ctrl + Shift + I o clic derecho e "Inspeccionar" en tu navegador preferido (de preferencia Google Chrome).
Ejecuta la palabra window, se desplegará un objeto en el que se encuentran todas las funcionalidades de JavaScript, por ejemplo ejecuta window.console.log("Hola") tendrá el mismo comportamiento que console.log("Hola").
Si ejecutas this observarás que muestra el mismo objeto que window, esto es porque en un contexto global, estos dos objetos son iguales. Pero en otros contextos, como el de una función o una clase, this cambia.
Qué es hoisting
Hoisting es un término para describir que las declaraciones de variables y funciones son movidas 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 que intenta ayudar a optimizar el código, pero en este caso provoca errores y resultados no esperados. En el caso de las variables solo sucede cuando son declaradas con var.
Hoisting en variables declaradas con var
En el siguiente código, la respuesta del console.log es undefined, porque al hacer referencia a una variable que no está declarada, el motor de JavaScript crea esta variable antes de la declaración y le asigna un valor de undefined.
console.log(nombre) // undefined var nombre = "Andres"
var nombre = undefined console.log(nombre) nombre = "Andres"
Lo adecuado es evitar utilizar var para declarar las variables con let o const, ya que estas últimas el proceso de optimización que realiza el motor de JavaScript no generará variables con el valor de undefined antes de su declaración.
Contribución creada por Andrés Guano.
Carlos Eduardo Diaz Polanco
Una preguntica de examen Una estricta definición de hoisting sugiere que las declaraciones de variables y funciones son físicamente movidas al comienzo del código,asignandolas en memoria dentro de un contexto de ejecucion.
Andres Gallego
Lo tendré muy en cuenta, todavía no llego hasta allá
Andrés Felipe Lopez gomez
Muchas gracias
Yadiel Vélez
Junior Usca Huacasi
Me encanto la explicación, de una recorde todo :)
Efraín Hernández García
Este aporte esta súper completo en todos los sentidos.
Iván Darío Sánchez Jiménez
Hoisting
Gabriel De Andrade
En estas clases se explica también cómo funciona el Hoisting a nivel de lenguaje: Hoisting, ¿Qué es el Hoisting? :D
José Gregorio Block
Company_admin#Gracias
Eliseo Ávila
Damián Valenzuela Negrete
Muy claro y completo, Excelente aporte!
Alejandro Pérez Gómez
Gracias por el aporte, me quedo mucho mas claro el hoisting!
Renato Maximiliano Rivera Abad
let y const importantes para evitar el hoisting !
Alex hernandez mitre
por?
Ricardo Alfonso Chavez Vilcapoma
Estimado Alex, por lo que hizo el prof en clase, que con ellos aunque te equivoques en llamar a una variable antes de ser declarada, el hoisting ya no se aplique en ellas y así se evita problemas en el proceso de lo que quieres hacer con tu código de JavaScript
Filiberto Santillán
This en diferentes situaciones y su comportamiento . https://filisantillan.com/this-en-diferentes-situaciones-y-su-comportamiento/
Ricardo Alfonso Chavez Vilcapoma
Grande aporte amigo...gracias.
Wilson Fernando Antury Torres
Como buena práctica está bien evitar el hoisting. Primero declarar las funciones y variables, antes de usarlas.
Ramdhei López Arcila
Zona muerta temporal Es el lugar donde se guardan las variables declaradas con let y const, cuya función es impedir el acceso a ellas antes de ser inicializadas. Por eso es mejor usar let y const por sobre var
Rafael Muñoz Pérez
A manera de resumen para evitar el hoisting es necesario:
Cristhian Daza
El Hoisting no aplica a let y const. Por eso es recomendado no usar var.
Tampoco a la funciones expresivas: const myFunc = function() {}
Efrain Montealegre Raga
Puntual y claro. Gracias por esto!
Miguel Angel Lozano Alvarez
Jhaider Jordan
espero que le ayude esto
Alejandro Sebastian Dubon Estrada
¿El hoisting es exclusivo de JavaScript, existe algun otro lenguaje de programacion que aplique hoisting?
Juan Jiménez
En Python sucede algo similar al hoisting de JavaScript. Desconozco si hay algún otro lenguaje donde se aplique hoisting.
Yosef Enmanuel Blandin Rios
El hoisting aparece tambien en VBScript - Rhinoscript, GO y Ruby
Armando García
Siempre es buena idea recurrir al video que, desde mi punto de vista, explica de mejor forma lo que es el hoisting.
Roger Carlos Ariel Alba
Hola Armando
Y los videos de Sacha son muy buenos.
Saludos
Edgar López Laynez
Comparto los apuntes que he hecho, espero les sea de ayuda para entender estos temas.
Cristian Leonardo Acero Mancipe
Parser => Significa analizar y convertir un programa a un formato interno que un entorno de ejecución pueda ejecutar, por ejemplo, el motor JavaScript dentro de los navegadores.
Parcero => Significa Amigo en Colombia.
Juan Esteban Galvis
Curso de ECMAscript 6+ donde se explica lo de var, let o const: https://platzi.com/clases/ecmascript-6/
Además el curso de fundamentos de JavaScript que toca y aplica también el tema en el modulo ** Complementos**
Sebastian Medina
el valor de this no es siempre windows todo depende del contexto
var o = { f: function() { return this == window } };
console.log(o.f()); // FALSE
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/this
Erik Elyager
Así es, sólo va a ser window cuando estamos en el contexto global dentro del navegador.
Lo que escribes:
console.log(nombre); apellido(); var nombre = "Diego"; function apellido(){ console.log("De Grada"); }
Como el motor de JavaScript lo interpreta:
var nombre = undefined; function apellido(){ console.log("De Grada"); } console.log(nombre); apellido(); nombre = "Diego";
Si te preguntas cuál pone más arriba, ¿Las variables o las funciones? La respuesta es las variables. Probemos esto:
var nombre; function nombre(){} typeof nombre; // Output: "function"
¿Y si ponemos primero la función y luego la variable?
function nombre(){} var nombre; typeof nombre; // Output: "function"
Pero, si declaras una variable y le asignas un valor en la misma linea el resultado es diferente:
var nombre = "Platzi"; function nombre(){} typeof nombre; // Output: "string"
Esto es porque JavaScript hace hoisting solo de la declaración de la variable. JavaScript trata la declaración y asignación en una sola linea como dos pasos, por lo que si escribimos:
var nombre = "Platzi";
El motor lo interpreta así:
var nombre = undefined; nombre = "Plazi";
Así que cuando escribimos:
var nombre = "Platzi"; function nombre(){} typeof nombre; // Output: "string"
Como lo interpreta el motor de JavaScript es así:
var nombre = undefined; function nombre(){} nombre = "Platzi"; typeof nombre; // Output: "string"
Es decir que "se deja atrás" la asignación. Obviamente ningún desarrollador debería de escribir código así de confuso, esto es solo para saber como funciona JavaScript y su engine, ese conocimiento te hace un mejor desarrollador y te destaca de entre otros.
Cuando el motor JS obtiene nuestro script, lo primero que hace es configurar la memoria para los datos de nuestro código. No se ejecuta ningún código en este punto, simplemente está preparando todo para su ejecución. La forma en que se almacenan las declaraciones de función y las variables es diferente. . Las funciones se almacenan con una referencia a la función completa:
Dado que las funciones se almacenan con una referencia a todo el código de la función, podemos invocarlas incluso antes de la línea en la que las creamos:
– Las funciones y variables se almacenan en la memoria para un contexto de ejecución antes de ejecutar nuestro código. A esto se le llama Hoisting . – Las funciones se almacenan con una referencia a la función completa, las variables con la palabra clave var con el valor de undefined y las variables con la palabra clave let y const se almacenan sin inicializar.
El hoisting es un poseso de compilador de JS que consiste en que la declaración de las variables y las funciones son llevadas a l inicio del código sin importas sus propiedades, para su procesamiento sin embargo, la inicialización de las variables no es llevada al inicio del código para su compilación, si no solo su declaración, lo suele dar espacios a errores cuando se declara una variable sin inicializarla y se procesa en el código antes de haber llegado a sus inicialización lo cual nos suele dar una variable con calor undefined, ya que la variables si fue almacenada en la memoria, pero no se asigno un valor asta después de la ejecución ejemplo :
saludo() function saludo() { console.log("Hola" + nombre) } var nombre = "Miguel"
El resultado sera
Holaundefined
En base a este ejemplo fue porque se cometió el error de usar la variable antes de inicializar pues sin problema el compilador le asigna memoria pero no el valor asta después. Le asigna memoria a la variable y le da valor de undefined a suceder la asignación de memoria.
var nombre = undefined; function saludo(){ console.log("Hola" + nombre); } saludo()
Aqui como hemos visto que la variable como undefined y posterior mente se utiliza al llegar a l alinea del saludo() Pero si declaro si hago este siguiente codigo me va a regresar el nombre que le puse a la variable, le puse comillas para separar el hola y el nombre
var nombre = undefined; function saludo(){ console.log("Hola" + " " + nombre); } var nombre = "Miguel"; saludo()
el resultado seria Hola Miguel La forma de hacer que corrercta de hacerlo es esta
var nombre = "Miguel"; function saludo (){ console.log("Hola" + " " + nombre) } saludo()
