<h2>
  
  
  🍔 Callbacks, Promises &amp; Async-Await Explained! Using Swiggy, Zomato &amp; Food Orders
</h2>

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

<p>How?<br>
With Callbacks → Promises → Async–Await.</p>

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

<h2>
  
  
  🥡 1. Callbacks - “Call me back when the food arrives”
</h2>

<p>Think of this situation:</p>

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

<blockquote>
<p>“When the food is ready, call me back.”</p>
</blockquote>

<p>This is a <strong>callback</strong> - you pass a function that should run later.</p>

<p>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.</p>

<p><strong>📌 Callback Example in Code</strong><br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><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(() =&gt; {
    console.log("Food is ready! 🍱");
    callback();
  }, 2000);
}

orderFood(() =&gt; {
  console.log("Food delivered! Enjoy 😋");
});
</code></pre>

</div>



<p>⭐ Problem</p>

<p>Callbacks seem okay… but as tasks grow:</p>

<ul>
<li>Order food</li>
<li>Track order</li>
<li>Notify delivery boy</li>
<li>Update payment</li>
<li>Send invoice</li>
<li>etc…</li>
</ul>

<p>It becomes Callback Hell → nested, messy code.</p>

<h2>
  
  
  🧩 2. Promises - “Your order is confirmed &amp; will be delivered!”
</h2>

<p>Promises were created to fix callback hell.</p>

<p>A promise is like the Swiggy app telling you:</p>

<blockquote>
<p>“Your food will be delivered.<br>
You don’t need to ask again.<br>
Just use <code>.then()</code> when it arrives.”</p>
</blockquote>

