I was running firebase when I saw a strange behavior which I am unable to understand. My html looks like this:

<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-firestore.js"></script>
<script type="module">

// Import the functions you need from the SDKs you need
import { initializeApp, } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics.js";
import { getFirestore, collection, getDocs, addDoc } from 'https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore.js';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

const firebaseConfig = { ... } //firebase config
  // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    const db = getFirestore(app);
    const querySnapshot = await getDocs(collection(db, "location")); *** //await is running without async! ***
    console.log(querySnapshot)
    querySnapshot.forEach((doc, index) => { 
         // do something with doc
         *** // index always returns undefined! ***

    } 

Problem 1: Async running without await.
Problem 2: Index is undefined after reading and iterating data from firebase. Please help as I studied js for more than a year and I feel like a complete newbie now.