Forem: Applexity.Ox

Async JS Explained Using Swiggy, Zomato & Food Orders 😋🍴

Applexity.Ox — Sat, 15 Nov 2025 23:15:36 +0000

🍔 Callbacks, Promises & Async-Await Explained! Using Swiggy, Zomato & Food Orders

JavaScript runs on a single thread, yet it somehow manages to fetch APIs, read files, hit databases, and return responses without freezing your app.

How?
With Callbacks → Promises → Async–Await.

And today, we’ll understand these three using something we ALL can relate to: 👉 Ordering food from Swiggy/Zomato.

🥡 1. Callbacks - “Call me back when the food arrives”

Think of this situation:

You order food online.
You can't stand in front of the restaurant and wait.
So you tell them:

“When the food is ready, call me back.”

This is a callback - you pass a function that should run later.

PS: If you don't have node js installed in your local computer, feel free to use replit in your browser to run the codes snippets mentioned in this blog XD.

📌 Callback Example in Code

function orderFood(callback) {
  console.log("Order placed... waiting for restaurant 🕒");

  // Simulating a delay of 2 seconds to cook the order (just for example, otherwise we've to wait for few minutes practically hehe)
  setTimeout(() => {
    console.log("Food is ready! 🍱");
    callback();
  }, 2000);
}

orderFood(() => {
  console.log("Food delivered! Enjoy 😋");
});

⭐ Problem

Callbacks seem okay… but as tasks grow:

Order food
Track order
Notify delivery boy
Update payment
Send invoice
etc…

It becomes Callback Hell → nested, messy code.

🧩 2. Promises - “Your order is confirmed & will be delivered!”

Promises were created to fix callback hell.

A promise is like the Swiggy app telling you:

“Your food will be delivered.
You don’t need to ask again.
Just use .then() when it arrives.”

📌 Promise Example

function orderFood() {
  return new Promise((resolve, reject) => {
    console.log("Order placed... 🕒");

    setTimeout(() => {
      const cooked = true;
      if (cooked) resolve("Food delivered! 😋");
      else reject("Restaurant closed 😭");
    }, 2000);
  });
}

orderFood()
  .then(msg => console.log(msg))
  .catch(err => console.log(err));

⭐ Promise Advantages

Cleaner than callbacks
Errors handled using .catch()
No nested pyramids
Values flow beautifully

⚡ 3. Async–Await - “Track your order like a King 😎”

Async–Await is the most beautiful layer on top of Promises.

When Swiggy shows:

“Food is being prepared…
Delivery partner assigned…
Arriving in 10 mins…”

You can wait for the order with clean readable steps.

Async–await lets JavaScript pause a function until the promise settles.

📌 Async–Await Example

function orderFood() {
  return new Promise((resolve) => {
    console.log("Order placed... 🕒");
    setTimeout(() => resolve("Food delivered! 😋"), 2000);
  });
}

async function trackOrder() {
  console.log("Tracking started… 👀");

  const result = await orderFood(); // waits here
  console.log(result);

  console.log("Order completed!");
}

trackOrder();

⭐ Why async–await is better?

Looks like synchronous code
No .then() chaining
Error handling becomes cleaner with try–catch

🧠 4. Under the Hood - Async–Await is just Promises

This is the part most beginners miss:

Async-Await does NOT replace Promises.
It is built ON TOP OF Promises.

Internally:

await pauses the function
JavaScript lets other tasks run
When the promise resolves → execution resumes

Same as:

“Wait for the delivery update while doing other things.”

📌 Proof (async function returns a Promise)

async function hello() {
  return "Hi!";
}

hello().then(console.log);  // prints "Hi!"

Even when you don’t write a promise, async makes one.

🛠 5. Real-world Example - Fetching API

Using Callback (old & ugly)

getUser((data) => {
  getPosts(data.id, (posts) => {
    getComments(posts[0], (comments) => {
      console.log(comments);
    });
  });
});

Using Promises

getUser()
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0]))
  .then(console.log);

Using Async–Await (cleanest)

async function showComments() {
  const user = await getUser();
  const posts = await getPosts(user.id);
  const comments = await getComments(posts[0]);
  console.log(comments);
}

showComments();

This is why async–await dominates modern JavaScript.

JS Feature	Food Analogy	What it Solves
Callbacks	“Call me when ready”	Basic async
Promises	“Order confirmed → Track in app”	Avoid callback hell
Async–Await	“Clean step-by-step tracking”	Most readable async code

