En JavaScript, los conceptos de sincronismo y asincronismo son fundamentales para entender cómo se ejecuta el código y cómo maneja tareas que pueden llevar tiempo, como solicitudes a un servidor o temporizadores.

¿Qué es el Sincronismo?

• Sincronismo significa que las tareas se ejecutan una después de la otra.
• JavaScript ejecuta el código línea por línea, y no pasa a la siguiente tarea hasta que la actual haya terminado.
• Es como una cola en la que cada persona (tarea) espera su turno hasta que la persona anterior haya terminado.

Ejemplo de código síncrono:

 
1console.log("Inicio");
2let resultado = 1 + 2;
3console.log("El resultado es:", resultado);
4console.log("Fin");
Salida de Consola!:
Inicio
El resultado es: 3
Fin

• En este ejemplo, JavaScript imprimirá "Inicio", luego calculará 1 + 2 y mostrará el resultado, y finalmente imprimirá "Fin". Todo sucede en orden.

¿Qué es el Asincronismo?

• Asincronismo significa que algunas tareas pueden comenzar pero no se espera a que terminen para continuar con el siguiente código.
• En JavaScript, esto es útil para realizar tareas que pueden tomar tiempo, como leer un archivo, hacer una solicitud a un servidor, o esperar un tiempo antes de ejecutar algo (temporizadores).
• Es como si alguien en la fila dijera: "Voy a hacer otra cosa mientras espero, continúen sin mí".

Ejemplo de código asíncrono:

 
1console.log("Inicio");
2
3setTimeout(() => {
4    console.log("Esto se ejecuta después de 2 segundos");
5}, 2000);
6
7console.log("Fin");
Salida de Consola!:
Inicio
Fin
Esto se ejecuta después de 2 segundos

• En este ejemplo, JavaScript imprime "Inicio", luego configura un temporizador para ejecutar algo después de 2 segundos, y mientras espera, imprime "Fin". Cuando el temporizador termina, imprime el mensaje del setTimeout.

¿Por qué es importante?

• Código síncrono es simple y fácil de entender, pero puede bloquear la ejecución si una tarea toma mucho tiempo.
• Código asíncrono es mas dificil de entender y manejar, permite que JavaScript siga ejecutando otras tareas mientras espera que las más lentas terminen, lo que hace que las aplicaciones sean más rápidas y responden mejor.

Ejemplos comunes de asincronismo

1. Solicitudes a un servidor (AJAX/fetch):
   • Cuando pides datos a un servidor, puede tardar un poco en responder, pero mientras tanto, tu aplicación puede seguir funcionando.
   • Ejemplo:

     1fetch('https://randomuser.me/api/')
     2  .then(response => response.json())
     3  .then(data => console.log(data.results[0].name.first));
     4console.log("Solicitud enviada...");

     • Aquí, JavaScript envía la solicitud y sigue adelante. Cuando llegan los datos, se procesan sin haber bloqueado la ejecución.

[!WARNING]
No te preocupes si no entiendes el código ahora, los veremos proximamente con más detalle.

2. Promesas y async/await:
   • Las promesas son una forma de manejar el asincronismo en JavaScript, indicando que una tarea se completará en el futuro.
   • Con async/await, puedes escribir código asíncrono que parece síncrono, lo que lo hace más fácil de leer.
   • Ejemplo:

     1async function obtenerDatos() {
     2  let response = await fetch('https://randomuser.me/api/');
     3  let data = await response.json();
     4  console.log(data.results[0].name.first);
     5}
     6console.log("Antes de obtener los datos");
     7obtenerDatos();
     8console.log("Después de solicitar los datos");

     • Aquí, el código espera a que fetch y response.json() se completen, pero la ejecución de otras líneas de código puede continuar mientras espera.

Resumen

• Sincronismo: Tareas ejecutadas una tras otra. Útil para operaciones rápidas y simples.
• Asincronismo: Tareas que pueden ejecutarse en paralelo o no bloquear el flujo del programa. Es esencial para manejar tareas que llevan tiempo sin afectar la velocidad de la aplicación.

Entender estos conceptos te ayudará a escribir aplicaciones más eficientes y a manejar correctamente tareas que requieren tiempo en JavaScript.