Added asynchronous javascript

Author: ag-sanjjeev

README.md

@@ -82,20 +82,10 @@ This repository contains Vanilla JavaScript topics and their notes to learn from
 2. [Arrays:](./docs/arrays.md)
 	- [Array methods](./docs/arrays.md#-array-methods)
 	- [Array iteration](./docs/arrays.md#-array-iteration)
-3. Asynchronous JavaScript:
-	- Callbacks
-		- Understanding asynchronous operations
-		- Using callbacks to handle asynchronous results
-	- Promises
-		- Creating and chaining promises.
-		- Handling promise resolution and rejection
-	- Async/await
-		- Using `async` and `await` for cleaner asynchronous code.
-4. Modules:
-	- CommonJS modules
-	- ES modules
-		- Importing modules
-		- Exporting modules
+3. [Asynchronous JavaScript:](./docs/asynchronous-javascript.md)
+	- [Callbacks](./docs/asynchronous-javascript.md#-callbacks)
+	- [Promises](./docs/asynchronous-javascript.md#-promises)
+	- [Async/Await](./docs/asynchronous-javascript.md#-async-await)
 
 ### Advanced Topics
 1. Error Handling:

docs/asynchronous-javascript.md

@@ -0,0 +1,79 @@
+## ⚑ Asynchronous JavaScript:
+Asynchronous programming in JavaScript allows tasks to run independent of the main thread execution without disturbing it. This performs operations independent of the main thread execution like fetching data from a server, handling user input, etc., 
+
+*It performing time-consuming tasks without freezing the UI.*
+
+*These operations don't block the main thread and allowing other parts of your code continuously executing while the asynchronous task is in progress.*
+
+### ☴ Overview:
+1. [Callbacks](#-callbacks)
+2. [Promises](#-promises)
+3. [Async/Await](#-async-await)
+
+### ✦ Callbacks:
+Callbacks are functions that are passed as arguments to other function calls. This callbacks are executed at a later or end of the function or typically when an asynchronous operation completes.
+
+```javascript
+fetch('https://api.example.com/data')
+  .then(response => response.json())
+  .then(data => {
+    console.log(data);
+  })
+  .catch(error => {
+    console.error('Error:', error);
+  });
+```
+
+In this above example,
+- *The `fetch()` function returns a Promise,*
+- *That promise is then resolved with the response data.* 
+- *The `.then()` method is used to handle the resolved value.* 
+- *The `.catch()` method is used to handle potential errors.*
+
+### ✦ Promises:
+Promises are objects that represent the eventual completion or failure of an asynchronous operation. They provide a more structured and readable way to handle asynchronous code compared to callbacks.
+
+```javascript
+function fetchData() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve('Data fetched successfully');
+    }, 2000);
+  });
+}
+
+fetchData()
+  .then(data => {
+    console.log(data);
+  })
+  .catch(error => {
+    console.error('Error:', error);
+  });
+``` 
+
+In this above example,
+- *Promises can either be resolved or rejected.*
+- *The `.then()` method is used to handle the resolved value.*
+- *While the `.catch()` method is used to handle rejection.*
+
+### ✦ Async Await:
+Using `async` and `await` for Cleaner Asynchronous Code.
+- `async`: Declares a function as asynchronous.
+- `await`: Pauses the execution of an `async` function until a Promise is resolved.
+
+```javascript
+async function fetchData() {
+  const data = await fetch('https://api.example.com/data');
+  const json = await data.json();
+  console.log(json);
+}
+
+fetchData();
+```
+
+---
+[⇪ To Top](#-asynchronous-javascript)
+
+[❮ Previous Topic](./arrays.md)   [Next Topic ❯](./error-handling.md)
+
+[⌂ Goto Home Page](../README.md)