Why Wait? JavaScript Asynchronous Code

JavaScript is inherently asynchronous, and understanding how to handle async operations is crucial for writing efficient, non-blocking code.

In this blog, we’ll break down key asynchronous concepts like Promises, Async/Await, Callbacks, and timing functions such as setTimeout, setInterval, setImmediate, and process.nextTick().

Promises: The Foundation of Async

A Promise is a placeholder for a future value.

It represents an operation that hasn’t completed yet but is expected to be resolved at some point.

Creating a Promise

The Promise API provides a constructor that takes a function with two parameters: resolve and reject.

You use these to indicate whether the operation was successful or failed.

const myPromise = new Promise((resolve, reject) => {
  let success = true;
  setTimeout(() => {
    if (success) {
      resolve("Promise resolved successfully!");
    } else {
      reject("Promise rejected!");
    }
  }, 1000);
});

myPromise
  .then(result => console.log(result))
  .catch(error => console.error(error));

When the promise resolves, it calls .then(), and if it fails, .catch() handles the error.

Async/Await: A Smoother Approach to Promises

The async and await keywords simplify working with Promises, making asynchronous code look synchronous.

Using Async/Await

async function fetchData() {
  try {
    let response = await myPromise;
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

• The async keyword ensures that the function returns a Promise.
• The await keyword pauses execution until the promise resolves.
• Errors can be handled using try...catch.

Callbacks: The Old-School Way

Before Promises, JavaScript used callbacks for async operations.

Callbacks are functions passed as arguments to other functions and are executed once an operation completes.

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received!");
  }, 1000);
}

fetchData(result => console.log(result));

The Callback Hell Problem

Nested callbacks can lead to messy, unreadable code, commonly known as callback hell:

fetchData(result1 => {
  processResult(result1, result2 => {
    saveResult(result2, result3 => {
      console.log("Final result: ", result3);
    });
  });
});

This issue is why Promises and Async/Await were introduced!

Timing Functions: Managing Execution Order

setTimeout: Delayed Execution

Executes a function after a specified time.

setTimeout(() => {
  console.log("This runs after 2 seconds");
}, 2000);

setInterval: Repeated Execution

Repeats a function at a specified interval until stopped.

let count = 0;
const intervalId = setInterval(() => {
  console.log("Repeating task", ++count);
  if (count === 5) clearInterval(intervalId);
}, 1000);

setImmediate: Executes After the Current Event Loop

Runs a function after the current event loop iteration finishes.

setImmediate(() => {
  console.log("This runs immediately after I/O operations");
});

process.nextTick(): Executes Before the Next Event Loop Tick

Ensures a function runs before the next event loop cycle.

process.nextTick(() => {
  console.log("This runs before the next event loop starts");
});

Conclusion

Understanding JavaScript's asynchronous behavior is crucial for efficient, scalable applications.

Promises and Async/Await provide cleaner, more maintainable ways to handle async operations, while timing functions help control execution flow.

---

I’ve been working on a super-convenient tool called LiveAPI.

LiveAPI helps you get all your backend APIs documented in a few minutes

With LiveAPI, you can quickly generate interactive API documentation that allows users to execute APIs directly from the browser.

If you’re tired of manually creating docs for your APIs, this tool might just make your life easier.