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

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:36

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

Curso de Fundamentos de JavaScript

Clase 45 de 55

Clase 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:

console.log(1) se ejecuta primero.
setTimeout() transfiere el console de 2 al Queue.
console.log(3) se ejecuta.
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!

David Elias Gatica Morales

Hace un año

Resumen crítico sobre asincronía y multihilo en JavaScript:

JavaScript es un lenguaje single-threaded, lo que significa que ejecuta código en un único hilo principal.

Para evitar que tareas lentas (como operaciones I/O o timers) bloqueen la ejecución y congelen la interfaz o el flujo del programa, JavaScript implementa un modelo de programación asincrónica basado en el event loop.

El event loop permite delegar tareas asincrónicas a APIs externas (Web APIs en navegador o APIs del sistema en Node.js) que corren en hilos separados. Cuando estas tareas terminan, sus callbacks se encolan para ser procesados uno a uno en el hilo principal, manteniendo la fluidez y capacidad de respuesta sin usar multihilo real dentro del motor JavaScript.

La asincronía en JavaScript se originó en los navegadores para manejar eventos y comunicación sin bloquear la interfaz, y luego fue adoptada y extendida por Node.js para servidores. Esta programación asincrónica es crucial porque compensa la limitación de un solo hilo, permitiendo realizar múltiples tareas concurrentes sin bloquear.

Aunque JavaScript no tiene multihilo nativo en el hilo principal, se pueden usar Web Workers o Worker Threads para procesamiento paralelo real cuando es necesario.

En resumen, JavaScript logra una eficiencia parecida al multihilo mediante el event loop y la asincronía, simplificando el desarrollo al evitar la complejidad de la sincronización de hilos tradicionales, y garantizando una experiencia fluida en la web y servidores.

-----------------------------------------

Ejemplo Síncrono (bloqueante):

console.log("Inicio");

function tareaLarga() {

const start = Date.now();

while (Date.now() - start < 3000) {

// simula tarea pesada bloqueante

}

tareaLarga();

console.log("Fin - Esta línea se ejecuta después de tareaLarga");

-----------------------------------------

Ejemplo Asíncrono (no bloqueante):

console.log("Inicio");

setTimeout(() => {

console.log("Tarea larga terminada");

}, 3000);

console.log("Fin - Esta línea se ejecuta inmediatamente");

-----------------------------------------

Importancia de la asincronía:

- Permite que el hilo principal no se bloquee con tareas lentas (como I/O o timers).

- Mantiene la interfaz o el programa responsivo.

- Permite manejar múltiples operaciones concurrentes eficientemente.

- Es fundamental en JavaScript para compensar su modelo single-threaded y brindar una experiencia fluida y escalable.

Comentarios (30)30 comentarios

Petter Joseph Chuquipiondo Robles

Hace 2 años

Johan Rodriguez

luis fernando troncoso montes

Andrés Soret Chacin

Eugenia Maldonado

Hace 10 meses

Diego Zazueta

BinaryTreeCode

Byron Tito

Mario Figueroa Jimenez

Facundo Peralta

Ana Rotela Cabrera

Sandra Rosa Arroyo Paredes

Stiven Alvarez

Bryan Steve Tong Vilca

Gabriel Adid Cabrera Olmedo

Juliana Rios

Ulises Sánchez Muñoz

Roger Alberto Chan Arjona

Hace 5 meses

Juan Miguel Jimenez

Luis Tapia

Juan Síntora

Kyb3r Cipher

Calvin Rafael Bobadilla Fernandez

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

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

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

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

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

Números y Operaciones Matemáticas en JavaScript

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

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

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

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

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

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

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

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

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

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

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

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

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

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

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

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

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

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

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

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

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

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

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

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

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

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

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

Promesas en JavaScript: estados y métodos

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

Peticiones asíncronas con for await en JavaScript

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

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

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

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

Actualizaciones y Nuevas Funciones en JavaScript

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