Mastering this trio makes backend dev, API-fetching, and Express work MUCH easier.

❤️ Written By

Applexity

🚦 Understanding the JavaScript Event Loop: A Story You’ll Remember

Applexity.Ox — Fri, 07 Nov 2025 21:22:10 +0000

The first time I saw this little piece of code, I was confused:

console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

console.log("End");

And the output was:

Start  
End  
Timeout

Wait… why “Timeout” after “End”? Didn’t I set the delay to 0? For me, that was the moment I realized JavaScript has its own rhythm. It doesn’t just run line by line - there’s an invisible system deciding when things happen. That system is called the event loop.

🛑 The Call Stack : Our One-Lane Road

Imagine you’re standing at a traffic signal on a narrow one-lane road. Only one car can pass at a time. Each car waits for the one in front to move before it can go. That’s exactly how JavaScript works with its call stack.

When you call a function in JavaScript, it’s like a car entering that road. The engine pushes the function onto the call stack. When the function is done, the car exits, making way for the next one.

So if I write:

function greet() {
  console.log("Hello");
}
greet();
console.log("Done");

It’s just cars moving in order: greet() enters, prints “Hello”, exits, then “Done” runs. Nothing surprising here. But what if one car is a giant truck that takes forever to pass?

🚛 The Blocking Truck

Let’s say one day, instead of a small car, a giant truck pulls up to the one-lane road. It takes forever to move. Now, all the other cars behind it are stuck waiting. That’s what happens when we run heavy code in JavaScript.

function bigTask() {
  for (let i = 0; i < 1e9; i++) {} // long loop
  console.log("Big task done");
}
bigTask();
console.log("Next task");

Here, the loop is that giant truck. Until it finishes, JavaScript can’t do anything else - not even respond to your clicks. This is called blocking.

🚦 Helpers on the Side Road - Web APIs

Of course, if every long task blocked the road, the city (or the browser) would fall apart. That’s why the browser provides helpers, also known as Web APIs. They can take certain jobs off the main road and handle them separately.

Think of it like side roads with extra workers: one worker handles timers, another fetches data from the internet, another listens to clicks.

When you use something like setTimeout, you’re not asking JavaScript itself to wait. You’re handing that task to a helper on the side road.

console.log("Start");
setTimeout(() => console.log("Pizza ready!"), 2000);
console.log("End");

Here’s what happens:

JavaScript logs “Start”.
It sees setTimeout, tells a helper: “Set a 2-second timer, and when you’re done, let me know.” Then it moves on.
It logs “End” immediately, without waiting.
Two seconds later, the helper finishes and says, “Pizza ready!”

This way, the main road is never blocked.

🚌 The Queue at the Bus Stop

Now here’s the catch: when helpers finish their work, they don’t just cut into traffic. Imagine if someone tried to shove their car right into the one-lane road while others were driving - chaos!

Instead, completed tasks go wait at a bus stop called the task queue. The event loop is like a traffic conductor who keeps asking:
“Is the road empty yet? Okay, let the next one from the bus stop in.”

That’s why even setTimeout(fn, 0) doesn’t run instantly. It’s not that JavaScript is slow - it’s just that the callback is patiently waiting its turn at the bus stop.

🎟️ VIPs in the Fast Lane : Microtasks

But every city has VIPs, right? In JavaScript, those VIPs are promises. They don’t wait at the normal bus stop. Instead, they get their own VIP queue called the microtask queue.

The event loop always gives priority to VIPs. No matter how many regular buses (setTimeouts) are waiting, if there’s even one VIP standing by, they get in first.

console.log("Start");

setTimeout(() => console.log("Regular task"), 0);

Promise.resolve().then(() => console.log("VIP task"));

console.log("End");

The output here is:

Start  
End  
VIP task  
Regular task

Even though the timeout had zero delay, the promise callback cut in line because microtasks always run before macrotasks.

📱 Async/Await – Ordering Food Delivery

Finally, let’s talk about async/await. Think of it like ordering food online. You place an order and then go about your life - scroll Instagram, reply to texts. When the delivery guy shows up, you pause, grab the food, and continue.

async function orderFood() {
  console.log("Placing order...");
  await new Promise(r => setTimeout(r, 2000));
  console.log("Food delivered!");
}
orderFood();
console.log("Chatting meanwhile...");

The output is:

