Synchronous VS Asynchronous JS

You have definitely seen promises, async-await , callbacks in javascript. But have you questioned yourself why we need them. What functionality they provide?

Let's understand both Synchronous behavior and Asynchronous behavior of Javascript.

Synchronous Code

Synchronous Code means that code which executes line by line. Second line of code cannot execute until first line has executed.

Javascript is a single threaded language which run on main thread. It means the system process one line at a time.

Now, synchronous code is that code which executes line by line, example

function two(){
    console.log("2")
}
console.log("1")
two()
console.log("3")

---------------------------------------------------------
OUTPUT:
1
2
3

Everything executed in order 1 -> two() -> 3. This is synchronous code

Internally What Happened

1. The main thread read the first line of code from where the execution starts and logged 1.

2. Then inside Call Stack (Stack who tracks function calls) function two was pushed and then it executes two() and logged 2.

3. Then 3 was logged.

Asynchronous Code

Asynchronous code means that code which do not follow the rule of line by line processing.

Think of some heavy time taking tasks like data fetching from another continent, Cryptography, FileReading from the system, they are the tasks which takes time to executes.

Now What Async code do here it executes the line and move to next line without waiting for previous line. Whenever the previous line completes its execution then the JS show output. Example

function two(){
    console.log("2")
    setTimeout(() => {
        console.log('3')
    }, 2000)
}
console.log("1")
two()
console.log("4")

--------------------------------------------------------
OUTPUT:
1
2
4
3

Here the order is gone

Internally What Happened

1. Execution Starts from 1. Logged 1.

2. Then Two was pushed into CallStack and there stack saw log 2, so 2 was logged.

3. Then it saw Timeout for 2 sec, means this code will execute after 2 sec.

4. JS moves ahead and logged 4.

5. Then after 2 sec 3 was logged.

Note JS didn't wait for timeout to complete it moved ahead and executed rest of the code.

Why JavaScript needs Async Behavior?

By default JS is a synchronous language, but it depends on the environment in which it is getting executed like browser and NodeJS they also provide features to Javascript to execute itself asynchronously. NodeJS have libuv which have thread pool to execute task simultaneously. Now lets understand why we wants JS to behave asynchronously.

Imagine a scenario where you want to run a query in the database.

[REMEMBER]: Always assume that Database server is in another continent.

Now, first the query will go the another continent where the DB server is prese, then DB will find data by running that query (imagine it is a big query) then the data will be send from that continent to your place. This will take time. And their are going to be so many of such query happening from your end to the application server.

Now if we wait for the query to execute our whole system will wait until that query gets executed. No new request will be handled by the server. This can lead to crash.

To prevent our application from such scenario we need async behavior.

---

Synchronous Behavior:

Asynchronous Behavior:

Conclusion

JavaScript may appear simple on the surface, but its execution model is what makes it powerful and scalable. While synchronous code ensures predictable, step-by-step execution, it becomes a bottleneck when dealing with real-world tasks like network requests, file operations, or database queries. Asynchronous behavior solves this by allowing JavaScript to remain non-blocking, ensuring that the application continues to respond even when time-consuming operations are in progress. Concepts like callbacks, promises, and async-await are not just syntax—they are essential tools that enable this behavior. Understanding when and why to use them is key to writing efficient, performant, and production-ready JavaScript applications.