Synchronous vs. Asynchronous Code: What's the difference?

If you’ve just started your journey into programming, you might have read that JavaScript can be executed synchronously or asynchronously, depending on how it’s written and how it interacts with other parts of a program.

Furthermore, you might have scratched your head, wondering what these terms actually mean. That’s what this article aims to explain. Let’s take a look at synchronous vs asynchronous code.

Synchronous Code

Synchronous code runs in a single thread and executes one statement at a time in the order they appear in the code. The program waits for each statement to finish executing before moving on to the next one. This means that if a function call takes a long time to complete, it will block the entire program until it’s done. This can cause performance problems if there are many long-running synchronous operations, as the program will appear unresponsive to the user.

Let’s take a look at an example of synchronous code.

function add(a, b) {
  return a + b;
}

const x = add(1, 2);
console.log(x);

In this example, the function add is a synchronous function that takes two parameters a and b and returns their sum. The next line of code assigns the result of calling the add function with arguments 1 and 2 to the variable x. Finally, the console.log statement logs the value of x to the console.

Since the code is synchronous, each line is executed in sequence, and the program blocks until the add function returns its result. The console.log statement only executes after the add function has returned its result, so the output of the program is 3.

Asynchronous Code

Asynchronous code allows multiple operations to be executed concurrently without blocking the program. This is done by using callbacks or promises to signal when an operation has completed, allowing the program to continue executing other statements while the operation is being performed. Asynchronous code is often used for operations that may take a long time to complete, such as network requests or file I/O.

Let’s take a look at asynchronous code.

console.log("Before setTimeout");

setTimeout(() => {
  console.log("Inside setTimeout");
}, 2000);

console.log("After setTimeout");

In this example, the console.log statements are executed synchronously, so the first one logs “Before setTimeout”, followed by “After setTimeout”. However, the setTimeout function is asynchronous and schedules the execution of the callback function after a delay of 2000 milliseconds (2 seconds).

As a result, the “Inside setTimeout” message is only logged after the delay has passed, even though the program continues to execute synchronously. This means that the output of the program will be:

Before setTimeout
After setTimeout
Inside setTimeout

This example demonstrates how asynchronous code can allow multiple tasks to run in parallel, improving the performance and responsiveness of a program.

Note: We wrote a more in-depth article on asynchronous code, here.

Conclusion

In summary, synchronous code executes one statement at a time in a single thread, while asynchronous code allows multiple operations to be executed concurrently without blocking the program. Asynchronous code is often used for long-running operations to avoid blocking the program, providing a better user experience.

Questions or comments? Let us know down below.