Asi lo entendi yo por si a alguien le sirve😁
Introducción al curso
¡Alto! Tenemos una nueva versión de este curso para ti
Bienvenidos al Curso de Fundamentos de JavaScript
Repositorio de este curso de fundamentos de JS
Primeros pasos en JavaScript
Variables
Variables: Strings
Variables: Números
Funciones
El alcance de las funciones
Objetos
Desestructurar objetos
Parámetros como referencia o como valor
Comparaciones en JavaScript
Estructuras de Control y Funciones
Condicionales
Funciones que retornan valores
Arrow functions
Estructuras repetitivas: for
Estructuras repetitivas: while
Estructuras repetitivas: do-while
Condicional múltiple: switch
Arrays
Introducción a arrays
Filtrar un array
Transformar un array
Reducir un array a un valor
Programación Orientada a Objetos en JavaScript
Cómo funcionan las clases en JavaScript
Modificando un prototipo
El contexto de las funciones: quién es this
La verdad oculta sobre las clases en JavaScript
Clases en JavaScript
Asincronismo
Funciones como parámetros
Cómo funciona el asincronismo en JavaScript
Cómo funciona el tiempo en JavaScript
¿Qué pasó con swapi.co?
Callbacks
Haciendo múltiples requests
Manejando el Orden y el Asincronismo en JavaScript
Manejo de errores con callbacks
Promesas
Promesas Encadenadas
Múltiples promesas en paralelo
Async-await: lo último en asincronismo
Juego de HTML
Comenzando el juego
Generando una secuencia de números
Iluminando la secuencia de colores
Obteniendo el input del usuario
Agregando la verificación del color elegido
Agregando los estados finales del juego
Conclusiones del curso
Complementos
Diferencias entre var, let y const
Memoización: ahorrando cómputo
¿Hace cuántos días naciste?
Funciones recursivas
Entiende los closures de JavaScript
Estructuras de datos inmutables
Cambiando de contexto al llamar a una función
¿Cuándo hace falta poner el punto y coma al final de la línea?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
En principio, cualquier tarea que se haya delegado al navegador a través de un callback, deberá esperar hasta que todas las instrucciones del programa principal se hayan ejecutado. Por esta razón el tiempo de espera definido en funciones como setTimeout, no garantizan que el callback se ejecute en ese tiempo exactamente, sino en cualquier momento a partir de allí, sólo cuando la cola de tareas se haya vaciado.
Aportes 338
Preguntas 37
Asi lo entendi yo por si a alguien le sirve😁
Resumen de la clase
Tiempos y prioridades de ejecución en JS:
Dados los siguientes console.logs, ‘a’, ‘b’ y ‘c’, los resultados son en orden e inmediatos; estarán en orden en el EventLoop.
console.log(`a`)
console.log(`b`)
console.log(`c`)
// a
// b
// c
Si genero un callBack a partir de un setTimeout(), el browser toma la petición y después del tiempo estipulado se dispara el console.log.
console.log(`a`)
setTimeoun(()=> console.log(`b`), 2000)
console.log(`c`)
// a
// c
// b [2 segundos después]
Si genero otro setTimeout, pero con un tiempo = 0, el callBack será generado de todas maneras por la función setTimeout y el console.log será disparado al finalizar el EventLoop de nuestro programa, cuando está listo para revisar la cola de tareas.
console.log(`a`)
setTimeout(()=> console.log(`b`), 0)
console.log(`c`)
// a
// c
// b [después de finalizado el EventLoop]
Esto puede verse más claramente si generamos un loop for que demore un tiempo evidente y mayor al seteado en el callBack.
El tiempo configurado para el setTimeout es de 2000 milisegundos, como mínimo 2000 milisegundos, ya que el console.log funcionará después de que el for termine su proceso.
setTimeout(() =>console.log(`b`), 2000)
for(var i = 0; i < 10000000000; i++){}
DALE LIKE, Y COMENTA SI NO TE GUSTAN LOS APUNTES O SI NO IGUAL COMENTA “Mas super apuntes xD”:

Ahora va mi pregunta…
Si console.log() es una función y se ejecuta en el hilo principal y SetTimeout() también es una función pero se encola para ser ejecutada, como sabemos que funciones javascript se encolan y cuales ejecutan directamente?
Hola gente ! 😄
Como Sacha lo ha dicho, entender el asincronismo del lenguaje es lo que separa a los Amateurs de los PRO.
Si quedas con alguna duda a partir de esta clase PARA! Y no dudes en consultar mi tutorial, lo hice con mucho cariño para ustedes :3
En mi caso para entender mejor esto me apoye de esta herramienta y asi poder visualizar lo que Sacha explicaba en el video.
¿Alguien sabe por qué cuando ejecute el código de la letra “d” la consola me regresa un 1?
Que pedo que pedo? Si estaba en clase 26 salio el video de youtube de la introduccion y luego me mando aqui a la clase 50 y en el curso dice 30whats que esta pasando doctor Garzia.
sigo esperando por mi d
definitivamente soy un dev que esta aprendiendo todavia y esta clase me parecio significativa
Javascript primero ejecuta todo el código sincrono y después todo lo asíncrono.
Aun cuando en nuestras lineas de código primero este lo asíncrono o mezclado como muestra la clase.
Primero lo sincrono, luego lo asíncrono.
Pila de Tareas = Sicrono
Cola de Tareas = Asincrono
Ejecuta todo lo que esta en Pila de Tareas. Cuando ya no tenga nada en Pila de Tareas. Empieza a ejecutar lo que en Cola de Tareas.
En que momento pasamos por un agujero negro .-. clase50???
Porque salto a la clase 50 de una 😦
Quede colgado
Bloquee el event loop Jjajajaj, es parte de la practica supongo
JS da prioridad al programa principal, hasta que no lo termina no puede atender la cola de tareas, que es donde llegan los callbacks.
Es decir si cargamos de procesos largos el event loop, se demorará en atender los callbacks.
Mi PC murio XD
Esta es una gran diferencia con otros lenguajes de programación
Mis Apuntes:
// *****************************************
// EJEMPLO 1
// *****************************************
console.log('a');
// Ejecutar la siguiente sentencia luego de 2 segundos
// Usar setTimeout: recibe 2 parametros
// 1ro es una funcion
// 2do es el delay (cada 1000 = 1 segundo)
setTimeout(()=> console.log('b'), 1000)
console.log('c');
// Ejecutar la siguiente sentencia luego de 0 segundos
setTimeout(()=> console.log('d'), 0)
// Orden de Ejecucion
// 1ro: 'a'
// 2do: 'c'
// luego va a la cola de tareas y ejecuta
// 3ro: 'd' (Cero Segundos)
// 4to: 'b' (Dos Segundos)
// *****************************************
// EJEMPLO 2
// *****************************************
setTimeout(()=> console.log('zzzzzzZ'), 2000)
for (var i=0; i < 10000000000; i++){
}
//JavaScript no va a ejecutar el console.log
//hasta que no termine de ejecutar la sentencia for
//cuando hacemos una tarea asincrona nada nos garantiza
//que bloquea el "event loop" (la ejecucion del codigo)
Parece que mi archivo se daño 
*
* navegador: OK, la voy a realizar... mientras tanto
* sigue ejecutando tu código síncrono..., cuando lo termines tú código principal,
* anda a buscar la tarea que estará lista en la cola de tareas, la tomas y la ejecutas.
*/
22 de Marzo del 2019, no tenemos señales de la letra ‘d’ …
No bloquearé el even loop :3
Es cierto, puse un chingo de console.log(“c”); despues del setTimeout() y aun así fue el ultimo
como se comenta así de rápido :v
Bueno vi toda la clase y aún no sale la d .________.
COMO FUNCIONA EL TIEMPO EN JAVASCRIPT
setTimeOut sirve para esto, de manera que comenzaremos el ejemplo con algo totalmente simple;
console.log('a')
console.log('b')
console.log('c')
Verificamos que se ejecuten en la consola y ahora procederemos a agregar la la funcione.
console.log('a')
setTimeout( function (){
console.log('b')
},2000)
console.log('c')
Aca le agregamos la función setTimeout con una función como referencia, ya que si colocamos el console log inmediatamente en el paréntesis, este se va a ejecutar como segunda línea de código, otra forma de hacer esto es colocándolo como arrow function.
console.log('a')
setTimeout( ()=> console.log('b'),2000)
console.log('c')
Ahora que pasara si tomamos el tiempo, que colocamos (2.000 miliSegundos =2 segundos) y lo pasamos a 0 seg.?
console.log('a')
setTimeout( ()=> console.log('b'),0)
console.log('c')
Nuestro código se ejecutaría en el mismo orden, porque a pesar de que en la anterior le dijimos al código que en 2 segundos ejecutaría el console.log, y aca le estamos diciendo que se ejecute en básicamente nada, se ejecutara en el mismo orden que el anterior debido a que esta segunda línea de código es enviada al callstack, lo que hace que nuestro navegador siga ejecutando sus procesos principales, y cuando termina de hacer esto, empezara a ejecutar los procesos del callstack.
Con esta clase me quedo mucho mas claro todo, primero corre lo principal y luego esos setTimeout los deja en una bandera esperando para ahí si ejecutarlos.
Osea que lo que hace es mandar a una lista de espera asi tenga delay de 0, y hasta que no se termine de ejecutar lo demas no se cumple la funcion
console.log("a");
setTimeout(() => console.log("b"), 0);
console.log("c");
setTimeout(() => console.log("d"), 2000);
for (var i = 0; i < 10000000000; i++){};
/* con setTimeout hacemos que una funcion anonima se ejecute pasados 2 segundos (2000 milisegundos) */
/* lo que hace setTimeout es poner la funcion en la cola de tareas a ejecutar */
/* la tarea para mostrar la letra d ya esta ejecutada pero JS no la va mostrar hasta que no termine de realizar todo el ciclo for ya que este esta en una ejecucion directa y no en una lista de espera */
Después de este ejercicio me toco comprar un PC nuevo, el viejo no quizo prender mas ):
es broma XD
El navegador es como el ayudante del chef en la cocina , le delega la tarea de preparar la salsa mientras el se enfoca el ingrediente principal del plato , puede que la salsa este lista primero pero si el chef no a terminado el ingrediente principal no van a poder servir sola la salsa jajajaja así lo entendí 😄
Les dejo el siguiente enlace de la Mozilla Developer Network para complementar perfectamente esta clase y la anterior.
Y tambien el video de Sasha acerca de la pila de ejecucion en JS en su canal de YouTube ‘La cocina del codigo’ que complementa complementa muchisimos al enlace anterior.
¿y que paso acá? le aparece que tiene un poconon de clases que no emos.
No voy a bloquear el event loop
No voy a bloquear el event loop
No voy a bloquear el event loop
No voy a bloquear el event loop
No voy a bloquear el event loop
Genial! por este tipo de clases es que me agrada aprender con Platzi
En resumen, la función que esté dentro del setTimeOut() va a esperar hasta que termine de ejecutarse la tarea principal y tiene un tiempo minímo que es el segundo parámetro que le pasamos 🤔
Operaciones que realizamos de manera asíncrona:
Mi computadora tardo 10 segundos :C me siento decepcionado.
QUE CLASE MÁS GENIAL. Excelente como profe el objeto sacha jeje
Aunque aún no entendí gran parte, me gusta mucho este curso.
¿En que momento pasé de la clase 26 a la clase 50 del curso FUndamentos-Javascript? ¿que falta en medio?
setTimeout(()=> console.log('d'), 2000) // Va a la cola de tareas, se ejecutará cuando termine la pila de ejecución
for (var i = 0; i<10000000000; i++) { } // Va a la pila de ejecución (call stack, llamadas a funciones)
Los dos segundos que agregamos en el SetTimeOut es solo el valor minímo esperado. Es decir, en setTimeOut: "Realiza esto en dos segundos o más".
Muy buena explicación sobre como funciona JavaJS
Aquí también pueden completar la explicación del EventLoop y hacer ejercicios.
Philip Roberts: ¿Que diablos es el “event loop” (bucle de eventos) de todos modos?
Mi aporte a esta clase, comparto créditos con @fernando-huaman-santamaria
var mensaje = document.getElementById('respuesta')
var inspector_preguntas = 0
var puntos = 0
const PUNTAJE_RESPUESTAS_CORRECTAS = 10
const PUNTAJE_RESPUESTAS_INCORRECTAS = 2
const CLAVE_RESPUESTAS_CORRECTAS = [AC1, AC2, AC3]
const CLAVE_RESPUESTAS_INCORRECTAS = [NO1, NO2, NO3, NO4, NO5, NO6]
// Interesante:
console.log(AC1)
console.log(NO3)
var tiempo = document.getElementById('mostrarTiempoTranscurrido')
var segundos = 0
// Generamos un intervalo de tiempo de 1 segundo, para mostrar el tiempo que ha transcurrido desde que inicio la aplicación del examen
var intervalo = setInterval(function(){
tiempo.textContent = `Tiempo transcurrido: ${++segundos} seg.`
}, 1000)
// Generamos un proceso que debe de ejecutarse pasado una cierta cantidad de tiempo. En este caso, el examen tiene una duración de 5 segundos, por tanto, debo de empezar a calificar pasado ese periodo de tiempo.
setTimeout(calificadorExamen, 5000)
// Nota importante... puedo recuperar el elemento del DOM con tan solo escribir literalmente el nombre de su ID asignado. Por ejemplo AC1 (javascript lo encuentra en el DOM y sabe que es un elemento cuyo id es ACI, por tanto, puedo hacer directamente AC1.propiedad)
// Es por eso que en los arreglos he colocado el nombre de sus ID
function calificadorExamen() {
// Recorremos todas las respuestas correctas (puesto que cada pregunta tiene un acierto)
for (var opcion of CLAVE_RESPUESTAS_CORRECTAS) {
if (opcion.checked) {
puntos += PUNTAJE_RESPUESTAS_CORRECTAS
} else {
// En caso de que la respuesta actual no sea correcta, verificamos si el usuario selecciono otra respuesta, o la dejo nula
for (var i = inspector_preguntas; i < inspector_preguntas + 2; i++) {
if (CLAVE_RESPUESTAS_INCORRECTAS[i].checked) {
puntos -= PUNTAJE_RESPUESTAS_INCORRECTAS
}
}
}
// El inspector de preguntas juega un papel importante (es como un puntero), ya que se posiciona en los indices correctos para respuestas incorrectas de cada pregunta. Al inicio comienza en 0 (para la pregunta 1), posteriormente se posiciona en 2 (para la pregunta 2). Matematicamente hablando cada pregunta tiene 2 respuestas incorrectas, entonces para cada pregunta debo saltar a las siguientes 2 y así sucesivamente
inspector_preguntas +=2
}
mensaje.innerHTML = `Usted obtuvo ${puntos} puntos. Gracias por participar`
clearInterval(intervalo)
// Si el puntaje es acreditable, creo un enlace para que el usuario descargue su certificado
if(puntos > 18) {
const a = document.createElement('a')
const texto = document.createTextNode('Descarga tu certificado')
a.appendChild(texto)
a.href="https://platzi.com/certificado.pdf"
document.body.appendChild(a)
}
}
Un fragmento de código que puede ayudar a entender el tema.
Se puede ver el orden en que salen los mensajes y como está relacionado con los timeOutes y con la finalización de la secuencia principal de instrucciones.
console.log("A");
setTimeout(function() {
console.log("K");
}, 2000);
console.log("B");
setTimeout(() => console.log("J"), 1000);
console.log("C");
console.log("D");
setTimeout(function() {
console.log("H");
}, 0);
console.log("E");
setTimeout(() => console.log("I"), 0);
console.log("F");
var a = 0
for( let i = 0; i < 1000000000; i++ ) {
a = a | i
}
setTimeout(() => console.log("L"), 0);
console.log(`G. final value of a = ${a}`)```
Recordemos que un callback debe esperar a que a tarea principal termine de ejecutarse, para que el inicie.
Un diferenciador entre un dev que está en proceso de aprendizaje y uno que ya tiene claro los principios de JS puede ser el conocimiento sobre el manejo de los tiempos y ejecución de JS.
Muy claro el ejemplo utilizado, el bloque de código utilizado con el ciclo for se ejecuta antes que cualquier elemento en la lista de tarea, en este caso setTimeout.
amigos le recomiendo esta pagina para que entiendan el callstack, la otra cola de tareas, y el call back
console.log('1')
console.log('2')
console.log('3')
/////El orden de aparicion en consola sera: 1 / 2 / 3
/////'2' se ejecutara despues de pasado un tiempo
console.log('1')
setTimeout(() => console.log('2'), 2000)
console.log('3')
/////La funcion setTimeout es ejectuar la funcion indicada (console.log) despues de 2 segundos UNA VEZ FINALIZADO el programa principal
/////El orden de aparicion en consola sera: 1 / 3 / 2
//////'2' se ejecutara los 0 segundos
console.log('1')
setTimeout(() => console.log('2'), 0)
console.log('3')
//////Por deduccion, el orden de aparicion logico seria 1 / 2 / 3, sin embargo
//javascript envia la funcion a la cola de tareas esta se ejecuta una vez el hilo principal haya finalizado su ejecucion
//por lo que el orden de aparicion seguira siendo 1 / 3 / 2
///////En el siguiente ejemplo podemos observar como un ciclo for al final esta bloqueando
//la ejecucion del console.log('2')
console.log('1')
setTimeout(() => console.log('2'), 2000)
console.log('3')
for(var i = 0; i < 1000000000000000000000000000000000000000; i++){}
Muy importante también es que JS ejecutará primero el setTimeout con menos delay(En caso que se tenga más de una de estas funciones), sin importar el orden de lectura.
console.log("a")
setTimeout(
()=>console.log(`b`),2000
)
setTimeout(
()=>console.log(`d`),1000
)
console.log(`c`)
/*output:
a
c
d
b
*/
Primera vez que comento en Platzi, a pesar que llevo ya un mes y medio. Nunca habia visto un video tan explicativo. Esto me volo la cabeza!!.
Estuve monitoreando los recursos, con el administrador de tareas, es interesante lo que sucede. También el ventilador del procesador comienza a hiperventilar xD
Me tome la molestia de expresarlo de la siguiente manera y fu bueno ver como el asincronismo va
setTimeout(() => console.log('d'), 2000);
for (var i=0; i<1000000000; i++){
console.log('a'+i); //solo para ver como se va reflejando el paso del contador
}
setTimeout(function(){
console.log('Perdon, estaba dormido :,v')
}, 0)
console.log('c')
setTimeout(() => console.log('Ay yo tambien v,:'), 2000)
for(var i = 0; i<100000000; i++){
}
20/09/2020, la D no aparece!!
Buena explicación !
operaciones ejecutadas de manera asíncrona -> Ejecución de tareas en tiempo futuro -> Modificación del DOM -> Modificar elementos html, css -> Mostrar un alert -> Solicitar pedidos de datos hacia una API externa
No debo bloquear el EvenLoop!!!
mi pc no reacciona ayuda jajaj
El recomendado del día: Un video del canal de Sacha explicando un poco mas extenso el tema de call stack. Acepto que vi el video hace unos meses y no entendí nada. Ahora lo pude digerir un poco mejor.
Esto se va poniendo interesante!
En este link encotraran una herramienta que les ayudara a ver como se ejecuta nuestras lineas de código
console.log ('a')
console.log ('b')
console.log ('c')
//La salida de los console.log anteriores se muestra de la siguiente manera
/*
a
b
c
*/
//La función setTimeout recibe dos valores: Una función y el tiempo de delay, por ejemplo
//en el ejemplo anterior vamos a modificar el segundo console.log añadiendo el setTimeout
console.log('a')
setTimeout(() => console.log('b'), 2000)
console.log('c')
//El orden de los console.log cambia debido al setTimeout, básicamente lo que sucede es que Javascript primero ejecuta todo el código de una funci´n
//y después ejecuta todo el código que fue puesto en la pila de ejecución:
/*
a
c
b (este console.log tardará dos segundos en imprimirse)
*/
//En este ejemplo vemos la forma en la que funciona la pila de JS. Ejecutamos un for y, cuando termine, JS ejecutará el console.log que tiene asignado el setTimeout
setTimeout(() => console.log('d'), 2000)
for (var i = 0; i < 1000000000; i++){
}
//En este ejemplo, Javascript ya tiene listo el setTimeout para imprimir la letra d pero sigue ejecutando el programa principal, cuando termina de ejecutar el código
//es cuando imprime la letra d. Los dos segundos son el mínimo de ejecución porque todo depende del tiempo de ejecución del programa principal
Una clase súper interesante, yo entendí que, JS carga en memoria RAM todas las funciones y después de leer el código completo, empieza a ejecutar de forma asíncrona las funciones en memoria.
JavaScript primero ejecuta el programa principal y luego se ocupa de lo que tiene pendiente el la cola de tareas.
El asincronismo crea una delegacion de tareas por parte de javascript, por lo que en este caso se crean dos lineas de ejecucion, las tareas primordiales, que realizara primero js; y la linea donde estaran esas callbacks, fruto de esa delegacion de tareas.
Por lo que hay que tener en cuenta que el resultado de esas delegaciones van a ser las ultimas en ser aniadidas, por lo que el tiempo va a ser diferente del marcado.
Ama, bloquie el event loop 😦
Les comparto la siguiente documentación que me sirvió para entender mejor sobre el funcionamiento del asíncronismo.
https://medium.com/@ubykuo/event-loop-la-naturaleza-asincrónica-de-javascript-78d0a9a3e03d
😊 Resumen clase 28
console.log(‘a’)
setTimeout(() => console.log(‘b’), 2000)
console.log(‘c’)
💟setTimeout se ejecuta una vez que js haya terminado con la pila de ejecucion (a, c)
💟una vez que termine con la pila de ejecucion del programa principal, va a ir a la cola de tareas (b)
setTimeout(function, delate en ms)
Pero que paso no iba por la clase 26/27 salto a la 50.
setTimeout ("función", delay)
Que gran clase, muy util y excelentemente explicado
2021… aún espero a d…
Cuando realizamos una call back, esta pasa inmediatamente a otra lista de tareas, por lo que el codigo se va a seguir ejecutando y por ultimo, se va a ejecutar la call back que solicitamos
console.log('a')
setTimeout(() => console.log('b'), 0)
console.log('c')
setTimeout(() => console.log('d'), 2000)
for (var i = 0; i < 10000000000; i++) {
}
En JavaScript las funciones asincrónas se van a un espacio llamado ‘Fila de tareas’ que se tiene en cuenta justo cuando el programa termina de ejecutarse normalmente. Por lo tanto, se debe tener en cuenta si hay alguna funcion sincróna que demore el tiempo en el que la funcion asincróna sea ejecutada.
entendido!
Sacha!!! Jajajaj
Mi compu se sobrecalentó! Me re asusté! Le puse 17 ceros al numero y casi fundo mi pc jajaja.
Gracias
Al hacer un pedido a una API lo hacemos de manera asincrona
si modifico desde el DOM se ejecuta de manera asincrona. Otro ejemplo es mostrar un alert
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Clases</title>
</head>
<body>
<script>
console.log('a')
setTimeout( ()=> console.log('b'),0)
console.log('c')
</script>hola mundo!
</body>
</html>
<code>
Entonces esta sería una de las formas de realizar el famoso “Saltar Publicidad” en 5,4,3,2,1
Interesante clase, para entender los tiempos de carga de JS.
Pense que se iba a mostrar el console.log una vez finalizado los dos segundos. Como cambia los conceptos que no tenia fundamentado de javascript. Excelente Clase
Excelente super clase…
Se congeló el navegador, ce cerró y casi tengo que reiniciar la pc jajaja
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?