Introducción a JavaScript

1

Fundamentos de JavaScript para Principiantes

2

Instalación y Configuración de JavaScript en Visual Studio Code

3

Instalación y configuración de Visual Studio Code y Node.js en Windows

4

Variables y Buenas Prácticas en JavaScript

5

Tipos de Datos en JavaScript: Primitivos y Complejos

6

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

7

Números y Operaciones Matemáticas en JavaScript

8

Conversión de Tipos en JavaScript: Implícita y Explícita

9

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

10

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

11

Operadores Lógicos en Programación: AND, OR y NOT

12

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

13

Juego de Adivinanza: Programación con Estructuras Condicionales

14

Estructura y uso del condicional Switch en programación

15

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

16

Iteración con for-of en JavaScript para arrays y strings

17

Iteración sobre Objetos con forIn en JavaScript

18

Uso del ciclo while para iteración en programación

19

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

20

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

21

Diferencias entre Funciones y Métodos en JavaScript

22

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

23

Arrow Functions y Enlace Léxico en JavaScript

24

Scope y Contextos de Ejecución en JavaScript

25

Closures y Ámbito Léxico en JavaScript

26

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

27

Arrays: Propiedades, Acceso y Creación en Programación

28

Mutabilidad e inmutabilidad en arrays: conceptos y ejemplos prácticos

29

Métodos push y pop para modificar arrays en JavaScript

30

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

31

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

32

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

33

Uso del método slice para extraer porciones de un array en JavaScript

34

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

35

Programación Orientada a Objetos en JavaScript: Conceptos y Práctica

36

Creación y Manipulación de Objetos en JavaScript

37

Función constructora y gestión de instancias en JavaScript

38

Clases en JavaScript: Creación y Uso de Objetos con Sintaxis Moderna

39

Programación Orientada a Objetos en JavaScript: Clases y Prototipos

40

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

41

Métodos y herencia prototípica en JavaScript

42

Uso de "this" en Clases y Funciones Constructoras

43

Validación de Usuarios en una Red Social: Algoritmo Básico

44

Implementación de la Función Sign-In y Validación de Usuario

Asincronía en JavaScript

45

Programación Síncrona y Asíncrona en JavaScript

46

Promesas en JavaScript: Asincronía y Manejo de Estados

47

Uso de Async/Await para Promesas Asíncronas en JavaScript

48

Peticiones asíncronas con for await en JavaScript

49

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

50

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

51

Peticiones HTTP en JavaScript: Fetch, GET, POST y DELETE

52

Envío de Datos al Servidor con JavaScript y Fetch API

53

Eliminar Posts con JavaScript y Delegación de Eventos

54

Manejo de IDs en JavaScript para eliminar artículos del DOM

55

Actualizaciones y Nuevas Funciones en JavaScript

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Programación Síncrona y Asíncrona en JavaScript

45/55
Recursos

¿Cómo funciona JavaScript engine en el navegador?

Para entender cómo se maneja la ejecución del código JavaScript, es crucial comprender los componentes clave de su motor de ejecución en los navegadores: el Memory Heap y el Call Stack.

¿Qué es el Memory Heap?

El Memory Heap es el espacio donde se almacenan variables, funciones y objetos creados en JavaScript de forma aleatoria. Actúa como un almacén desorganizado donde el navegador gestiona la memoria de manera eficiente, permitiendo que las aplicaciones JavaScript funcionen sin problemas.

¿Cómo opera el Call Stack?

El Call Stack es una pila de tareas donde se registran las funciones que deben ejecutarse. Cuando se llama a una función, esta se agrega al Call Stack, ejecutándose de manera secuencial. Por ejemplo, si tienes una función holaMundo que llama a otra función miNombreEsDiego, el Call Stack ejecutará primero holaMundo y luego miNombreEsDiego, de forma simple y secuencial.

¿Qué es la programación síncrona en JavaScript?