Placing order...  
Chatting meanwhile...  
Food delivered!

That’s the beauty of await: it pauses only inside that function, without freezing the entire program.

📝 Wrapping It Up

The event loop isn’t magic. It’s just a system that makes sure JavaScript doesn’t freeze when doing multiple things at once.

The call stack is the one-lane road.
Heavy tasks are trucks that block it.
Web APIs are helpers with side roads.
Finished work waits at the task queue (bus stop).
Promises go to the microtask queue, a VIP lane.
The event loop is the conductor making sure traffic flows smoothly.

So next time your setTimeout(fn, 0) feels “late”, remember - it’s just waiting for the road to clear.

Happy Coding :) If you liked my content - do share it with others

I became Microsoft Learn Student Ambassador & you can do it too - here's how :)

Applexity.Ox — Tue, 26 Aug 2025 23:42:42 +0000

Communities

Ever heard of technical communities ? their initiatives about educating people around ? If yes, That's where my community journey started while i was writing few lines of codes, solving problems in general. If you've not heard of it yet You're always welcomed. In short Technical Communities are the group of people who come together to learn, build & share their expertise to upskill others by means of hosting various events, sessions, workshops & last but not the least ""Hackathons"" ...

I started my community contribution journey from the very start of my B.Tech First Semester, where I joined college clubs, Google Developers Student Club. Then I continued Upskilling my self in the Web & App Domain. Since I was beginners few open source communities inspired to me learn more about tech. Later I got to volunteer for my First Ever Tech Event that Successfully hosted over 230+ members. This is where my Community Journey Interest boomed. Imagine hundreds or any number of people are gathered from different parts of your city or maybe from another city just to learn from experts, they network & take away many memories, friends & of course lot of Swags like those cool looking stickers to pamper your inner child :) haha, Refreshments too. Those few hours of learning, building & meeting new people gives a different vibe all together. We got to learn & implement lot of new ideas that our amazing expert speakers shares.

That was the day I decided that I'll contribute to communities more often. Then I kept myself going in that path & continued to Upskill myself & help other as well. I then came across MLSA Program which is inspiring for many community leaders as well.

I applied for the program, via a referral from one of our university's tech community leader. He's truly inspiring & a great software engineer. My skillset and community led mindset helped me to show my leadership. I applied in November of 2023, & Got my Acceptance in the Microsoft Learn SA Community Program in January of 2024. I Huge Shoutout to our community messiah "Pablo" Sir from MLSA Family. He's our heart & soul for the MLSA Community.

MLSA program comes with three levels that consists of numerous benefits, opportunities & resources. You gets Level - Up one by one from ""New MLSA"" to ""Beta MLSA"" and then the highest level ""GOLD MLSA"" Benefits grows. You can checkout their individual perks & Apply for your application here : https://mvp.microsoft.com/studentambassadors

Attaching a pic of the swags that came from USA from Microsoft to motive you :)

Yes! You can also become a Microsoft learn Student Ambassador, here's how!

Microsoft Learn Student Ambassador (MLSA) program looks for candidates who are not just good at coding, but who can also create impact in their community. Here are the main qualities they focus on:

🔑 Key Qualities MLSA Looks For

Community Building Spirit 🤝

Do you genuinely enjoy teaching, mentoring, and helping peers learn tech?

Have you organized or contributed to events, meetups, workshops, or communities

Passion for Technology 💻

You don’t need to be an expert in everything, but you should show eagerness to learn new technologies.

Knowledge/experience with Microsoft technologies (Azure, Power Platform, GitHub, etc.) is a bonus, but not mandatory.

Leadership & Initiative 🚀

Can you take charge of projects/events?

Do you step up to solve problems instead of waiting for someone else?

Communication Skills 🗣️

They want student leaders who can explain technical concepts clearly to beginners.

Good writing (blogs, tutorials) + speaking (sessions, workshops) skills matter a lot.

Consistency & Dedication 📅

Are you someone who starts something and actually carries it forward?

Many apply, but Microsoft selects those who will consistently contribute throughout their term.

Impact-Oriented Mindset 🌍

What’s your vision as an MLSA? How will you empower students around you?

Your application should reflect a clear purpose (not just “for the badge/LinkedIn”).

Apply here: https://mvp.microsoft.com/studentambassadors

Wishing you a very good luck! In case you've questions for me, please feel free to share.

Happy Coding,
Applexity :)