Event-driven programming

The event loop is a process that waits for the Call Stack to be clear before pushing callbacks from the Task Queue to the Call Stack. Once the Stack is clear, the event loop triggers and checks the Task Queue for available callbacks. If there are any, it pushes it to the Call Stack, waits for the Call Stack to be clear again, and repeats the same process. We have the call stack, the web API, and the task Queue.

• Call stack executes all the synchronous operations from the code from the last added.

• Asynchronous operations are handled by the Web API, when they are resolved they are pushed in order to the task Queue.

• When the call stack is clear gets the resolved async operations in the task Queue in the order they were pushed previously.

https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

function getUserEmail(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('[e-mail]');
        }, 1000);
    })
} 

function printUserEmail(): void {
    console.log('Printing...'); // Normal op
    getUserEmail().then(res => { // async op
        console.log(`The user email is: ${res} `);
    });
    console.log("User printed"); // Normal op
}

printUserEmail();

Let us see now a different example with async and await

function getUserEmail(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('[e-mail]');
        }, 0);
    })
}

async function printUserEmail(): Promise<string> {
    console.log('Printing...'); // Normal op
    const userEmail = await getUserEmail();
    console.log("User printed", userEmail); // Normal op
    return userEmail;
}

printUserEmail();