In the following code, the 'Hey, timeout executed!' is only printed after the loop in the longLoop function is finished.

setTimeout(() => console.log('Hey, timeout executed!'), 100);

let longLoop = async () => {
    for (i = 0; i < 1000000000; i++) {
    }
}

let exec = async () => {
    await longLoop();

    console.log('Loop finished')

}

exec()

However, when I change the longLoop to have an await inside it, the 'Hey, timeout executed!' will print as soon as the await in the loop is reached, like in the following:

setTimeout(() => console.log('Hey, timeout executed!'), 100);

let longLoop = async () => {
    for (i = 0; i < 1000000000; i++) {
        await new Promise(r => setTimeout(r, 100));
    }
}

let exec = async () => {
    await longLoop();

    console.log('Loop finished')

}

exec()

Why does in the first example the event loop seems to be blocked even if I call the longLoop from the exec using an await? And why it doesn't get blocked in the second example just by using an await inside the loop?

I'm just starting in JavaScript, so I thought that just by a function being async and being called with an await inside another async function, it would be executed in a way that the event loop would not be blocked. Due to that, I'm having kinda a hard time to understand the flow of execution.