# Async/Await in JavaScript: Writing Cleaner Asynchronous Code

## Introduction

In earlier version of JavaScript we have started using the asynchronous programming in JavaScript by callbacks but it creates the call back hell means we have to creates too much of callbacks to perform Asynchronous operations after that the javascript team has introduced the promises they have made the asynchronous programming easy but still it is verbose and chained

```javascript
fetchData()
  .then(data => processData(data))
  .then(result => saveResult(result))
  .catch(err => console.log(err));
```

That's why the Async/await come in picture to makes the developers life easy

## Why `async/await` is introduced ?

Async/await was introduced in JavaScript in 2018 in ES8(EM2018) Version it is crucial moment for javascript, it solves the complexity and maintainability issues of asynchronous operations

## How `async` function works ?

We uses the `async` keyword for performing asynchronous operations in JavaScript,

It tells the javascript that after this there is a asynchronous function that will always return a promise

If the value returned is a like a string or number JavaScript will automatically wrap it to `Promise.resolve(value)` but it always return a promise

If you return a error the javascript will automatically wrap it to `Promise.reject(Error)` but it returns a promise everytime when you write the `async` keyword

```javascript
async function fetchData() {
    console.log("1.From inside async function");
    
    const result = await someApiCall(); // <--- Pause point
    
    console.log("3. Data received:", result);
}

console.log("0. Before calling function");
fetchData();
console.log("2. After calling function");
```

## `await` keyword concept ?

The await keyword is used to tell the Javascript Wait there is a task please perform it first then go next of the promise is resolved

```javascript
async function getWeather() {
    // Execution "pauses" here until the fetch is done
    const response = await fetch('https://api.weather.com/today'); 
    const data = await response.json(); 
    return data;
}
```

## Error handling in `async/await`

One of the good advantage of `async/await` is the `try...catch` blocks error handling

```javascript
fetchData()
  .then(data => console.log(data))
  .catch(error => console.log(error));
```

## Comparison with the promises

While the async/await is build on promises but still there is a difference in both are

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p>Sr.No.</p></td><td colspan="1" rowspan="1"><p>Promises</p></td><td colspan="1" rowspan="1"><p>Async/await</p></td></tr><tr><td colspan="1" rowspan="1"><p>1. Code readability</p></td><td colspan="1" rowspan="1"><p>Messy &amp; long</p></td><td colspan="1" rowspan="1"><p>Clean &amp; concise</p></td></tr><tr><td colspan="1" rowspan="1"><p>2. Control Flow</p></td><td colspan="1" rowspan="1"><p>Chained</p></td><td colspan="1" rowspan="1"><p>Linear</p></td></tr><tr><td colspan="1" rowspan="1"><p>3. Error Handling</p></td><td colspan="1" rowspan="1"><p>Uses <code>catch()</code></p></td><td colspan="1" rowspan="1"><p>Uses <code>try...catch</code></p></td></tr></tbody></table>

## Conclusion

Async/await is slightly better version of promises but these are not the replacement of promises because it is built on the promises itself...