Synchronous Code Explained

JavaScript operates on a single-threaded model, meaning it processes one task at a time. While this makes coding straightforward, it can lead to inefficiencies. For instance, when performing a lengthy operation like network requests, the browser becomes unresponsive until the task completes, creating a poor user experience.

In synchronous execution, we must await the completion of one task before proceeding to the next. This can lead to scenarios where rendering is halted while operations are processed. Let’s examine a simple piece of code to illustrate this:

console.log("Start");

logFunction();

console.log("End");

function logFunction() {

console.log("in logFunction");

}

In this example, we see that the output appears in the expected order, as synchronous tasks must occur sequentially.

Asynchronous Code: The Solution

Asynchronous JavaScript allows us to perform long-running tasks without blocking the main execution thread. When we use asynchronous methods, we can initiate tasks and move on to others while waiting for them to finish. The event loop plays a crucial role in enabling this behavior, giving the impression of multi-threading through clever data structures.

To further illustrate, consider the setTimeout() function, which delays executing code for a specified time:

setTimeout(() => console.log('One second later.'), 1000);

In this case, we can see that "In timeout" will not be logged until after "End," as the code continues without waiting for the timeout.

Next, let’s explore how we handle asynchronous operations like fetching resources from a server. The following example highlights how not to handle it:

let response = fetch('myImage.png'); // fetch is asynchronous

let blob = response.blob();

This code will fail since the response isn’t available immediately. Instead, we must wait for the promise to resolve before proceeding.

Callbacks in Asynchronous Programming

One common approach for handling asynchronous operations is to use callbacks, where we pass a function as an argument to execute upon the completion of a task. For instance, the setTimeout() function allows us to create simulated asynchronous behavior:

setTimeout(() => console.log('One second later.'), 1000);

While callbacks can work well in theory, they often lead to complex and tangled code, commonly referred to as "callback hell." This issue arises when multiple callbacks are nested, making code challenging to read and maintain.

Promises: A Better Alternative

Introduced in ES6, promises offer a more manageable way to handle asynchronous operations. A promise represents a value that may be available now, or in the future, or never. It serves as a placeholder while we wait for the result.

const promise = new Promise((resolve, reject) => {

// Asynchronous operation

});

Promises possess distinct states: pending, fulfilled, or rejected. After a promise is settled, it cannot change its state.

let promise = new Promise((resolve, reject) => {

// Some async operation

resolve('Success!');

});

To handle the result, we can use the then() method:

promise.then(result => console.log(result));

Chaining promises allows us to write cleaner, more readable code, where each function can return a promise, ensuring sequential execution.

Error Handling with Promises

When a promise is rejected, control transfers to the nearest rejection handler. It’s advisable to end promise chains with a catch() for comprehensive error handling.

fetch(url)

.then(processData)

.catch(handleErrors);

Async and Await: Simplifying Asynchronous Code

The async and await keywords, introduced in ECMAScript 2017, provide a way to write asynchronous code that resembles synchronous code. By marking a function with async, it will always return a promise:

async function getData(url) {

const response = await fetch(url);

return response.json();

}

The await keyword pauses execution until the promise resolves, allowing us to write cleaner, more understandable code.

Error Handling with Async/Await

If an awaited promise is rejected, it throws an error, which can be caught using try/catch blocks. This approach allows for straightforward error management:

try {

const data = await getData(url);

} catch (error) {

console.error(error);

}

Setting Up a Local Server for Testing

For testing, it’s often beneficial to serve data locally. We can create a JSON file and use the Fetch API to retrieve it, similar to remote requests. To do so, we need a simple web server, which can be set up using Node.js with the command:

npx http-server