Understanding Asynchronous JavaScript: Why Your Array Is Empty?

const worker = (delay) =>
  new Promise((resolve) =>
    setTimeout(() => resolve(`Finished ${delay}`), delay)
  );

async function run() {
  let results = [];
  let items = [2, 10, 2];

  for (let i = 0; i < items.length; i++) {
    const data = await worker(items[i]);
    results.push(data);
  }

  console.log("Final results:", results);
}

run();

The Confusion

• Inside the callback → results contains data

• Outside the callback → results is still []

---

The Real Reason: Asynchronous Execution

The key lies in this line:

setTimeout(...)

setTimeout is asynchronous.

That means:

• The for loop runs immediately.

• The callback runs later.

• JavaScript does NOT wait for it.

---

How JavaScript Actually Works

JavaScript:

• Is single-threaded

• Uses the Event Loop

• Sends setTimeout to Web APIs

• Pushes callback to Callback Queue

• Executes it when Call Stack is empty

So your loop finishes before any timeout completes.

---

Final Takeaway

If you remember just one thing from this blog:

The loop runs synchronously.
setTimeout runs asynchronously.
JavaScript does NOT wait unless you tell it to.