Hoisting

Clase 12 de 24 • Curso de Clean Code y Buenas Prácticas con JavaScript

Carina Payleman

student•

Lo dije un par de clases atrás, pero vuelvo a recomendar también el curso de Closures y Scope en JS porque explica todo este módulo de scopes y hoisting claro y en profundidad: https://platzi.com/cursos/javascript-closures-scope/

Alex Camacho

teacher•

Excelente recomendación, si tienen oportunidad de tomar el curso que recomienda Carina tomenlo 🙌🏻

Wladimir Rocha

student•

Es buenisimo, nos ayuda a entender un poco mejor eso y a manejar de mejor forma los closures que en algunos casos nos podría ayudar

Diego Mario Maldini Freyre

student•

Conocer todas estas cuestiones de scope es esencial, pero me parece que las mismas no tienen nada que ver con el curso actual. Para aprenderlas hay otros cursos, de hecho, cursos específicos.

Hay tanto para decir de Clean Code, que ocupar tiempo en cuestiones aledañas o tangenciales me parece desafortunado.

Irving Juárez

student•

Las buenas prácticas que puedes tomar de esta clase es que uses ES6 en tu código (ósea, no uses var)

N40 M10

student•

Si este curso se adentrara en contenido mas avanzados y organizara de otra forma las clases perfectamente seria el remplazo para el curso de JS profesional, en otras palabras es mi manera de decir que este curso esta realmente bien realizado.

Jose Gabriel Argüello

student•

Hoisting

var greet = "Hello";

function saludar() {
  console.log(greet); //> undefined
  var greet = "Hi";
  console.log(greet); //> Hi
}

saludar(); // se invoca la función

la variable local greet se declara en la parte superior de la función saludar(), antes de que se imprima la variable global greet. Sin embargo, en el momento en que se imprime la variable local greet, aún no se le ha asignado un valor y, por lo tanto, su valor es undefined. JavaScript, cada vez que se define una variable dentro de una función, se crea una nueva instancia de esa variable en un ámbito local dentro de la función. Es decir, la variable local greet dentro de la función saludar() se refiere a una instancia diferente de la variable greet que la variable global greet que está definida fuera de la función, es otro espacio de memoria.

Maday Choque

student•

De las 3 formas de declarar variables (let, const, var) sólo var tiene hoisting
hoisting sólo se aplica a la declaración de la variable no a la asignación

Jose Ever Muñoz Muñoz

student•

muchisimas gracias por tu aclaracion estaba reconfundido

Ana Rotela Cabrera

student•

Mis apuntes de la clase

Santiago Andres Alvarez Cuadros

student•

Es importante recalcar que las variables declaradas con var, a pesar de que no tienen scope de bloque, sí tienen scope de función. Por ende:

// scope de bloque:
console.log(age) // undefined
{
  console.log(age) // undefined
  var age = 28
}

console.log(age) // 28

// scope de función
function greet() {
  console.log(greeting) // undefined
  var greeting = 'Hi'
  console.log(greeting) // Hi
}

console.log(greeting) // ReferenceError: greeting is not defined

Como greeting está declarada dentro de una función, se le aplicará hoisting en el ámbito léxico de la función. Mientras que age, como está declarada dentro de un bloque, se le aplicará hoisting de forma global.

Ariel Ezequiel Biazzo Genua

student•

Una buena practica es declarar todas las variables en la parte inicial del ambito en la que esten ? O puedo declararlas donde yo desee para asi poder visualizarlas a medida que trabajo con estas?

Joel aravena villegas

student•

Pero que sucede con eso de que "var greet=" Hello"" es global ?

Reinaldo Mendoza

student•

La función es autoejecutable + hoisting, primero js inicializa greet y la funcion, pero aun no esta cargado el "Hello"

Jose Gabriel Argüello

student•

cada vez que se define una variable dentro de una función, se crea una nueva instancia de esa variable en un ámbito local dentro de la función. Es decir, la variable local greet dentro de la función saludar() se refiere a una instancia diferente de la variable greet que la variable global greet que está definida fuera de la función, es otro espacio de memoria.

David Elias Gatica Morales

student•

undefined

Victor R Vele

student•

