Contenido del curso
Nombre y uso de las variables
Ámbito de las variables
Funciones
Clases
Optimizaciones
Cierre
Hoisting
Carina Payleman
Estudiante
Alex Camacho
Profesor
Wladimir Rocha
EstudianteContenido del curso
Hoisting
Carina Payleman
EstudianteAlex Camacho
ProfesorWladimir Rocha
Estudiante
Diego Mario Maldini Freyre
Estudiante
Irving Juárez
Estudiante
N40 M10
Estudiante
Jose Gabriel Argüello
Estudiante
Maday Choque
Estudiante
Jose Ever Muñoz Muñoz
Estudiante
Miguel Enrique Velásquez Millán
Estudiante
Ana Rotela Cabrera
Estudiante
Santiago Andres Alvarez Cuadros
Estudiante
Ariel Ezequiel Biazzo Genua
Estudiante
Joel aravena villegas
Estudiante
Reinaldo Mendoza
EstudianteJose Gabriel Argüello
Estudiante
David Elias Gatica Morales
Estudiante
Victor R Vele
Estudiante
Natalia Vera Duran
Estudiante
Daniel Ochoa
EstudianteJose Ever Muñoz Muñoz
Estudiante
Diego Martínez VIlla
Estudiante
Mauricio J Carrillo
EstudianteMaday Choque
Estudiante
Alan Vega
Estudiante
Ricardo Andrey Cifuentes Martínez
Estudiante
Milagros Fortis
EstudianteLo 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/
Excelente recomendación, si tienen oportunidad de tomar el curso que recomienda Carina tomenlo 🙌🏻
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
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.
Las buenas prácticas que puedes tomar de esta clase es que uses ES6 en tu código (ósea, no uses var)
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.
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.
muchisimas gracias por tu aclaracion estaba reconfundido
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 ✨.
Mis apuntes de la clase
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.
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?
Pero que sucede con eso de que "var greet=" Hello"" es global ?
La función es autoejecutable + hoisting, primero js inicializa greet y la funcion, pero aun no esta cargado el "Hello"
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.
undefined
Hi
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
Esto no pasa en python
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.
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
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:
Es importante entender como se ejecuta nuestro código para saber el porque de los comportamientos.
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.
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)
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();
Buenas prácticas para usar hoisting
No utilizar var en las declaraciones de variables.
Escribir primero las funciones y luego su invocación.
El primer console.log va a dar 'Hello' y el segundo 'Hi'