12 - Síncrono vs Assíncrono no Javascript

Quando estamos falando sobre programação em JavaScript, é essencial compreender a diferença entre código síncrono e assíncrono. Vamos explicar esses conceitos e utilizar exemplos para facilitar o entendimento neste capítulo.

12.1 Síncrono (Sync)

Quando nos referimos a operações síncronas em JavaScript, estamos falando sobre tarefas que são realizadas em uma sequência linear, uma após a outra. Isso significa que o código espera pela conclusão de uma tarefa antes de prosseguir para a próxima.

function syncTask() {
    console.log('Início da tarefa síncrona...');
    // Simulando uma tarefa que leva 2 segundos para ser concluída
    for (let i = 0; i < 2000000000; i++) {}
    console.log('Tarefa síncrona concluída.');
}

console.log('Início do programa.');
syncTask();
console.log('Fim do programa.');

Neste exemplo, a função syncTask é executada de forma síncrona:

O programa acima aguarda a conclusão dessa função antes de imprimir "Fim do programa." no console. Isso acontece porque o JavaScript executa o código de maneira sequencial, de cima para baixo, uma função de cada vez.

12.2 Assíncrono (Async)

Por outro lado, as operações assíncronas não bloqueiam a execução do código enquanto aguardam a conclusão de uma tarefa. Em vez disso, o JavaScript continua executando outras operações e volta para lidar com o resultado da tarefa assíncrona quando estiver disponível. Vamos ver um exemplo:

function asyncTask() {
    console.log('Início da tarefa assíncrona...');
    // Simulando uma tarefa assíncrona que leva 2 segundos para ser concluída
    setTimeout(() => {
        console.log('Tarefa assíncrona concluída.');
    }, 2000);
}

console.log('Início do programa.');
asyncTask();
console.log('Fim do programa.');

Neste exemplo, a função asyncTask é executada de forma assíncrona usando setTimeout:

O programa não espera pela conclusão dessa função e continua a executar, imprimindo "Fim do programa." no console imediatamente após chamar asyncTask.

12.3 Síncrono vs Assíncrono

	Sincronismo	Assincronismo
Definição	Execução sequencial, uma operação após a outra.	Execução simultânea de várias operações.
Bloqueio de Thread	Bloqueia a execução do código até que a operação atual seja concluída.	Não bloqueia a execução do código enquanto aguarda a conclusão de uma operação.
Exemplo	Chamadas de função síncronas, loops for, operações de leitura e escrita de arquivos bloqueantes.	Requisições de rede, manipulação de eventos, operações de I/O não bloqueantes.
Desempenho	Geralmente mais rápido para operações simples, mas pode ser lento para operações bloqueantes.	Mais eficiente para operações de I/O, não bloqueia a thread principal, melhorando a responsividade do aplicativo.
Conclusão de Tarefas	A próxima tarefa só começa quando a anterior é concluída.	As tarefas podem ser executadas em paralelo, sem esperar pela conclusão da anterior.

Espero que tenha ficado claro o conceito de sincronismo/assincronismo para o Javascript. No próximo capítulo, vamos explorar ainda mais sobre funções assíncronas em JavaScript.