En un entorno síncrono, JavaScript ejecuta una tarea a la vez en el Call Stack. Este enfoque puede llegar al temido Stack Overflow, una situación en la que el Call Stack se llena más allá de su capacidad y el navegador puede bloquearse. Para solventar este problema, el navegador debe cerrarse y abrirse nuevamente.

JavaScript, por naturaleza, funciona de forma síncrona, ejecutando cada línea de código en orden. Sin embargo, ciertos mecanismos permiten que JavaScript también pueda manejar tareas asincrónicamente.

¿Cómo se realiza la programación asíncrona?

¿Qué son las Web APIs?

Las Web APIs son herramientas que permiten que JavaScript ejecute tareas de manera asíncrona, proporcionando simultaneidad. Cuando una función de Web API se llama, se transfiere a la sección de las Web APIs y se ejecuta en paralelo al Call Stack. Una vez completada, la tarea se mueve al Queue.

¿Qué es el Event Loop?

El Event Loop interroga constantemente al Call Stack para verificar si está vacío. Cuando lo está, extrae una tarea del Queue y la transfiere al Call Stack para ejecutar. De este modo, tareas asincrónicas se integran ordenadamente en el flujo de ejecución.

Ejemplo de setTimeout en programación asíncrona

Considera un caso donde se utiliza setTimeout, una función que actúa asincrónicamente:

function varFunc() {
  console.log(1);
  setTimeout(() => console.log(2), 0);
  console.log(3);
}

La secuencia de ejecución sería:

  1. console.log(1) se ejecuta primero.
  2. setTimeout() transfiere el console de 2 al Queue.
  3. console.log(3) se ejecuta.
  4. Una vez que el Call Stack está vacío, el event loop mueve el console de 2 del Queue al Call Stack.

El resultado en consola sería: 1, 3 y 2. Aunque setTimeout parece ser instantáneo, su resultado aparece solo cuando el Stack está vacío.

¿Qué son las promesas en JavaScript?

Las promesas en JavaScript, al igual que las funciones de Web API, facilitan la programación asíncrona. Permiten que funciones específicas se ejecuten en paralelo al flujo principal, mejorando la eficiencia y evitando cuellos de botella en aplicaciones de alto rendimiento.

¿Cuál es el uso de async/await?

async y await son sintaxis modernas para manejar promesas, haciendo que el código asíncrono se vea y se lea como si fuera síncrono. Proporcionan una forma más clara y manejable de estructurar código asincrónico, especialmente en operaciones complejas o jerárquicas.

Con esta comprensión, puedes mejorar la forma en que escribes y gestionas tu código JavaScript, maximizando sus capacidades síncronas y asíncronas. ¡Adelante, sigue explorando y dominando el mundo del desarrollo con JavaScript!

Aportes 17

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

