Await doesn't wait

Question

function resolveAfter2Seconds(x) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(x);
        }, 2000);
    });
}

async function f1() {
    var x = await resolveAfter2Seconds(10);
    console.log(x); 
}

f1();
let x =  3;

Why do we see the following scenario?

1. Entering the f1. Stops on await.
2. Returns from f1 (console.log(x) command doesn't execute)
3. assign 3 to x (ERROR! await skipped, js steps forward)
4. Return to f1 on line "console.log(x)". Print x.

Why JS not waiting on await and steps forward? May you give me an advice?

Answer 1

f1 is asynchronous (the await only occurs within that asynchronous context). Therefore, f1() is executed, and because it's async, the let x = 3; line executes immediately without waiting.

If you also await the call to f1(), it should do what you're expecting. However in order to use await, you must wrap that code inside another async function, and then execute that function.

Demo (no await):

function resolveAfter2Seconds(x) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(x);
        }, 2000);
    });
}

async function f1() {
    var x = await resolveAfter2Seconds(10);
    console.log(x); 
}

f1();
let x =  3;
console.log(x);

Working version (with extra await):

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x);
}

async function f2() {
  await f1();
  let x = 3;
  console.log(x);
};

f2();

Answer 2

More simpler

(async function() {

  function resolveAfter2Seconds(x) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(x);
      }, 2000);
    });
  }

  async function f1() {
    var x = await resolveAfter2Seconds(10);
    console.log(x);
  }


  await f1();
  let x = 3; 
  console.log(x);
})();