Javascript firebase functions are not executed in defined order

I have a website that utilises google firebase – firestore database. I have certain functions that get data from firestore and displays the data on the website on page load.

all_data = [];

//Get all documents in collection
function getAllDocuments() {
  console.log('getAllDocuments() executed');
  db.collection("All data").get().then((querySnapshot) => {
    console.log('Getting documents from firestore...');
    querySnapshot.forEach((doc) => {
      //Creating object
      data_t = new dbData;
      all_data.push(data_t);
    });
  });
  console.log('All data:', all_data.length);
}

//Display documents
function displayDocuments(data) {
  console.log('displayDocuments() executed');
  //Other lines of code
}

//Functions to run on page load
function pageLoad() {
  getAllDocuments();
  displayDocuments(all_data);
}
window.onload = pageLoad;

However, the functions are executed before data is retrieved from firebase. So, my website loads as an empty page. I have to execute the displayDocuments() again to display the data on the screen.
I understand the problem behind this. The webpage is not getting my documents from firebase on page load. Even though pageLoad() executes getAllDocuments(), it skips the db.collection.get() initially. This method is executed only after window.onload is executed, that is, after all my pageLoad() are executed. My console output looks like

getAllDocuments() executed
All data: 0
displayDocuments() executed
Getting documents from firestore…

Does anyone know why db.collection.get() is not executed in the defined order? How db.collection().get() gets executed at the end without getAllDocuments() being called?

Answer

The reason why this is happening is because your getAllDocuments function finishes its execution before the promise could resolve.

What you can do is make getAllDocuments async and wait for promise to resolve using await, and call it from pageLoad() function using await. i.e

all_data = [];

async function getAllDocuments() {
    console.log('getAllDocuments() executed');
    const querySnapshot = await db.collection("All data").get();
    querySnapshot.forEach((doc) => {
      //Creating object
      data_t = new dbData;
      all_data.push(data_t);
    });
    console.log('All data:', all_data.length);
}

async function pageLoad() {
  await getAllDocuments();
  // displayDocuments(all_data);
}