Welcome to an article which is not another guide with just syntax explanations. No, we are not going to discuss arrow functions and braces. Instead, we're set to an adventure.
The purpose of this article ? To help you understand Synchronous and Asynchronous Programming in JavaScript.
The goal is just not to introduce or teach you how it is done but tell you why is it done. It is to change the way you look at these terms. Let's start slow and simple.
Introduction
If you want to learn modern web development, you need to know how to perform dynamic operations. Whether it is connecting with other programs or software, using API, fetching data from servers, these all tasks are asynchronous in nature.
Imagine you are helping your friend Riya with completing her assignment. You both decide to divide work -
You are going to stick pictures on the left page.
She will write page numbers on the right pages.
Sticking pictures takes a bit longer, Riya pulls out all left pages and hands them over to you. Meanwhile, she swiftly writes the page numbers and waits for you to complete the task. When you are done, she puts all the pages back together and submits her assignment.
Now there are couple of points here to notice -
The whole task of submitting assignment is synchronous in nature. There is a fixed order.
But, the individual tasks you and your friend are doing are asynchronous in nature. There is no fixed order.
Why ? How ?
To submit the assignment, left pages should have pictures, right side should have page numbers, the file should be put together and then you can submit your assignment. And she has to wait for you to complete your task to finally submit her assignment. There is a sequence.
In asynchronous programming, multiple events can occur, you can stick pictures and your friend can write page numbers. This also means there is no sequence, you both do things at your speed. Riya has done her work but you are still sticking pictures.
Synchronous JavaScript
The majority of the code written in JavaScript is synchronous. Synchronous is like waiting in a line, each task waits for the one before it to finish before it can start. Understand it with a stack. If you push T3, T2, and T1 in a stack in this order, you first need to complete Task T1 to go to Task T3.
Why use Synchronous programming in JS ?
Asynchronous JavaScript
Asynchronous JavaScript is one of the main components of the language. Because it controls how we carry out tasks that are going to take time. How much time? we're not sure of. So we allow multiple events to occur altogether.
Like in the above example, we don't know how long will it take to stick pictures or write numbers so we do both tasks separately.
How do you handle Asynchronous code ?
Why use Asynchronous programming in JS ?
Synchronous Vs Asynchronous
Feature | Synchronous | Asynchronous |
Execution | Tasks run one after another, like a queue | Tasks can run concurrently, like juggling |
Blocking | Blocks the program until tasks finish, like waiting in line | Doesn't block the program, allows other tasks to run |
Responsiveness | UI might freeze while waiting | UI remains responsive while tasks run |
Complexity | Easier to understand and debug | More complex, potential for unexpected behavior |
Scalability | Not ideal for many concurrent tasks | Handles multiple tasks efficiently |
Use cases | Simple calculations, dependencies, initial page load | Network requests, user interactions, complex applications |
Examples | Adding two numbers, validating user input | Fetching data from an API, updating UI without page refresh |
This is all you need to know to sync/async inside the world of JavaScript. Now that you know basics, you should be ready to explore the exciting world of asynchronous JavaScript.