***Proceso:*** 1. El JavaScript Engine ejecuta el código desde la **Call Stack** (pila de llamadas). 2. Cuando una operación asíncrona se encuentra (como una solicitud de red), se envía al **Web APIs** del navegador o a **Node APIs** en Node.js. 3. Una vez que la operación asíncrona se completa, su callback se envía a la **Task Queue** (cola de tareas). 4. El Event Loop verifica la Call Stack y, si está vacía, mueve el callback de la Task Queue a la Call Stack para su ejecución.
## ***Función del Motor de JavaScript*** El flujo de pasos ordenado de cómo un motor de JavaScript (como V8) procesa y ejecuta código JavaScript, detallando los componentes que intervienen en cada etapa: **1. Recepción del Código JavaScript** * **Componente**: *Motor de JavaScript* * **Descripción**: El motor de JavaScript recibe el código fuente para ser procesado. **2. Parsing (Análisis Sintáctico)** * **Componente**: *Parser* * **Descripción**: * El *Lexer* convierte el código fuente en tokens (elementos léxicos como palabras clave, operadores, etc.). * Luego, el *Parser* toma estos tokens y construye un *Abstract Syntax Tree* (AST), que es una representación estructurada del código. **3. Optimización Inicial** * **Componente**: *Interpreter* * **Descripción**: El AST se convierte en bytecode (un código intermedio) por el intérprete. En motores modernos como V8, este bytecode se puede ejecutar directamente o servir como base para la optimización. **4. Gestión de la Memoria** * **Componente**: *Memory Heap* y *Garbage Collector (GC)* * **Descripción**: * El *Memory Heap* es donde se almacenan los objetos y variables. * El *Garbage Collector* gestiona la memoria, limpiando objetos no utilizados para liberar espacio. **5. Ejecución del Código** * **Componente**: *Execution Engine* * **Descripción**: * **Interpreter**: Ejecuta el bytecode línea por línea. * **JIT Compiler (Just-In-Time)**: Identifica funciones que se ejecutan frecuentemente y las compila en código máquina para mejorar el rendimiento. * Durante la ejecución, el motor utiliza la *Call Stack* para rastrear las funciones en ejecución y la *Memory Heap* para almacenar los datos. **6. Manejo de Asincronía** * **Componente**: *Event Loop*, *Task Queue*, *Microtask Queue* * **Descripción**: * El *Event Loop* supervisa el *Call Stack* y la *Task Queue*. * Las tareas asíncronas como setTimeout o promesas se encolan en la *Task Queue* o *Microtask Queue*. * Cuando el *Call Stack* está vacío, el *Event Loop* ejecuta las tareas en las colas. **7. Interacción con APIs Externas** * **Componente**: *Web APIs*, *FFI (Foreign Function Interface)* * **Descripción**: * Las *Web APIs* proporcionan funcionalidades adicionales como DOM, Fetch, Timers, etc., que no forman parte del núcleo de JavaScript. * El *FFI* permite que JavaScript interactúe con código escrito en otros lenguajes (como C++ en Node.js). **8. Optimización Dinámica** * **Componente**: *JIT Compiler* y *Execution Engine* * **Descripción**: * Durante la ejecución, el *JIT Compiler* sigue optimizando el código, convirtiendo las partes más utilizadas en código máquina altamente optimizado. * El *Execution Engine* se encarga de ejecutar este código optimizado. **9. Liberación de Recursos** * **Componente**: *Garbage Collector (GC)* * **Descripción**: Después de que el código ha terminado de ejecutarse, el *Garbage Collector* se encarga de liberar los recursos y la memoria ocupada por los objetos y variables que ya no se usan de la memoria heap. **10. Finalización de la Ejecución** * **Componente**: *Motor de JavaScript* * **Descripción**: El motor finaliza la ejecución del código, habiendo gestionado las tareas, optimizado el rendimiento, y limpiado la memoria. ![]()
Esto es nuevo
Que bueno que metieron este tema, en el otro curso no me quedó tan claro y hasta se me hizo inentendible con el otro profe, espero entenderlo mejor con Diego, eso si por favor hagan algun curso práctico de JS mejorado con ejemplos reales y bien piolas. Gracias!!!!
Para poder entender lo que es programación síncrona y asíncrona en JavaScript, primero vamos a hablar de cómo funciona ***JavaScript Engine*** en el navegador. ## Conceptos que debes de tener en cuenta: * **Memory heap:** Es el espacio en donde se van a guardar todas las variables, todas las funciones y objetos que creamos o construimos en JavaScript, y se van a estar guardando en el *memory heap* de forma aleatoria. * **Call Stack:** Es la pila donde se van a empezar a llamar cada una de las funciones que tenemos que ejecutar en nuestro programa. Por ejemplo, yo tengo esta función `console.log("Hola Mundo")`, y esa función manda a llamar esta otra función `console.log("Mi nombre es Diego")`. Este *Call Stack* lo que va a hacer es mandar a llamar la primera función, ejecuta `"Hola Mundo"`, y se manda a llamar la segunda función, ejecuta `"Mi nombre es Diego"`. A esta función se le conoce como **programación síncrona**. Quiere decir que se está trabajando una tarea a la vez. JavaScript funciona trabajando una tarea a la vez, y eso va a estar funcionando prácticamente en el *Call Stack*. ## Stack Overflow No, no es esa página famosa entre los desarrolladores. Se refiere a cuando llevamos nuestro stack de tareas a un punto en donde excede el número o la memoria que tiene permitida para poder ejecutar las tareas. Lo que sucede con esto es que prácticamente nuestro navegador deja de funcionar, crashea. Tenemos que cerrarlo, abrirlo, para que vuelva a liberar la memoria que tenía en este stack y pueda funcionar de la forma en la que nosotros esperamos. ## Prgramación Asíncrona JavaScript por defecto **solo funciona de forma síncrona**. Pero sí tenemos forma de poder hacer que JavaScript pueda empezar a **trabajar ciertas tareas de forma asíncrona**, que quiere decir en simultáneo. Pero antes de hacerlo, debes de entender bien cómo funciona un poco más el tema del navegador con ciertos factores muy importantes. ![](https://miro.medium.com/v2/resize:fit:828/format:webp/1*RtnZO0r3urHFSFuOTnP6Zg.png) 1. Lo primero que tenemos es el *Call Stack*. 2. Lo segundo que tenemos la parte de las *Web APIs*. Las *Web APIs* es lo que va a hacer que JavaScript pueda funcionar o se comporte de manera asíncrona. Al momento de que nosotros tenemos una función que es una *Web API*, lo que hace es que la va a mandar a la sección de *Web API* y va a hacer que se ejecute en simultáneo mientras que el *Call Stack* sigue sacando las funciones que tiene ahí. 3. La *Web API* lo que va a hacer es que se va resolver en ese momento, ya que termine de resolverse, lo que tenga que hacer en la función, lo va a bajar al *Queue*, que es prácticamente una sala de espera. 4. Y ya por último, el *Event loop* va a estar verificando que el *Call Stack* esté vacío. Si el *Call Stack* ya está vacío, va a tomar lo que existe en el *Queue* y lo va a regresar al *Call Stack* para que se pueda terminar de ejecutar. Si no está vacío, va a mantener lo que está en el Queue en espera hasta que se logre liberar el *Call Stack* y en ese momento le va a dar paso para que la función que se tiene que terminar de ejecutar pueda pasar al *Call Stack* y en ese momento se termine de ejecutar todo nuestro programa. Esta es la forma en la cual nosotros trabajamos código en JavaScript de forma síncrona y de forma asíncrona, utilizando por ejemplo Web APIs, que hace que nuestro código pueda comportarse como código asíncrono. Y para esto vamos a utilizar lo que se llaman **promesas**. Promesas que también pueden ser ***Async and Await***, que van a hacer que nuestro código pueda tener este comportamiento de asíncrono para que se ejecute en paralelo.
En pocas palabras para que. javascript pueda ser asincrono las funciones se las dividen entre el JS engine compuesto por el call stack y la memoria heap que se encarga del codigo javascript funciones, variables primitivas, referencias de memoria deobjetos, etc y esta el otro ayudante que es el web api donde todas laspeticiones APIS de javascript como el DOM, settime, geolocalizacion, fetch API, etc se resuelven ahi es por eso que se pueden resolver codigo en paralelo, cuando el web api termina el even loop jala esa callback y lo mete en el callback queue que es la sala de espera, cuando llega su turno se mete al call stack y su respuesta se procesa para ser representada al usuario, como resumen el Jaca script engine y el web API ptrabajan en paralelo cuando se necesita ara crear asincronismo.
Mis notas: ![](https://static.platzi.com/media/user_upload/image-4b885b6c-4ce6-4a74-a86f-b63fc8ee0e11.jpg) ![](https://static.platzi.com/media/user_upload/image-479110db-c2a9-447a-80dd-db8149ef8748.jpg)
En programación, los conceptos de **sincronía** y **asincronía** se refieren a la forma en que se manejan las tareas y la comunicación entre diferentes partes de un programa. ### Síncrono En un proceso sincrono, las tareas se ejecutan secuencialmente. Esto significa que cada tarea debe completarse antes de que la siguiente pueda comenzar. La ejecución se bloquea hasta que la tarea actual se complete, lo que puede llevar a tiempos de espera si una tarea es lenta o implica operaciones que consumen mucho tiempo, como leer un archivo o hacer una solicitud de red. ### Asincrono En un proceso asincrono, las tareas pueden iniciarse y ejecutarse de manera no secuencial. Esto permite que otras tareas continúen ejecutándose mientras se espera la finalización de una tarea más lenta, mejorando la eficiencia y la capacidad de respuesta del programa. En JavaScript, esto se maneja comúnmente mediante `callbacks`, `promesas` y `async/await`.
Me costó entender esta clase, tuve que verla 3 veces; pero ya estoy listo para continuar el curso. Ánimo a todo la familia Platzi ¡A seguir aprendiendo!. Un fuerte abrazo.
* *JavaScript Engine*:* Memory Heap: Almacena variables, funciones, objetos. * Call Stack: Gestiona la ejecución de funciones. * *Naturaleza de un solo hilo*:* JavaScript es de un solo hilo (single-threaded), procesando una tarea a la vez. * *Stack Overflow*:* Ocurre cuando el Call Stack se llena, típicamente por recursión excesiva. * *Funciones asíncronas*:* Ayudan a evitar bloqueos y mejoran la eficiencia. * *Web API*:* Proporciona funcionalidades adicionales como setTimeout, fetch, DOM APIs. * Maneja operaciones asíncronas fuera del hilo principal de JavaScript. * *Callback Queue (Task Queue)*:* Almacena callbacks de operaciones asíncronas completadas. * *Event Loop:** Verifica constantemente si el Call Stack está vacío. * Mueve tareas del Callback Queue al Call Stack cuando está libre.
Entendí el concepto pero no entendí el ejemplo
Me parece que la animación del video se podría mejorar y hacerlo más intuitivo, de esta forma nos quedaría muchísimo más claro el ejemplo.
Muy buena explicacion ese es un tema de JS que nunca entendi del todo hasta ahora
**RESUMEN:** ![](https://static.platzi.com/media/user_upload/image-1c193e30-ad26-4df7-887a-8a34fa5f8526.jpg)
En JavaScript, el manejo de operaciones asíncronas es más complejo de lo que parece inicialmente. Aunque comúnmente se asocia la asincronía con las Web APIs del navegador, en realidad las tareas asíncronas pueden provenir de múltiples fuentes: del propio motor de JavaScript, del navegador, o del entorno de ejecución (como Node.js). El sistema utiliza diferentes colas para gestionar estas tareas: una para operaciones más grandes (macrotareas) como temporizadores o eventos de usuario, y otra para operaciones más pequeñas y prioritarias (microtareas) como las Promesas. El Event Loop, que es el mecanismo central de este sistema, constantemente supervisa estas colas y el Call Stack (donde se ejecuta el código actual). Cuando el Call Stack se vacía, el Event Loop primero procesa todas las microtareas pendientes, luego toma una macrotarea para procesarla, y repite este ciclo. Este sistema permite que JavaScript, siendo un lenguaje de un solo hilo de ejecución, pueda manejar múltiples operaciones simultáneamente sin bloquearse, lo cual es esencial para crear aplicaciones web responsivas y eficientes. Entender este funcionamiento es fundamental para cualquier desarrollador que trabaje con JavaScript, ya que afecta directamente cómo se comportará nuestro código asíncrono.
👏👏👏👏
Aquí comienza mi verdadero miedo a javaScript jaja