Promises and Async/Await

Author: adityaSrivastava29

README.md

@@ -11,7 +11,8 @@ Welcome to your comprehensive JavaScript interview notes! This repository contai
 - [Higher Order Functions](JS-Interview-Questions/HigherOrderFunction.md)
 - [Map, Reduce, Filter](JS-Interview-Questions/map-reduce-filters.md)
 - [Polyfills](HigherOrderFunction/polyfills.html)
-
+- [Promises](promises/promises.md)
+- [Async/Await](async-await/async-await.md)
 - [More Topics Coming Soon!]
 
 ---
@@ -41,7 +42,8 @@ Welcome to your comprehensive JavaScript interview notes! This repository contai
 - [Higher Order Functions](JS-Interview-Questions/HigherOrderFunction.md)
 - [Map, Reduce, Filter](JS-Interview-Questions/map-reduce-filters.md)
 - [Polyfills](HigherOrderFunction/polyfills.html)
-
+- [Promises](promises/promises.md)
+- [Async/Await](async-await/async-await.md)
 ---
 
 

async-await/async-await.js

@@ -0,0 +1,127 @@
+
+//  async function always returns a promise, even if I return a simple string from below function, async keyword will wrap it under Promise and then return.
+async function getData() {
+  return "hello Aditya";
+}
+const dataPromise = getData();
+console.log(dataPromise); // Promise {<fulfilled>: 'hello Aditya'}
+
+//How to extract data from above promise? One way is using promise .then
+dataPromise.then(res => console.log(res)); // hello Aditya
+
+const p = new Promise((resolve, reject) => {
+  resolve('Promise resolved value!!');
+})
+
+async function getData1() {
+  return p;
+}
+// In above case, since we are already returning a promise async function would simply return that instead of wrapping with a new Promise.
+const dataPromiseWithPromise = getData1();
+console.log(dataPromiseWithPromise); // Promise {<fulfilled>: 'Promise resolved value!!'}
+dataPromiseWithPromise.then(res => console.log(res)); // Promise resolved value!!       
+/*
+Q: How we can use await along with async function?
+A: async and await combo is used to handle promises.
+
+But Question is how we used to handle promises earlier and why we even need async/await?
+
+*/
+
+//📌 Till now we have been using Promise.then/.catch to handle promise.
+// Now let's see how async await can help us and how it is different
+
+// The rule is we have to use keyword await in front of promise.
+async function handlePromise() {
+  const val = await p;
+  console.log(val);
+}
+handlePromise(); // Promise resolved value!!
+
+// 📌 await is a keyword that can only be used inside a async function.
+
+// await function() {} // Syntax error: await is only valid under async function.
+
+const p0 = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    resolve('Promise resolved value!!');
+  }, 3000);
+})
+
+// Let's now compare with some modification:
+
+// 📌 Promise.then/.catch way
+function getData() {
+  // JS engine will not wait for promise to be resolved
+  p0.then(res => console.log(res));
+  console.log('Hello There!');
+}
+
+getData(); // First `Hello There!` would be printed and then after 3 secs 'Promise resolved value!!' will be printed.
+// Above happened as Javascript wait for none, so it will register this promise and take this callback function and register separately then js will move on and execute the following console and later once promise is resolved, following console will be printed.
+
+//❓ Problem: Normally one used to get confused that JS will wait for promise to be resolved before executing following lines.
+
+// 📌 async-wait way:
+async function handlePromise0() {
+  // JS Engine will waiting for promise to resolve.
+  const val = await p;
+  console.log('Hello There!');
+  console.log(val);
+}
+handlePromise0(); // This time `Hello There!` won't be printed immediately instead after 3 secs `Hello There!` will be printed followed by 'Promise resolved value!!'
+// 💡 So basically code was waiting at `await` line to get the promise resolve before moving on to next line.
+
+// Above is the major difference between Promise.then/.catch vs async-await
+
+//🤓 Let's brainstorm more around async-await
+async function handlePromise() {
+  console.log('Hi');
+  const val = await p;
+  console.log('Hello There!');
+  console.log(val);
+
+  const val2 = await p;
+  console.log('Hello There! 2');
+  console.log(val2);
+}
+handlePromise(); 
+// In above code example, will our program wait for 2 time or will it execute parallely.
+//📌 `Hi` printed instantly -> now code will wait for 3 secs -> After 3 secs both promises will be resolved so ('Hello There!' 'Promise resolved value!!' 'Hello There! 2' 'Promise resolved value!!') will get printed immediately.
+
+// Let's create one promise and then resolve two different promise.
+const p2 = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    resolve('Promise resolved value by p2!!');
+  }, 2000);
+})
+
+async function handlePromise() {
+  console.log('Hi');
+  const val = await p;
+  console.log('Hello There!');
+  console.log(val);
+
+  const val2 = await p2;
+  console.log('Hello There! 2');
+  console.log(val2);
+}
+handlePromise(); 
+
+// 📌 `Hi` printed instantly -> now code will wait for 3 secs -> After 3 secs both promises will be resolved so ('Hello There!' 'Promise resolved value!!' 'Hello There! 2' 'Promise resolved value by p2!!') will get printed immediately. So even though `p2` was resolved after 2 secs it had to wait for `p` to get resolved
+
+
+// Now let's reverse the order execution of promise and observe response.
+async function handlePromise1() {
+  console.log('Hi');
+  const val = await p2;
+  console.log('Hello There! ');
+  console.log(val);
+
+  const val2 = await p;
+  console.log('Hello There! 2');
+  console.log(val2);
+}
+handlePromise1(); 
+// 📌 `Hi` printed instantly -> now code will wait for 2 secs -> After 2 secs ('Hello There!' 'Promise resolved value by p2!!') will get printed and in the subsequent second i.e. after 3 secs ('Hello There! 2' 'Promise resolved value!!') will get printed
+// So in this case, both promises were resolved at different time but code execution was sequential i.e. it waited for first promise to resolve before moving on to next line of code.