Updated Readme

Author: ShubhamSKadam

12_Asynchronous_Concepts/12.md

@@ -7,8 +7,8 @@
 // clearInterval
 
 // outputs Hello, world! Every 2 seconds
- const myInterval = setInterval(() => console.log("Hello, world!"), 2000);
- clearInterval(myInterval); // Clears the Interval
+const myInterval = setInterval(() => console.log("Hello, world!"), 2000);
+clearInterval(myInterval); // Clears the Interval
 
 // setTimeout
 // clearTimeout
@@ -24,17 +24,16 @@ console.log("logging in the bottom");
 ```js
 // Synchronous Code
 const functionOne = () => {
-    console.log("Function One"); // 1
+  console.log("Function One"); // 1
 
-    functionTwo();
+  functionTwo();
 
-    console.log("Function One, Part two"); // 3
+  console.log("Function One, Part two"); // 3
 };
 
 const functionTwo = () => {
-    console.log("Function two"); // 2
+  console.log("Function two"); // 2
 };
-
 ```
 
 #### Callback functions
@@ -43,16 +42,21 @@ const functionTwo = () => {
 // Callback functions
 
 const fetchUser = (username, callback) => {
-    setTimeout(() => {
-        callback({ username });
-    }, 2000);
+  setTimeout(() => {
+    callback({ username });
+  }, 2000);
 };
 
 fetchUser("Shubham", (user) => {
-    console.log(`Hello, ${user.username}`); // Hello, Shubham
+  console.log(`Hello, ${user.username}`); // Hello, Shubham
 });
 ```
 
+The two problems that we faced in callbacks are:-
+
+1. Callback Hell: Asynchronous operations in JavaScript can be achieved through callbacks. Whenever there are multiple dependent Asynchronous operations it will result in a lot of nested callbacks. This will cause a 'pyramid of doom' like structure.
+2. Inversion of control: When we give the control of callbacks being called to some other API, this may create a lot of issues. That API may be buggy, may not call our callback and create order as in the above example, may call the payment callback twice etc.
+
 #### Promises
 
 ```js
@@ -62,38 +66,36 @@ fetchUser("Shubham", (user) => {
 
 //Promises are used to handle asynchronous operations in a synchronous manner, making it //easier to write and reason about async code. Instead of using callback functions, you can //use the then and catch methods on a Promise to specify what should happen when the Promise //is fulfilled or rejected.
 
-
 const fetchUser = (username) => {
-    return new Promise((resolve, reject) => {
-        setTimeout(() => {
-            console.log("[Now we have the user]");
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      console.log("[Now we have the user]");
 
-            resolve({ username });
-        }, 2000);
-    });
+      resolve({ username });
+    }, 2000);
+  });
 };
 
 const fetchUserPhotos = (username) => {
-    return new Promise((resolve, reject) => {
-        setTimeout(() => {
-            console.log(`Now we have the photos for ${username}`);
-            resolve(["Photo1", "Photo2"]);
-        }, 2000);
-    });
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      console.log(`Now we have the photos for ${username}`);
+      resolve(["Photo1", "Photo2"]);
+    }, 2000);
+  });
 };
 
 const fetchPhotoDetails = (photo) => {
-    return new Promise((resolve, reject) => {
-        setTimeout(() => {
-            console.log(`[Now we have the photo details ${photo}]`);
-            resolve("details...");
-        }, 2000);
-    });
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      console.log(`[Now we have the photo details ${photo}]`);
+      resolve("details...");
+    }, 2000);
+  });
 };
 
 fetchUser("Shubham")
-    .then((user) => fetchUserPhotos(user.username))
-    .then((photos) => fetchPhotoDetails(photos[0]))
-    .then((details) => console.log(`Your photo details are ${details}`));
+  .then((user) => fetchUserPhotos(user.username))
+  .then((photos) => fetchPhotoDetails(photos[0]))
+  .then((details) => console.log(`Your photo details are ${details}`));
 ```
-