Iluminando la secuencia de colores

Clase 43 de 55 • Fundamentos de JavaScript 2018

Resumen

En esta clase se observa la diferencia entre el uso de let y var para la declaración de variables y cómo esta diferencia afecta el alcance de la variable dentro de un ciclo for. Se recomienda siempre el uso de let cuando se trata de estructuras for, ya que al usar var, el valor de dicha variable se va a remplazar cada vez con la última asignación que se haga, mientras que con let, conservará su valor dentro de cada iteración.
Siempre que sea posible debemos usar const sobre let, y let sobre var.

Dagoberto Trujillo Montilla

student•

Estuvo pensandolo por un tiempo y después me di cuenta… El problema de var y let es la asincronicidad en su máxima expresión!
El setTimeout solo se ejecuta cuando se haya terminado de ejecutar el código principal. Entonces, estamos poniendo en la pila de tareas 7 veces la funncion () => this.iluminarColor(color), pero solo cuando ya haya terminado el ciclo for entero. Entonces cada uno de esas llamadas se fijará… Cual es el valor de la variable color? Y al terminar el ciclo, digamos que fue verde el ultimo color. Todas las llamadas van a usar el color verde porque solo se guardo ese!

si nosotros tenemos un ciclo for:

    for(var i = 0; i < this.nivel; i++){
      var num = i;
      setTimeout(() => console.log(num), 1000 * i)
    }

la pila de tareas se va a ver así finalizado el código principal:

1: console.log(num). cuanto vale num? 9
2: console.log(num). cuanto vale num? 9
3: console.log(num). cuanto vale num? 9
4: console.log(num). cuanto vale num? 9
5: console.log(num). cuanto vale num? 9
6: console.log(num). cuanto vale num? 9
7: console.log(num). cuanto vale num? 9

Porque 9? porque el ciclo for ya finalizo, y var num quedo con ese valor, porque es global.

Dagoberto Trujillo Montilla

student•

en el caso que this.nivel sea 10

Isaias Chávez

student•

Ahhhhhhhhh ya entedí. Lo que no entiendo es porqué tu comentario no está hasta arriba :D

Jose Anibal Garcia Giraldo

student•

No se si fui el único pero estuvo un poco enredado el tener un método detrás de otro y así, para ello cree un tipo de diagrama de flujo donde me fui lentamente paso a paso analizando cada parte, aquí les comparto mi diagrama si alguno se quiere apoyar de el para entender mejor :D

https://app.lucidchart.com/invitations/accept/b0a43763-0a99-4732-9b02-94561eff9cd0

José Ángel Gutiérrez Ramos

student•

Excelente aporte! Me ayudo bastante a entender mejor +10.

Oscar José García Suárez

student•

Tu aporte es fenomenal. Es posible entender fácilmente todo esto, por lo menos para los que todavía no tenemos la experiencia. Muchas gracias.

Javier Romero

student•

supongo que muchos están así ahorita mismo jajajajaj :v

Francisco Sarria

student•

no se bien cual es la parte que no entendiste pero supongo que es probable que la parte de var let y cosnt en el ciclo for pueda ser una. si sabes inglés, esta es una explicación con muy buenas metáforas: https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8

Javier Romero

student•

lo que no entendí es todo con respecto al juego de sacha, me parece muy complicado de realizar, a eso me refiero con el meme que publique.

Para poder practicar mejor todo lo que aprendí de este curso tendría que crear mi propio juego con mi misma lógica para ver en que estoy fallando y es la única manera, yo por ejemplo ya se que es una variable y una función también conozco los arrow function que son una maravilla y del resto super bien por que fue lo básico.

pero lo que se me dificulta mas es el poder asimilar la lógica de sacha en ese juego por eso no entendí nada de nada.

Carlos Junior Guzman Rodriguez

student•

script de la clase de hoy

const celeste = document.getElementById('celeste')
const violeta = document.getElementById('violeta')
const naranja = document.getElementById('naranja')
const verde = document.getElementById('verde')
const btnEmpezar=document.getElementById('btnEmpezar')

class Juego{
    constructor(){
        this.inicializar()
        this.generarSecuencia()
        this.siguienteNivel()
    } 
    
