Como Esperar O Resultado De Uma Função No Javascript

Uma coisa que é sabida é que o Javascript é síncrono.
Isto quer dizer que ele executa suas funções em paralelo, sem esperar terminar alguma função primeiro para depois executar uma outra.

Muitas das vezes, isso não nos causa nenhum impacto, mas em alguns casos, precisamos esperar o resultado de uma determinada função para que assim possamos seguir em diante do nosso código.

Para isso, precisaríamos então que essa nossa função se transforme em uma função assíncrona. Mas como?

Vamos considerar um cenário onde precisamos calcular um determinado número, armazena em um array e depois exibimos ele.
Começamos criando nossa estrutura inicial:

1
2
3
4
5
6
7
8
9
10
11

const aluno = [];

function calcStudent() {
aluno.push({nome: "Victor", nota: 7}, {nome: "Lo Ruanda", nota: 9});
}

function showStudentResult() {
calcStudent();
console.log(aluno);
}

Nessa função, o Javascript fará o console.log antes mesmo de terminar o push dentro da função calcStudent.
Precisamos garantir então que o console.log deve esperar que a função de calcular foi terminada para assim exibir!

Para isso, usaremos o Promise!

A primeira coisa que devemos fazer é transformar a função calcStudent em async e informaremos que queremos que o Javascript espere a resolução dessa variável.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const aluno = [];

// Adicionamos 'async'
// no começo da função
async function calcStudent() {
aluno.push({nome: "Victor", nota: 7}, {nome: "Lo Ruanda", nota: 9});
await Promise.resolve(aluno);
}

// Nesta função, a função agora
// nos permite 'esperar' o
// resultad
function showStudentResult() {
calcStudent().then(() => {
console.log(aluno);
};
}

Dessa forma, esperamos a função se resolver para que possamos exibir o resultado!
Também poderíamos fazer como retorno da função, da seguinte maneira:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Colocamos o await no retorno
async function calcStudent() {
const aluno = [];
aluno.push({nome: "Victor", nota: 7}, {nome: "Lo Ruanda", nota: 9});
return await Promise.resolve(aluno);
}

// Acessamos o retorno da função
// através do response
function showStudentResult() {
calcStudent().then((response) => {
console.log(response);
};
}

Essa abordagem nos permite transformar funções síncrona em assíncrona, o que é, em alguns casos, muito útil!