Part-1
Today, I learned about Callbacks in JavaScript from FreeCodeCamp using a fun ice cream making example.
Before learning callbacks, I first understood the difference between Synchronous and Asynchronous operations with simple examples.
Synchronous Operations: Tasks are executed one after another. The next task waits until the current task is completed.
Asynchronous Operations: Some tasks take time to complete, so JavaScript doesn't wait for them. Instead, it continues executing the remaining code while the long-running task is processed in the background.
These concepts helped me understand why callbacks are needed in JavaScript. Below, I have included the examples I used to explain synchronous and asynchronous operations, followed by the ice cream example that demonstrates how callbacks work.
Synchronous vs Asynchronous JavaScript
What is a Synchronous System?
In a synchronous system, tasks are completed one after another.
Think of this as if you have just one hand to accomplish 10 tasks. So, you have to complete one task at a time.
Imagine people standing in a queue at a restaurant.
The first customer places their order. Only after the restaurant staff finishes taking the first customer's order does the next customer get a chance to order. Everyone else in the queue has to wait for their turn.
Each customer is served one by one, and the next person's order cannot be taken until the previous person's order is completed.
This is exactly how synchronous operations work in JavaScript: tasks are executed sequentially, and each task waits for the previous one to finish before starting
Well, JavaScript is by default Synchronous [single threaded]. Think about it like this – one thread means one hand with which to do stuff.
What is an Asynchronous System?
In this system, tasks are completed independently.
Here, imagine that for 10 tasks, you have 10 hands. So, each hand can do each task independently and at the same time.
Example:
Imagine you put your clothes into a washing machine and start it.
The washing machine takes about 30 minutes to finish washing. Instead of standing there and waiting, you use that time to clean your room, watch TV, or cook.
When the washing machine finishes, it beeps, and you go back to take out your clothes.
Similarly, in JavaScript, some tasks take time to complete. Instead of waiting, JavaScript continues executing other tasks. Once the long-running task is finished, it notifies the program through a callback, Promise, or async/await.
To Summarize Synchronous vs Asynchronous JS:
When three images are on a marathon, in a:
Synchronous system, three images are in the same lane. One can't overtake the other. The race is finished one by one. If image number 2 stops, the following image stops.
Asynchronous system, the three images are in different lanes. They'll finish the race on their own pace. Nobody stops for anybody:
Synchronous and Asynchronous Code Examples
To test a synchronous system, write this code in JavaScript:
result :
Asynchronous code example
Let's say it takes two seconds to eat some ice cream. Now, let's test out an asynchronous system. Write the below code in JavaScript.
Result :
Now that you know the difference between synchronous and async operations, let's build our ice cream shop.
Top comments (0)