Synchronous vs Asynchronous JavaScript

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.