    inicializar(){     
        btnEmpezar.classList.add('hide')
        this.nivel = 1 
        this.colores = {
            celeste, 
            violeta,
            naranja,
            verde
        }    
    }  

    generarSecuencia(){
        this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random()*4))
    }

    siguienteNivel(){
        this.iluminarSecuencia()
    }

    transformarNumeroAColor(numero){
        switch (numero){
            case 0: 
                return 'celeste'
            case 1:
                return 'violeta'
            case 2:
                return 'naranja'
            case 3:
                return 'verde'
        }
    }

    iluminarSecuencia(){ // let mantiene la variable a diferencia de var que siempre pisa la misma variable, usar siempre conts antes que let y usar siepre let antes de var.
        for (let i = 0; i < this.nivel; i++){
            const color = this.transformarNumeroAColor(this.secuencia[i]) 
            setTimeout(() => this.iluminarColor(color), 1000*i)
        }
    }

    iluminarColor(color){
        this.colores[color].classList.add('light')
        setTimeout(() => this.apagarColor(color), 350)
    }

    apagarColor(color){
        this.colores[color].classList.remove('light')
    }
}    

function empezarJuego(){    
    window.juego = new Juego()
}

Fernando Cordero

student•

Gracias por el codigo!!!

Carlos Barrera Cerón

student•

Tuve un problema con el código y no identificaba que era, con esta copia me di cuenta que después de la función "inicializar" tenia el resto de código por fuera de "class Juego" y por eso no se ejecutaba

Carlos Rodríguez Huerta

student•

Para entender mucho mejor el bug, se deben añadir los dos console.log.

iluminarSecuencia() {
     for (let i = 0; i < this.nivel; i++) {

         var color = this.transformarNumeroAColor(this.secuencia[i])
         console.log(color)

         setTimeout(() => {

           console.log(color)
           this.iluminarColor(color)

         }, 1000 * i)
     }
 }

Verificar el resultado y recordar que primero se terminará el ciclo; luego los setTimeout.
Recordar la clase de asincronismo.

Victor Andres Castillo Zambrano

student•

gracias

Carlos Eduardo Diaz Polanco

student•

Vamos muy bien! de verdad confieso que por mi nivel, se me hace imposible preever como se hace el juego, imagino que eso vendra con el tiempo... asi que seguire avanzando!

Ronal Aguirre

student•

La verdad si, depronto uno se abruma con tanta información pero la verdad es que eso solo se logra con la practica "Aprender duele" Freddy Vega

Mayra Yelitza Navas Carrascal

student•

Pensé que era la única persona, pero veo que muchos están igual que yo, pensando en qué momento con toda esa información lograré programar así de bien como él. Espero que con la práctica y tiempo todo sea más fácil.

Andres Felipe Giraldo

student•

No entiendo nada pero estoy haciendo todo como lo están haciendo en el video y me funciona. Algún dia lo entenderé

Luis Palomo

student•

Es el sentimiento de la mayoría

Juan Pedraza

student•

Lo malo de esta clase, es que da por entendido muchas cosas de javascript, como por ejemplo interactuar con elementos html, que debió ser parte del curso básico de javascript o de este de fundamentos. Sin embago, la idea es que entendamos las clases, promesas, callbacks, y funciones en general que es lo que importa en js

Dulce Flores Conde

student•

Estoy totalmente segura de que si intento hacer este juego por m cuenta, desde 0, solo lograré llegar hasta definición de las variables :cry: Obviamente se que con práctica y el tiempo iré mejorando, pero por ahora, me siento abrumada con tanta información. Emocionada, pero abrumada :la

Cesar Gonzalez Groh

student•

Hola yo estoy igual. Creo que hay que desarrollar algo personal para poner en práctica Ir aprendiendo cosas nuevas pero ir aplicándolas para fijar los conocimiento. Espero que cuando esté en la práctica al menos recuerde a que clase recurrir cuando no me acuerde de nada 😂 Exitos!

Diva Andrea Ulloa Acero

student•

Bernardo Aguayo Ortega

student•

gracias, que rifado

Gino Ureta

student•

Genial, siempre estos graficos ayudan a captar mas rapido

