Synchronous vs Asynchronous JavaScript

Learning web development in public. Writing simple, real-world explanations about web development concepts. Helping beginners understand why things work, not just how.
Search for a command to run...

Learning web development in public. Writing simple, real-world explanations about web development concepts. Helping beginners understand why things work, not just how.
No comments yet. Be the first to comment.
Every day, millions of users upload photos, videos, stories, and reels to Instagram. From a user's perspective, the process appears simple: select media, apply filters, add a caption, and tap "Post."
Building Offline-First Messaging Apps: How Messages Work Without Internet Modern messaging applications have transformed the way people communicate. Whether it's chatting with friends, collaborating w
In this article we'll explore about the Expo Router and React Navigation and answer which one to use in 2026. If you build mobile apps using React Native, one thing becomes obvious very quickly: Navig

Modern mobile apps are no longer just a collection of screens connected together. Apps like Instagram, WhatsApp, Uber, and Netflix operate at massive scale with millions of users, real time systems, o
In this article we'll be exploring react.js and the things of react.js that makes it popular and stand out among other libraries ( no fight over library vs framework ). We'll go through: What problem

Shkaai
68 posts
JavaScript has this amazing concept of Synchronous and Asynchronous (one of the reason why it's so popular out there). If you haven't heard of them before or even if you have heard of them but do not have clarity than you are at the write blog. We'll learn about them with simple explanation and examples. So let's go.
Synchronous code is that code which runs line by line - one code at a time. Think of this as a road highway where each vehicle is a set of code that goes one by one.
console.log("Start");
const user = "Sammy"
if( user === "Sammy){
console.log("Hello");
}
console.log("End");
So try to predict the execution order of the above code, how would it go ? of course one by one.
Now then, so what is asynchronous code ? Well it is the code which does not wait wait for another code to execute first. Think of asynchronous as the peddlers on the side way path on a road. People walk on there own pace without waiting for others to move ahead.
In JavaScript those people( I mean to say concept) are:
Promises: : Objects representing the eventual completion or failure of an asynchronous operation. They can be in three states: Pending, Fulfilled, or Rejected.
Callback: The original method where a function is passed as an argument to be executed once a task completes
Async/Await: Modern syntax introduced in ES2017 that allows asynchronous code to be written in a style that looks and behaves like synchronous code.
async: Declares that a function will return a promise.
await: Pauses the function execution until a promise is settled.
This asynchronous functionality is achieved by the core concept of:
The event loop: The engine that menages the execution of multiple scripts. It handles the Call Stack (synchronous code) and the Callback Queue (asynchronous results) to ensure tasks are processed without blocking the main thread.
Non-blocking: Unlike synchronous code that runs line-by-line, asynchronous code "starts now and finishes later," allowing the rest of the program to continue immediately.
Code example:
// a function that fetch api - a time consuming work
function async fetchApi(){
const response = await fetch("https://example.org/products.json")
const result = response .json()
}
// a timer that executes after 5 sec - again a time consuming work
setTimeout(()=> {
console.log("Hello");
}, 5000)
Now that we have an idea about the asynchronous and synchronous code we can discuss the need of them.
Imagine what would happen if we were to use promise, timer, read file etc. without asynchronous concept? Think of this as many vehicles on a highway road that ends up in a traffic. Same situation will happen with our code script without the asynchronous concept. All code would have to wait for their above code to execute first. Nothing could be more annoying than that (in this context)
So we have learned about what is asynchronous and synchronous in JavaScript.
To summarise simply:
Synchronous = wait and execute
Asynchronous = don’t wait, keep moving
Without asynchronous programming, JavaScript would become slow and inefficient, especially when handling real-world tasks like fetching data or handling user interactions.