Easy explanation of Async/Await in JavaScript

Asynchronous and synchronous programming are fundamental concepts in modern web development. In this blog post, we'll explore the differences between async and sync programming in JavaScript and TypeScript.

Synchronous Programming

Synchronous programming is the traditional way of writing code, where each operation is executed in sequence, blocking the execution of subsequent operations until the current one is completed. This means that if a function takes a long time to execute, the entire program will be held up until it finishes.

Here's an example of synchronous code:

function synchronousFunction() {
  console.log('Synchronous Function Start');
  for (let i = 0; i < 1000000000; i++) {
    // do something that takes a long time
  }
  console.log('Synchronous Function End');
}

console.log('Start');
synchronousFunction();
console.log('End');

When you run this code, you'll see that the program logs "Start", then "Synchronous Function Start", then takes a long time to execute the loop in synchronousFunction(), then logs Synchronous Function End, and finally logs "End".

Asynchronous Programming

Asynchronous programming is a newer way of writing code that allows multiple operations to be executed concurrently, without blocking the execution of subsequent operations. This is achieved by using callbacks, promises, or async/await syntax.

Here's an example of asynchronous code using callbacks:

function asynchronousFunction(callback) {
  console.log('Asynchronous Function Start');
  setTimeout(() => {
    callback();
  }, 3000);
}

console.log('Start');
asynchronousFunction(() => {
  console.log('Asynchronous Function End');
});
console.log('End');

When you run this code, you'll see that the program logs "Start", then "Asynchronous Function Start", then immediately logs "End", and finally logs "Asynchronous Function End" after a delay of 3 seconds.

In this example, we use the setTimeout() function to simulate a long-running operation, and we pass a callback function to asynchronousFunction() to be executed when the operation is complete.

Async and Await

Async/await is a newer syntax for writing asynchronous code in JavaScript and TypeScript. It allows you to write asynchronous code in a synchronous style, making it easier to read and understand.

Here's an example of async/await code:

function delay(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function asynchronousFunction() {
  console.log('Asynchronous Function Start');
  await delay(3000);
  console.log('Asynchronous Function End');
}

console.log('Start');
asynchronousFunction();
console.log('End');

When you run this TypeScript code, you'll see that the program logs "Start", then "Asynchronous Function Start", then immediately logs "End", and finally logs "Asynchronous Function End" after a delay of 3 seconds.

In this example, we define a delay() function that returns a promise that resolves after a given number of milliseconds. We then define an async function that logs a message, awaits the completion of the delay() function, and then logs another message.

Conclusion

Asynchronous programming is essential for building scalable, responsive, and high-performance web applications. By using async/await or other async patterns, you can write code that executes concurrently and doesn't block the execution of subsequent operations. With TypeScript, you can even benefit from static type checking and other language features to write more robust and maintainable code. So, whether you're building a small website or a large-scale web application, understanding async and sync programming is crucial to your success.