Luis Xavier Perez Miramontes

student•

Hola compañeros! Para poder comprender de mejor manera lo que ocurre dentro del ciclo for trataré de explicarlo como yo lo comprendí, espero me puedan entender y si me equivoco en algo, por favor corríjanme.

Primero, vamos a poner un ejemplo como el siguiente:

for (var i = 0; i < 10; i++){
    setTimeout( () => console.log(i), 1000*i)
    console.log(i)
}

Si ejecutamos el código anterior en la consola saldrá lo siguiente: 0 1 2 3 4 5 6 7 8 9 (10) 10 -------> Sale como resultado 10 veces el 10. . Como sabemos, la función "setTimeout" es una función que se puede ejecutar asíncronamente, por lo que JavaScript delegará esa función al navegador diciéndole "Ejecuta esta función con una variable i en tantos segundos". Entonces el navegador recibe la función y queda como registrada que la variable i será el argumento de esa función y los segundos en que se ejecutará ya están definidos. Esto ocurre en cada iteración del for. Es decir, ocurre que JS delega esta tarea 10 veces al navegador.

Debemos tomar en cuenta que cada iteración del bucle for es como si fuera un bloque de código nuevo. Entonces, debido a las características de las variables "var", en cada ciclo la variable i se sobrescribirá (o se "pisa" como dice sacha). . Entonces, al llegar el último ciclo, el valor de "i" es 10. Y es en este momento cuando JS terminó de realizar todas las tareas y ahora si recibe las del navegador, pero estas funciones que recibe, cada una esta buscando el valor registrado de la variable "i" que se le paso como argumento en su respectiva iteración. Pero como "i" se sobreescribió al final con el valor de 10, entonces todos los callbacks tendran ese valor de i de 10. . Para evitar esto, declaramos la variable "i" como "let", para evitar que se sobreescriba, ya que la naturaleza de "let" hace que la variable "i" solamente viva dentro de un bloque de código. Entonces para cada iteración del bucle for (que es un bloque diferente) tendremos diferentes "i" y así cada callback que regrese el navegador tendrá el valor correcto de "i". . Esto aplica de igual manera en nuestro código cuando declaramos como "const" la variable "color". entonces para cada callback (this.iluminarColor(color)) que regrese el navegador tendrá su correspondiente variable "color".

Cristian Jose Curup Muyus

student•

Buenisima tu explicacion compañero

Angel Perez

student•

En el minuto 15:22

const... let... var...?

Gustavo Hernan Tiseira

student•

Les dejo este material que es super interesante y despeja dudas hacerca de var, const y let. JavaScript es un lenguaje de programación con el ámbito global como ámbito, visibilidad o scope predeterminado y en el que todo se pasa por referencia también de forma predeterminada. Esto significa que una variable declarada fuera de una función es una variable global y es pasada por referencia a scopes descendientes o herederos:

