The Essentials of Asynchronous JavaScript: How It Works and Why It's Important

What & Why?

In its most basic form, JavaScript is a synchronous, blocking, single-threaded language.

1. Synchronous

• If we have two functions which log messages to the console, code executes top down, with only one line executing at any given time

2. Blocking

• No matter how long a previous process takes, the subsequent processes won't kick off until the former is completed

• If function A had to execute an intensive chunk of code, JavaScript has to finish that without moving on to function B. Even if that code takes 10 seconds or 1 minute

• Web app runs in a browser and it executes an intensive chunk of code without returning control to the browser, the browser can appear to be frozen

3. Single-threaded

• A thread is simply a process that your javascript program can use to run a task

• Each thread can only do one task at a time

• JavaScript has just the one thread called the main thread for executing any code

// Function to simulate a time-consuming operation
function intensiveOperation() {
    // Simulate a delay of 2 seconds
    const endTime = Date.now() + 2000;
    while (Date.now() < endTime) {
        // Loop for 2 seconds
    }
    console.log("Intensive operation completed");
}

// Synchronous code execution
console.log("Start of synchronous execution");
intensiveOperation(); // This operation takes 2 seconds to complete
console.log("End of synchronous execution");

// Output:
// Start of synchronous execution
// Intensive operation completed
// End of synchronous execution

Problem with synchronous, blocking, single-threaded model of JavaScript

let response = fetchDataFromDB('endpoint');
displayDataFromDB(response);

• fetchDataFromDB(endpoint) could take 1 second or even more

• During that time, we can't run any further code

• JavaScript, if it simply proceeds to the next line without waiting, we have an error because data is not what we expect it to be

• We need a way to have asynchronous behaviour with JavaScript

Async Javascript - How?

• Just JavaScript is not enough

• We need new pieces which are outside of JavaScript to help us write asynchronous code which is where web browsers come into play

• Web browsers define functions and APis that allow us to register functions that should not be executed synchronously, and should instead be invoked asynchronously when some kind of event occurs

• For example, that could be the passage of time ( setTimeout or setinterval), the user's interaction with the mouse (addEventListener), or the arrival of data over the network (callbacks, Promises, async-await)

• You can let your code do several things at the same time without stopping or blocking your main thread

In conclusion, exploring concepts like setTimeout, setInterval, callbacks, Promises, and async-await provides a comprehensive understanding of asynchronous JavaScript programming. These mechanisms are fundamental in managing asynchronous tasks, handling responses from asynchronous operations, and improving the overall performance and responsiveness of JavaScript applications.

By delving into these concepts, we've uncovered how JavaScript utilizes asynchronous programming to execute non-blocking operations, manage asynchronous events, and handle concurrency effectively. Understanding these mechanisms empowers developers to write more efficient, scalable, and maintainable code, ultimately enhancing the user experience and optimizing application performance.