Compreendendo JavaScript Síncrono e Assíncrono

O JavaScript executa uma tarefa por vez. Isso ocorre porque é uma linguagem de thread única (single-threaded).

Para construir aplicativos rápidos, você deve conhecer a diferença entre código síncrono e assíncrono.

Execução Síncrona

O código é executado linha por linha. Cada tarefa espera que a anterior termine.

Pense em uma fila de caixa eletrônico. A segunda pessoa não pode usar a máquina até que a primeira termine.

Se uma tarefa demora muito tempo, todo o programa para. Isso é chamado de bloqueio (blocking).

Execução Assíncrona

As tarefas são executadas de forma independente. O JavaScript inicia uma tarefa e passa para a próxima imediatamente.

Pense em um restaurante. Você faz o pedido e depois conversa com seus amigos enquanto espera. Você não fica parado esperando a comida chegar antes de fazer qualquer outra coisa.

O código assíncrono evita que sua aplicação trave durante:

  • requisições de API
  • consultas ao banco de dados
  • leitura de arquivos
  • upload de imagens

Três maneiras de lidar com código assíncrono:

  1. Callbacks Uma função é executada após a conclusão de uma tarefa específica. É como um entregador ligando para você quando sua comida chega.

  2. Promises Uma promise representa um resultado futuro. Ela permanece em um estado pendente (pending) até que seja resolvida (resolved - sucesso) ou rejeitada (rejected - erro).

  3. Async/Await Isso faz com que o código assíncrono pareça código síncrono. É fácil de ler. Você usa await para pausar uma função sem bloquear o restante do seu programa.

Como funciona nos bastidores:

O JavaScript usa um Event Loop para gerenciar essas tarefas.

  • Call Stack: Rastreia suas funções atuais.
  • Web APIs: Lida com tarefas longas como timers ou fetches.
  • Callback Queue: Armazena tarefas concluídas.
  • Event Loop: Move as tarefas da fila para a pilha quando a pilha está vazia.

Comparação:

Síncrono:

  • Executa sequencialmente
  • Bloqueia o programa
  • Simples de escrever
  • Lento para tarefas pesadas

Assíncrono:

  • Executa de forma independente
  • Não bloqueante (non-blocking)
  • Mais complexo
  • Eficiente para aplicações web

Dominar esses conceitos é a chave para usar React, Node.js e APIs modernas.

Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Full post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea