Um tema que causa muita confusão para quem está iniciando em programação. Mas é muito importante entender as diferenças! Então vamos entender melhor. Vamos abordar o conceito dentro do JavaScript.
Síncrono
Não vai adiantar muito pesquisar ou entender apenas a palavra em si. É preciso ir além e entender o conceito em programação. Podemos definir um código síncrono com estes exemplos:
Imagine que você queira fazer uma festa, e no caso, irá mandar o convite para dois amigos te ajudarem a organizar. Quando você envia a mensagem para o primeiro, só poderá enviar mensagem para o segundo amigo depois que o primeiro te respondesse. É como se você ficasse aguardando ele pensar na resposta, digitar e enviar para partir para a próxima ação que é convidar o segundo amigo, ou seja você não pode ir para a próxima ação pois é obrigado esperar o retorno da resposta do primeiro. Outro exemplo:
Imagine um aluno realizando uma prova online. Se ele estiver com dúvida sobre a resposta de uma questão, ele pode ir para a próxima e ganhar tempo para responder as questões que ele sabe a resposta enquanto ainda pensa na que deixou para trás. Mas no 'mundo' síncrono o aluno é obrigado a finalizar aquela questão para poder ir para a próxima, não tendo a chance nem de passar para outra e depois retornar.
Isso é o que acontece no 'mundo' síncrono, uma ação tem que ser finalizada para outra ser inicializada. Obviamente uma função só pode ser iniciada quando a anterior for finalizada. Veja o código abaixo bem simples:
const MinhaFuncaoSincrona = () => "Código"
const MinhaFuncaoSincrona2 = () => "Código 2"
console.log(MinhaFuncaoSincrona());
console.log(MinhaFuncaoSincrona2());
//Resultado
//Código
//Código 2
Se você executar essas duas funções verá que elas serão executadas em sequência, de cima para baixo, é assim que o JavaScript lê nosso código, ou seja a função MinhaFuncaoSincrona2 só será executada quando a primeira for totalmente finalizada.
Existe algum problema com códigos síncronos? O problema está em depender da conclusão de uma ação para se iniciar outra, o que torna o tempo de execução menos ágil devido ao fluxo de código ficar parado esperando a finalização de uma função para realizar outra. Temos esse ponto negativo em requisições síncronas.
Assíncrono
Um código assíncrono é bem o oposto. Ele nos permite que, enquanto uma ação estiver sendo executada em uma função, as outras possam realizar suas ações ou requisições normalmente. Vamos a um exemplo, veja o código a seguir:
const sincrono = () => "Código sem setTimeout"
const assincrono = () => "Código com setTimeout"
setTimeout(() => {
console.log(assincrono());
}, 5000);
console.log(sincrono());
Eu estou colocando o setTimeout para definir que apenas após cinco segundos o código deverá exibir o console.log. Vamos ver o resultado:
Como ficou claro, o JavaScript não esperou o setTimeout por cinco segundos para exibir o console.log dentro dele e apenas depois exibir o último log. Pelo contrário ele foi para o ultimo e exibiu em primeiro. Apenas depois de cinco segundos mostrou o resultado da const assincrono. Mas o que realmente aconteceu? Bom o JavaScript leu nosso código de cima para baixo como sempre faz, quando viu que o setTimeout tinha uma contagem iniciou ela e não ficou esperando finalizar para exibir o resultado, mas foi logo para a próxima tarefa (função). O nosso código continuou a ser executado, mesmo com uma tarefa (função) que não tinha sido finalizada. Por isso o primeiro resultado exibido no console foi Código sem setTimeout, pois como a resposta foi mais rápida, ou exigiu menos processamento, ele já tratou e exibiu.
Então podemos concluir que uma característica principal de um código assíncrono é que podemos iniciar um processo e entregar esse resultado apenas quando tudo estiver pronto, sem ter que parar o fluxo do nosso código, as outras funções vão continuar a realizar suas ações conforme o fluxo do código.
Request
Uma coisa que temos que entender é que quando realizamos requisições para uma API temos requisições assíncronas. Veja mais um exemplo. Vamos supor que você queira obter todos os repositórios de seu github pessoal e exibir em uma página. Para isso você teria que utilizar a API disponibilizada pelo GitHub e exibir todos os repositórios. Quando a request for iniciada ela será realizada fora da thread do JavaScript e será executada em outra thread que será responsável em trazer esses dados. Então temos duas threads. Enquanto nosso request busca os dados que queremos, as outras funções vão sendo executadas na thread principal do JavaScript. E quando a request me trazer os dados que eu quero, para qual ponto da fila de execução vou ter o retorno dessa request? A resposta é que sempre será executado no final da fila.
Conclusão
Entender o conceito de um código assíncrono é muito importante para entender o fluxo do seu código e de outros. Existem conceitos muito mais profundos para entender, mas o que abordamos já te dá uma boa base para entender as principais diferenças. Espero que as explicações tenham tirado suas dúvidas.
Agradeço por ler até o final, caso tenha alguma dúvida ou sugestão entre em contato comigo pelo LinkedIn ou deixe um comentário. Muito obrigado e até o próximo post! 😉🚀