var greet = "Hello";

(() => {

console.log(greet); // Imprimirá "Hello"

greet = "Hi"; // Cambia el valor de greet en el ámbito global

console.log(greet); // Imprimirá "Hi"

})();

VM12050:4 Hello

VM12050:7 Hi

Miguel Enrique Velásquez Millán

student•

Todo lo que comenta la Profesora Alejandra Camacho con respecto a las variables y su hoisting solo se aplica a las variables creadas con "var".

Con las variables creadas con "let" y "const" no sucede ese tipo de comportamientos raros y directamente saltan errores si intentamos acceder al valor de dichas variables antes de su declaración.

En resumen: No usen var, amiguitos, usen let y const ✨.

Natalia Vera Duran

student•

Esto no pasa en python

Daniel Ochoa

student•

Siento que a veces da las ideas correctas pero no las enmarca, por ejemplo explico super el hoist, pero no explico que era lo que estaba sucediendo en las funciones autoinvocadas y así con varios conceptos en las clases anteriores hahaha, es como que se le va el hilo, pero igual esta bien el ejemplo.

Jose Ever Muñoz Muñoz

student•

var si tiene ambito dentro de las funciones

var siempre pertenece al ámbito global, pero hay una excepción y esa es si se ejecuta dentro de una función.

Ejemplo 1

(function(){
    var greet = 'hello';
    console.log(greet);//>hello
  }
)();
console.log(greet);//>Error: greet is no defined
console.log('el programa NO continua');//no se ejecuta

Como vemos al usar *var* dentro de una función, la variable se quedara en el ámbito local de esa función y no saldrá de allí.

Ejemplo 2

var greet = 'hello global';
(
  function(){
    var greet = 'hello local';
    console.log(greet);//>hello local
  }
)();
console.log(greet);//>hello global


```En este ejemplo vemos que la variable \*greet\* de afuera de la funcion es una variable totalmente diferente a la variable \*greet\* de dentro de la función.

Desde afuera no se sabe la existencia de la \*var greet\* de dentro de la función y desde la función no se sabe de la existencia de la \*var greet\* de afuera.

**Ejemplo 3**

Esto solo sucede con funciones y no funciona en casos como por ejemplo un condicional if, un bloque \*{}\*, un for, un while, etc.

```js
if(true){
  var greet = 'hello';
  console.log(greet);//>hello
}
console.log(greet);//>hello

Diego Martínez VIlla

student•

var greet = "Hello";

function saludar() {
  console.log(greet); //> Hello
  var greet = "Hi";
  console.log(greet); //> Hi
}

saludar(); // se invoca la función

Este es el ejemplo si la función no fuera auto invocada.

En este ejemplo los valores impresos son:

Hello
Hi

Es importante entender como se ejecuta nuestro código para saber el porque de los comportamientos.

Mauricio J Carrillo

student•

Independientemente si la función es autoinvocada o no. En el primer console.log también te dará como resultado undefined. Es precisamente porque ambas variables tienen un ámbito diferente y por lo tanto un contexto o instancia diferente.

Al probarlo con la extensión de Run Code, me confirmó esta observación.

Maday Choque

student•

let age = 28

{    
    console.log('valor dentro del bloque', age);
    let age = 29;
}

console.log('valor fuera del bloque', age)

age = age*2
console.log('valor cambiado', age)

Alan Vega

student•

Es importante tomar en cuenta que en este escenario imprime undifined porque se está declarando una variable con el mismo nombre que la variable global, y esta variable declarada dentro de la función solo es accesible a nivel función, que sería lo equivalente a esto:

var greet = "Hello";

function saludar() {
	var greet;
  console.log(greet); //> undefined
  var greet = "Hi";
  console.log(greet); //> Hi
}
saludar();

Pero si no es asi, si imprime el valor de la variable global:

var greet = "Hello";

function saludar() {
  console.log(greet); //> Hello
}
saludar();

Ricardo Andrey Cifuentes Martínez

student•

Buenas prácticas para usar hoisting

No utilizar var en las declaraciones de variables.
Escribir primero las funciones y luego su invocación.

Milagros Fortis

student•

El primer console.log va a dar 'Hello' y el segundo 'Hi'