Easy explanation of Async/Await in JavaScript
Tags: webdev, javascript, programming, beginners
Published: 2023-04-07 23:17:01

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:

```javascript
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:

```javascript
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:

```javascript
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.