Added New Important Feature of javaScript i.e. Asynchronous JavaScript

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();

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);
+//   });

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);
+    });
+  });
+});

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);

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();