i = "global"; function foo() { i = "local"; console.log(i); // local } foo(); console.log(i); // local En el snippet anterior se puede ver como la variable i es una variable del ámbito global y es sobreescrita dentro de la función por ser pasada por referencia; la referencia al identificador i dentro y fuera de la función es la misma referencia. Sería equivalente a declarar la variable con el keyword var:

var i = "global"; function foo() { i = "local"; console.log(i); // local } foo(); console.log(i); // local Sin embargo, si declaramos la variable con var también dentro de la función, se crea una variable local cuya visibilidad se reduce a la propia función donde ha sido declarada:

var i = "global"; function foo() { var i = "local"; // Otra variable local solo para esta función console.log(i); // local } foo(); console.log(i); // global Ahora hay dos variables con el mismo identificador pero en ámbitos diferentes y con referencias en memoria diferentes. La variable i dentro de la función tiene un scope reducido al ámbito de la función y no sobreescribe la variable global.

En resumen, la declaración con var define una variable en el ámbito local actual (lease función) y se hereda a scopes descendientes por referencia. Si la variable es declarada fuera de una función, la variable será una variable global.

Un último apunte sobre el ámbito de var, es que una variable declarada exclusivamente dentro de una función, no existe fuera de la misma, pues sería una variable local para esa función:

function foo() { var i = "local"; } console.log(i); // ReferenceError: i is not defined Hoisting Además del ámbito de aplicación visto antes, una variable declarada con var es sometida a hoisting («izamiento» o «levantamiento»): la declaración de la variable es «levantada» hasta el inicio del ámbito de aplicación pero la asignación al valor permanece en el sitio donde se realice.

Si intentamos acceder a su valor antes de que se asigne el valor, obtendremos un valor indefinido (undefined),:

console.log(i); // undefined var i = 1; Este comportamiento se puede entender como «la variable i ha sido declarada en el programa pero en el momento de intentar acceder a ella aún no tenía un valor asignado». La interpretación sería similar al siguiente código:

var i; // Variable declarada pero valor no definido console.log(i); // undefined i = 1; console.log(i); // 1 Sin embargo, si la variable no es declarada en absoluto obtendremos un ReferenceError, que no es lo mismo que obtener un valor indefinido:

console.log(x); // ReferenceError: x is not defined var i = 1; Debido a este comportamiento, se suele recomendar mover todas las declaraciones de variables al inicio del scope aunque no se asigne valor alguno, de esta forma se evitan estos posibles errores de ejecución.

El hoisting no es posible en variables declaradas con let o const; estas variables siempre darán un ReferenceError si se intenta acceder a ellas antes de que sean declaradas:

console.log(x); // ReferenceError: x is not defined let x = 1; Declaración de variables con let y const let y const son dos formas de declarar variables en JavaScript introducidas en ES6 que reducen el ámbito de la variable a bloques (con var el ámbito era la función actual) y no admiten hoisting. Además, las variables declaradas con const no pueden ser reagsinadas (aunque no significa que su valor sea inmutable, como veremos a continuación).

let Un bloque en JavaScript se puede entender como «lo que queda entre dos corchetes», ya sean definiciones de funciones o bloques if, while, for y loops similares. Si una variable es declarada con let en el ámbito global o en el de una función, la variable pertenecerá al ámbito global o al ámbito de la función respectivamente, de forma similar a como ocurría con var.

Por ejemplo, en el siguiente snippet la variable i es una variable global y la variable j es una variable local:

let i = 0; function foo() { i = 1; let j = 2; if(true) { console.log(i); // 1 console.log(j); // 2 } } foo(); Pero si declaramos una variable con let dentro un bloque que a su vez está dentro de una función, la variable pertenece solo a ese bloque:

function foo() { let i = 0; if(true) { let i = 1; // Sería otra variable i solo para el bloque if console.log(i); // 1 } console.log(i); // 0 } foo(); Fuera del bloque donde se delcara con let, la variable no está definida:

function foo() { if(true) { let i = 1; } console.log(i); // ReferenceError: i is not defined } foo(); Debido a este comportamiento, muchos desarrolladores se inclinan hacia let como la forma predeterminada de declarar variables en JavaScript y abandonar var (1, 2, 3), pues el scope más específico previene la sobreescritura de variables de forma accidental al declarar variables sin ensuciar el scope superior.

const El ámbito o scope para una variable declarada con const es, al igual que con let, el bloque, pero si la declaración con let previene la sobreescritura de variables, const directamente prohíbe la reasignación de valores (const viene de constant).

Con let una variable puede ser reasignada:

function foo() { let i = 0; if(true) { i = 1; } console.log(i); // 1 } foo(); Con const no es posible; si se intenta reasignar una variable constante se obtendrá un error tipo TypeError:

const i = 0; i = 1; // TypeError: Assignment to constant variable Pero que no se puedan reasignar no significa que sean inmutables. Si el valor de una variable constante es «algo» mutable, como un array o un objeto, se pueden cambiar los valores de sus elementos.

Por ejemplo, una variable constante se puede asignar a un objeto con determinadas propiedades. Aunque la variable no se pueda asignar a un nuevo valor, si se puede cambiar el valor de sus propiedades. Esto sería posible:

const user = { name: 'Juan' }; user.name = 'Manolo'; console.log(user.name); // Manolo Pero esto no sería posible:

const user = 'Juan'; user = 'Manolo'; // TypeError: Assignment to constant variable Es decir, la variables declaradas con const son constantes (no reasignables) pero pueden ser mutables. Si es un objeto, incluso se podrían crear nuevas propiedades:

const user = { name: 'Juan' }; user.surname = 'Padial'; console.log(user); // {name: 'Juan', surname: 'Padial'} Resumen var declara una variable de scope global o local para la función sin importar el ámbito de bloque. Permite hoisting. let declara una variable de scope global, local para la función o de bloque. Es reasignable y no permite hoisting. const declara una variable de scope global, local para la función o de bloque. No es reasignable, pero es mutable. No permite hoisting. En general, let sería todo lo que se necesita dentro de un bloque, función o ámbito global. const sería para variables que no van sufrir una reasignación. var se puede relegar para cuando necesitemos hacer hoisting, vamos, casi nunca.

Genaro Flores

student•

Datos de utilidad que he leído en los comentarios más viejos: Ahora utilizar let / const, var ya no es utilizado(aún sirve y servirá, pero genera problemas como los del video) SetTimeout se ejecuta cuando se termine el ciclo for, por eso que solo se aplicará el último color guardado (Es un buen ejemplo de asincronismo jaja) Espero sea de utilidad.

Emiliano Garello

student•

buenisimo esto .... igual no entendi nada....!!!

Javier Romero

student•

jajjajajaj estamos igual bro

Kevin Omar Melara Pacheco

student•

Creo que hubiese servido plantear primero bien la lógica del juego con algún diagrama o algo similar y luego ir convirtiendo las partes de ese diagrama en el código. de esta forma se comienza a ejercitar la dinámica de convertir los problemas a código y así ir resolviendo cada parte del juego. Simple mente es una forma mas visual para que aquellos que estamos en un nivel básico entendamos bien como aplicar todo lo que hemos visto en el curso.

Ivan Santiago

student•

Vi esa parte del video dos veces para entender bien el bug, es algo mas facil despues de ver la clase de var, let, const 😄

Jose L. Figueroa

student•

Terminé haciendo lo mismo!! XD

César Espitia

student•

Por acá dejo una explicación sobre las declaraciones let, var, const https://dev.to/sarah_chima/var-let-and-const--whats-the-difference-69e

Uriel Mojica Mejía

student•

Una recomendación: Siempre usen let, en el 99% de los casos siempre funciona, no causará ningún problema Además de que ya es el nuevo estándar

Kevin Omar Melara Pacheco

student•

Creo que hubiese servido plantear primero bien la lógica del juego con algún diagrama o algo similar y luego ir convirtiendo las partes de ese diagrama en el código. de esta forma se comienza a ejercitar la dinámica de convertir los problemas a código y así ir resolviendo cada parte del juego. Simple mente es una forma más visual para que aquellos que estamos en un nivel básico entendamos bien como aplicar todo lo que hemos visto en el curso.

Nilson Diaz

student•

Hey Omar , Tienes razon hubiera sido mucho mejor definir la logica en un diagrama de flujo o pseudo codigo antes, pero no te desanimes , trata de entender la logica del juego, no importa si tienes que repetir clases, y ve armando tu propio diagrama o algoritmo , a mi parecer es bastante buen proyecto no solo para practicar javascript si no tambien tu pensamiento logico

De hecho hay un curso sobre Pensamiento Logico y algoritmos es muy bueno , puedes echarle un vistazo !

Kevin Omar Melara Pacheco

student•

gracias por el aporte le dare un vistazo al curso

Gonzalo Mansilla

student•

Para hacerlo más flexible al código, escalable y no perderse en un futuro con la relación Color-Numero (Un simon de 100 colores XD), cree un clase Color donde ira todo lo relacionado al mismo.

this.colores = new Array(
            new Color('celeste', 0, celeste),
            new Color('violeta', 1, violeta),
            new Color('naranja', 2, naranja),
            new Color('verde', 3, verde)
        )

Clase Color

class Color {
    constructor(_color, _numColor, _elemHTML) {
        this.color = _color
        this.numColor = _numColor
        this.elemHtml = _elemHTML
    }

    getColor() {
        return this.color
    }

    getNumColor() {
        returnthis.numColor
    }

    getElemHTML() {
        return this.elemHtml
    }
}