¿QUÉ ES EL HOISTING en JAVASCRIPT? | JS en ESPAÑOL

En Javascript las cosas se interpretan antes de ser ejecutadas, esto da espacio al hoisting, que antepone algunas lineas de codigo en el code flow

El hoisting afecta a:
- var declaraciones_only //let y const no
- function hoisting_completo
- import importaciones from './solo_en_scope_global'
- las clases no les afecta el hoisting

<aside> 🛵

Cada vez que se ejecuta una funcion se crea un contexto de ejecucion, que tiene dos fases: Fase de creacion y fase de ejecucion

• Fase de creación:

  • Se establece el valor de this dentro del scope
  • Se crea un espacio de memoria para arguments de manera de array { 0: value }
  • Los valores de los arguments se guardan en nuevas variables para poderlas usar dentro de la funcion
  • Se toma el espacio de las variables declaradas dentro de la funcion y se les da el valor de undefined

• Fase de ejecución:

  • Comienza a funcionar el motor de JS y comienza a correr linea por linea
  • Podriamos antes de todo hacer un console.log de las variables declaradas y recibiriamos un undefined

</aside>

// Con el hoisting un codigo de una funcion escrita asi...
console.log(nombre)
var nombre = 'usuario'

// se interpretaria de la siguiente manera...
var nombre // 🎈
console.log(nombre) // undefined
nombre = 'usuario'

// las declaraciones de variables se elevan hasta el inicio del scope

// Con el hoisting un codigo de una funcion escrita asi...
function filtrarProductosConSuperOfera(productos) {
	var productosConSuperOferta = []
	for (var i = 0; i < productos.length; i++) {
		var producto = productos[i]
		if (producto.tieneDescuento) {
			var descuento = producto.descuento
			if (descuento > 24) {
				productosConSuperoferta.push(producto)
			}
		}
	}
return productosConSuperOferta
}

// primero se interpretaria de esta manera...
function filtrarProductosConSuperOfera(productos) {
	var productosConSuperOferta // 🎈
	var i  // 🎈
	var producto  // 🎈
	var descuento // 🎈

	productosConSuperOferta = []
	for (i = 0; i < productos.length; i++) {
		producto = productos[i]
		if (producto.tieneDescuento) {
			descuento = producto.descuento
			if (descuento > 24) {
				productosConSuperoferta.push(producto)
			}
		}
	}
	// por ello aqui podemos hacer un console.log de cualquiera de esas variables
	return productosConSuperOferta
}

// Con el hoisting un codigo de una funcion escrita asi...
saludar('adrian')
function saludar(nombre) {
  console.log('hola '+ nombre)
}

// se interpretaria de la siguiente manera...
function saludar(nombre) { // 🎈
  console.log('hola '+ nombre)// 🎈
}// 🎈
saludar('adrian')

// pero si declaramos la funcion como una variable se guardará solo la variable
//por lo que si escribimos esto
saludar('adrian') // si funcionará
var saludar = function saludar(nombre) {
  console.log('hola '+ nombre)
}

// se interpretara esto
var saludar // 🎈
saludar('adrian') //sintax error
function saludar(nombre) {
  console.log('hola '+ nombre)
}

//lo que pasa aqui es que al interpretar el codigo, 
//js pone por completo las funciones en memoria

Las clases si debemos declararlas antes de usarlas por que el hoisiting no funciona en ellas de una manera conveniente

Los imports tambien les afecta el hoisting de manera que se anteponen en la interpretacion