Visualising the JavaScript Event Loop with a Pizza Restaurant analogy
Tags: javascript, eventloop
Published: 2018-04-10 17:44:26

---
title: Visualising the JavaScript Event Loop with a Pizza Restaurant analogy
published: true
description: Explains JavaScript event loop using an example
tags: JavaScript, eventloop
---

Consider a **pizza** restaurant.
There are two types of orders that we currently have from a single customer - one is an elaborate order, that requires a pizza with an olive topping(1), a cheese filling(2), and a large base(3). 
The other one is just a simple one, mayonnaise(a) with garlic bread(b).

The **chef** on receiving the order starts making the first pizza, by taking a large base(3), adding the filling inside it(2), and then adding the olive toppings(1). 
The same chef also has to make garlic bread. The **manager** suddenly realizes that the restaurant is completely out of mayonnaise. The manager adds the 'get mayonnaise' **task** to a **chart** and sends the only available **errand boy** to go fetch some.

Technically, if orders were to be taken together and delivered together, the customer would have to wait until an errand boy goes to a supermarket five blocks away, get the mayonnaise, and give it to the cook for completing the order. But this is a restaurant, and customers don't need to have the entire order delivered to them all at once.
 
The chef decides to continue making the pizza, bakes it and sends it to the customer. 
When that is done, the errand boy arrives with the mayonnaise, and the cook takes some garlic bread(b), adds the mayonnaise(a) on top, and delivers it to the customer.

**What did we learn about Javascript here?**

- The customer's _orders_(make Pizza + make GarlicBread) are the **functions** in JavaScript code.
- The order _details_ are simply about how to customize the pizza and the bread, and they can be treated as functions called inside of make Pizza - and the order is taken from top to bottom - the toppings, the filling, and the size. These details are basically a representation of the **call-stack**, that executes all of these events in reverse order.
- The _absence of mayonnaise_ from the restaurant - that was an **Event** that got triggered and called an **asynchronous function**, that was to fetch the mayonnaise from a supermarket.
Since the restaurant doesn't need to send the entire order together, they complete the tasks in the **call stack** in a reverse order, as implied above in the story.
- The _manager_ here is the **event table** - his job is to keep track of all the mishaps(Events) that happen, in a chronological order.
- The _errand boy_ is the **event queue**, that is, if he is already asked to fetch something and a new item is requested, the item has to wait until the errand boy fetches the old item.
- The _chef_ is the **event loop**, that is continuously making the orders(executing all the functions).
- The _restaurant_ is a **browser**, that doesn't need to freeze until all the content is loaded and doesn't need to wait for other things to complete before one is completed.(No need of serving the entire order together)


So in essence, the **event loop** checks if the **call stack** is empty, and if so, looks into the **event queue**. If there is something in there, it adds it to the call stack and executes it. The event loop constantly runs until their shift is over(browser content is loaded/ browser is closed). The **event table** keeps track of all the **events** that have been triggered and sends them to the event queue to be executed.

This was my attempt at explaining the event loop, let me know if you found this analogy interesting!