<p><strong>📌 Promise Example</strong><br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>function orderFood() {
  return new Promise((resolve, reject) =&gt; {
    console.log("Order placed... 🕒");

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

orderFood()
  .then(msg =&gt; console.log(msg))
  .catch(err =&gt; console.log(err));
</code></pre>

</div>



<p><strong>⭐ Promise Advantages</strong></p>

<ul>
<li>Cleaner than callbacks</li>
<li>Errors handled using .catch()</li>
<li>No nested pyramids</li>
<li>Values flow beautifully</li>
</ul>

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

<p><strong>Async–Await</strong> is the most beautiful layer on top of Promises.</p>

<p>When Swiggy shows:</p>

<blockquote>
<p>“Food is being prepared…<br>
Delivery partner assigned…<br>
Arriving in 10 mins…”</p>
</blockquote>

<p>You can wait for the order with clean readable steps.</p>

<p><strong>Async–await</strong> lets JavaScript pause a function until the promise settles.</p>

<p><strong>📌 Async–Await Example</strong><br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>function orderFood() {
  return new Promise((resolve) =&gt; {
    console.log("Order placed... 🕒");
    setTimeout(() =&gt; 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();
</code></pre>

</div>



<p>⭐ Why async–await is better?</p>

<ul>
<li>Looks like synchronous code</li>
<li>No <code>.then()</code> chaining</li>
<li>Error handling becomes cleaner with <code>try–catch</code>
</li>
</ul>

<h2>
  
  
  🧠 4. Under the Hood - Async–Await is just Promises
</h2>

<p>This is the part most beginners miss:</p>

<blockquote>
<p>Async-Await does NOT replace Promises.<br>
It is built ON TOP OF Promises.</p>
</blockquote>

<p><strong>Internally:</strong></p>

<ul>
<li>await pauses the function</li>
<li>JavaScript lets other tasks run</li>
<li>When the promise resolves → execution resumes</li>
</ul>

<p><strong>Same as:</strong></p>

<blockquote>
<p>“Wait for the delivery update while doing other things.”</p>
</blockquote>

<p><strong>📌 Proof (async function returns a Promise)</strong><br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>async function hello() {
  return "Hi!";
}

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

</code></pre>

</div>



<p>Even when you don’t write a promise, async makes one.</p>

<h2>
  
  
  🛠 5. Real-world Example - Fetching API
</h2>

<p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F12wyhac0wtc4gpqgj08x.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F12wyhac0wtc4gpqgj08x.png" alt="An infographic for Async functions in Js" width="800" height="533"></a></p>

<p><strong>Using Callback (old &amp; ugly)</strong><br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>getUser((data) =&gt; {
  getPosts(data.id, (posts) =&gt; {
    getComments(posts[0], (comments) =&gt; {
      console.log(comments);
    });
  });
});
</code></pre>

</div>



<p><strong>Using Promises</strong><br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>getUser()
  .then(user =&gt; getPosts(user.id))
  .then(posts =&gt; getComments(posts[0]))
  .then(console.log);

</code></pre>

</div>



<p><strong>Using Async–Await (cleanest)</strong><br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>async function showComments() {
  const user = await getUser();
  const posts = await getPosts(user.id);
  const comments = await getComments(posts[0]);
  console.log(comments);
}

showComments();

</code></pre>

</div>



<p><strong>This is why async–await dominates modern JavaScript.</strong></p>

<div class="table-wrapper-paragraph"><table>
  <thead>
    <tr>
      <th>JS Feature</th>
      <th>Food Analogy</th>
      <th>What it Solves</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Callbacks</td>
      <td>“Call me when ready”</td>
      <td>Basic async</td>
    </tr>
    <tr>
      <td>Promises</td>
      <td>“Order confirmed → Track in app”</td>
      <td>Avoid callback hell</td>
    </tr>
    <tr>
      <td>Async–Await</td>
      <td>“Clean step-by-step tracking”</td>
      <td>Most readable async code</td>
    </tr>
  </tbody>
</table></div>

<blockquote>
<p>Mastering this trio makes backend dev, API-fetching, and Express work MUCH easier.</p>
</blockquote>

<p><strong>❤️ Written By</strong></p>

<blockquote>
<p>Applexity</p>
</blockquote>

يشرح المقال جافا سكريبت غير المتزامن باستخدام سياق مألوف يتمثل في طلب الطعام من سويغي وزوماتو. يبرز كيف تعمل جافا سكريبت على خيط واحد، لكنها قادرة على التعامل مع مهام متعددة مثل استرجاع واجهات برمجة التطبيقات وقراءة الملفات دون تجميد التطبيقات. يتم تقديم مفاهيم الاستدعاءات، والوعود، وasync-await، مع تعريف الاستدعاءات على أنها وظائف تُمرر إلى وظائف أخرى ليتم تنفيذها لاحقًا. يهدف المقال إلى توضيح هذه المفاهيم من خلال تشبيه توصيل الطعام، مما يسهل على القراء فهم البرمجة غير المتزامنة في جافا سكريبت.

El artículo explica el JavaScript asíncrono utilizando el contexto familiar de pedir comida a través de Swiggy y Zomato. Destaca cómo JavaScript opera en un solo hilo, pero puede manejar múltiples tareas como la recuperación de APIs y la lectura de archivos sin congelar las aplicaciones. Se introducen los conceptos de callbacks, promesas y async-await, definiendo los callbacks como funciones que se pasan a otras funciones para ser ejecutadas más tarde. El artículo tiene como objetivo aclarar estos conceptos a través de la analogía de la entrega de comida, facilitando así la comprensión de la programación asíncrona en JavaScript.

L'article explique le JavaScript asynchrone en utilisant le contexte familier de la commande de nourriture via Swiggy et Zomato. Il souligne comment JavaScript fonctionne sur un seul fil tout en pouvant gérer plusieurs tâches comme la récupération d'APIs et la lecture de fichiers sans bloquer les applications. Les concepts de callbacks, promesses et async-await sont introduits, avec les callbacks définis comme des fonctions passées à d'autres fonctions pour être exécutées plus tard. L'article vise à clarifier ces concepts à travers l'analogie de la livraison de nourriture, facilitant ainsi la compréhension de la programmation asynchrone en JavaScript.

The article explains asynchronous JavaScript using the relatable context of ordering food from Swiggy and Zomato. It highlights how JavaScript operates on a single thread yet can handle multiple tasks like fetching APIs and reading files without freezing applications. The concepts of callbacks, promises, and async-await are introduced, with callbacks defined as functions passed to other functions to be executed later. The article aims to clarify these concepts through the analogy of food delivery, making it easier for readers to understand asynchronous programming in JavaScript.

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

Was this article worth reading? Share it

Ready to build your own newsroom?