From be98d39e866cd3928b18b78a5f4a80b51c786323 Mon Sep 17 00:00:00 2001
From: Omkar Patil <git21cs072-t@students.git.edu>
Date: Tue, 29 Oct 2024 18:57:14 +0530
Subject: [PATCH] Added New Important Feature of javaScript Asynchronous
 JavaScript

---
 Asynchronous JavaScript/async.js     | 28 +++++++++++++
 Asynchronous JavaScript/callbacks.js | 59 ++++++++++++++++++++++++++++
 Asynchronous JavaScript/promises.js  | 58 +++++++++++++++++++++++++++
 Asynchronous JavaScript/script.js    | 17 ++++++++
 Asynchronous JavaScript/syncAwait.js | 52 ++++++++++++++++++++++++
 5 files changed, 214 insertions(+)
 create mode 100644 Asynchronous JavaScript/async.js
 create mode 100644 Asynchronous JavaScript/callbacks.js
 create mode 100644 Asynchronous JavaScript/promises.js
 create mode 100644 Asynchronous JavaScript/script.js
 create mode 100644 Asynchronous JavaScript/syncAwait.js

diff --git a/Asynchronous JavaScript/async.js b/Asynchronous JavaScript/async.js
new file mode 100644
index 00000000..ac18652f
--- /dev/null
+++ b/Asynchronous JavaScript/async.js	
@@ -0,0 +1,28 @@
+//====================> Synchronous code <===========
+
+const f1 = () => {
+  console.log('f1 is executing');
+  f2();
+  console.log('f1 part 2 is executing');
+};
+const f2 = () => {
+  console.log('f2 is executing');
+};
+
+f1();
+
+//====================> Asynchronous code <===========
+
+const f3 = () => {
+  console.log('f3 is executing');
+  f4();
+  console.log('f3 part 3 is executing');
+};
+
+const f4 = () => {
+  setTimeout(() => {
+    console.log('f3 part 2 is executing');
+  }, 2000);
+};
+
+f3();
diff --git a/Asynchronous JavaScript/callbacks.js b/Asynchronous JavaScript/callbacks.js
new file mode 100644
index 00000000..2547375a
--- /dev/null
+++ b/Asynchronous JavaScript/callbacks.js	
@@ -0,0 +1,59 @@
+//===============================> Callback Function <================
+
+//function 1
+const fetchUser = (username, callback) => {
+  console.log('Fetching ...');
+
+  setTimeout(() => {
+    console.log('Now we Have the user');
+    callback(username);
+  }, 2000);
+};
+//function 2
+const fetUserPhotos = (username, callback) => {
+  console.log('Now fetching photos...');
+  setTimeout(() => {
+    console.log(`Now we have photos of ${username}`);
+    callback(['ph1', 'ph2', 'ph3']);
+  }, 2000);
+};
+
+//function 3
+const fetPhotoDetails = (photo, callback) => {
+  console.log('Fetching photo details...');
+  setTimeout(() => {
+    console.log(`Now we have details of ${photo}`);
+    callback({ title: 'Photo title' });
+  }, 2000);
+};
+
+//==================> this is Callback Hell <=========================
+fetchUser('Mirinda', (user) => {
+  //resolves 1st callback
+  console.log(`hello ${user} here`);
+  //second callback
+  fetUserPhotos(user.username, (photos) => {
+    console.log(`These are photos of ${user.username}:`, photos);
+    //third callback
+    fetPhotoDetails(photos[0], (details) => {
+      console.log(`Details of ${photos[0]}:`, details);
+    });
+  });
+});
+
+//============> Promise < =================
+
+// const fetchUser = new Promise((resolve, reject) => {
+//   console.log('wait Fetching !!!');
+//   setTimeout(() => {
+//     resolve({ username: 'Michen' }); //means Succesfully Data Resolved
+//     // reject('Failed to fetch user'); //means Failed to Resolve Data
+//   }, 2000);
+// });
+// fetchUser
+//   .then((user) => {
+//     console.log(user.username);
+//   })
+//   .catch((err) => {
+//     console.log(err);
+//   });
diff --git a/Asynchronous JavaScript/promises.js b/Asynchronous JavaScript/promises.js
new file mode 100644
index 00000000..73b7d2b6
--- /dev/null
+++ b/Asynchronous JavaScript/promises.js	
@@ -0,0 +1,58 @@
+//===============================> Callback Function <================
+
+//function 1
+
+const fetchUser = (username) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve({ username: username }); //means Succesfully Data Resolved
+      // reject('Failed to fetch user'); //means Failed to Resolve Data
+    }, 2000);
+  });
+};
+
+//function 2
+const fetUserPhotos = (username) => {
+  return new Promise((resolve, reject) => {
+    console.log('Now fetching photos...');
+    setTimeout(() => {
+      console.log(`Now we have photos of ${username}`);
+      resolve(['ph1', 'ph2', 'ph3']);
+    }, 2000);
+  });
+};
+
+//function 3
+const fetPhotoDetails = (photo) => {
+  return new Promise((resolve, reject) => {
+    console.log('Fetching photo details...');
+    setTimeout(() => {
+      console.log(`Now we have details of ${photo}`);
+      resolve({ title: 'Photo title' });
+    }, 2000);
+  });
+};
+
+//==================> this is Callback Hell <=========================
+// fetchUser('Mirinda', (user) => {
+//   //resolves 1st callback
+//   console.log(`hello ${user} here`);
+//   //second callback
+//   fetUserPhotos(user.username, (photos) => {
+//     console.log(`These are photos of ${user.username}:`, photos);
+//     //third callback
+//     fetPhotoDetails(photos[0], (details) => {
+//       console.log(`Details of ${photos[0]}:`, details);
+//     });
+//   });
+// });
+
+//============> Promise < =================
+
+fetchUser('Mirinda').then((user) => {
+  fetUserPhotos(user.username).then((photos) => {
+    fetPhotoDetails(photos[0]).then((details) => {
+      console.log(`Details of ${photos[0]}:`, details);
+    });
+  });
+});
diff --git a/Asynchronous JavaScript/script.js b/Asynchronous JavaScript/script.js
new file mode 100644
index 00000000..5d60a867
--- /dev/null
+++ b/Asynchronous JavaScript/script.js	
@@ -0,0 +1,17 @@
+//=================> Asynchronous JavaScript <=====================
+
+//===============> Intervals , after certaimn time Code is Executed <========
+
+const myInterval = setInterval(() => {
+  console.log('Hi!'), 100;
+});
+// clearInterval(myInterval);
+
+//==============> Set TimeOut <==================
+
+//waits for Some time then executes the specified function
+
+const timer = setTimeout(() => {
+  console.log('this is gonna Execute After 5 sec');
+}, 5000);
+// clearTimeout(timer);
diff --git a/Asynchronous JavaScript/syncAwait.js b/Asynchronous JavaScript/syncAwait.js
new file mode 100644
index 00000000..43b33530
--- /dev/null
+++ b/Asynchronous JavaScript/syncAwait.js	
@@ -0,0 +1,52 @@
+//======================> Async Await <====================
+
+const fxn = async (number) => {
+  return number;
+};
+
+const numb = async () => {
+  const data = await fxn(5);
+  console.log(data);
+};
+
+numb(); // will print 5 as expected
+
+const fetchUser = (username) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve({ username: username }); //means Succesfully Data Resolved
+      // reject('Failed to fetch user'); //means Failed to Resolve Data
+    }, 2000);
+  });
+};
+
+//function 2
+const fetUserPhotos = (username) => {
+  return new Promise((resolve, reject) => {
+    console.log('Now fetching photos...');
+    setTimeout(() => {
+      console.log(`Now we have photos of ${username}`);
+      resolve(['ph1', 'ph2', 'ph3']);
+    }, 2000);
+  });
+};
+
+//function 3
+const fetPhotoDetails = (photo) => {
+  return new Promise((resolve, reject) => {
+    console.log('Fetching photo details...');
+    setTimeout(() => {
+      console.log(`Now we have details of ${photo}`);
+      resolve({ title: 'Photo title' });
+    }, 2000);
+  });
+};
+
+const display = async () => {
+  const user = await fetchUser('Mirinda');
+  const photos = await fetUserPhotos(user.username);
+  const details = await fetPhotoDetails(photos[0]);
+  console.log(`Details of ${photos[0]}:`, details);
+};
+
+display();