Create Session12.md

Frontend-dev/Session12.md

@@ -0,0 +1,128 @@
+### Synchronous and Asynchronous Programming in JavaScript
+
+#### **Synchronous Programming**
+- **Definition**: Synchronous programming executes code line by line, meaning each line of code waits for the previous one to finish before executing. This can lead to delays if a particular task takes time (e.g., reading a file or making a network request).
+- **Example**:
+  ```javascript
+  console.log('Start');
+  console.log('Middle');
+  console.log('End');
+  ```
+  **Output**:
+  ```
+  Start
+  Middle
+  End
+  ```
+  In this case, the execution is in order.
+
+#### **Asynchronous Programming**
+- **Definition**: Asynchronous programming allows multiple tasks to run concurrently without waiting for the previous task to complete. This is especially useful for tasks that take time, such as fetching data from an API or performing file operations.
+- **Example**:
+  ```javascript
+  console.log('Start');
+  setTimeout(() => {
+      console.log('Middle');
+  }, 1000);
+  console.log('End');
+  ```
+  **Output**:
+  ```
+  Start
+  End
+  Middle
+  ```
+  The `setTimeout` function runs asynchronously, allowing the code to continue executing while it waits.
+
+---
+
+### **Promises**
+
+#### **What is a Promise?**
+- **Definition**: A promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value.
+- **States of a Promise**:
+  1. **Pending**: Initial state, neither fulfilled nor rejected.
+  2. **Fulfilled**: Operation completed successfully.
+  3. **Rejected**: Operation failed.
+
+#### **Creating a Promise**
+```javascript
+let promise = new Promise((resolve, reject) => {
+  let success = true; // Simulating a condition
+  if (success) {
+    resolve('Task completed successfully!');
+  } else {
+    reject('Task failed.');
+  }
+});
+```
+
+### **.then() and .catch()**
+
+#### **Using .then()**
+- **Definition**: `.then()` is used to handle the successful completion of a promise. It accepts a callback function that gets executed when the promise is resolved.
+- **Example**:
+  ```javascript
+  promise.then((message) => {
+    console.log(message); // Output: Task completed successfully!
+  });
+  ```
+
+#### **Using .catch()**
+- **Definition**: `.catch()` is used to handle errors or rejections in a promise. It accepts a callback function that gets executed when the promise is rejected.
+- **Example**:
+  ```javascript
+  promise.catch((error) => {
+    console.log(error); // Output: Task failed.
+  });
+  ```
+
+---
+
+### **Fetch Method**
+
+#### **Definition**: The `fetch()` method is used to make network requests and returns a promise that resolves to the response object. This can be used to make API calls to retrieve or send data.
+#### **Syntax**:
+```javascript
+fetch(url)
+  .then(response => response.json()) // Converting the response to JSON
+  .then(data => console.log(data)) // Handling the data
+  .catch(error => console.error('Error:', error)); // Handling errors
+```
+- **Example**:
+  ```javascript
+  fetch('https://api.example.com/data')
+    .then(response => response.json())
+    .then(data => console.log(data))
+    .catch(error => console.log('Error:', error));
+  ```
+
+---
+
+### **Async/Await**
+
+#### **Definition**: `async/await` provides a way to work with asynchronous code in a more synchronous-looking manner, making the code easier to read and understand.
+- **async**: Declares a function as asynchronous, meaning it will return a promise.
+- **await**: Pauses the execution of an async function until the promise is resolved or rejected.
+
+#### **Example**:
+```javascript
+async function fetchData() {
+  try {
+    let response = await fetch('https://api.example.com/data');
+    let data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.log('Error:', error);
+  }
+}
+
+fetchData();
+```
+**Explanation**:
+- `fetchData()` is an asynchronous function that uses `await` to wait for the `fetch` call to complete.
+- The `try` block is used to handle successful data retrieval, and the `catch` block catches any errors that occur during the process.
+
+#### **When to Use Async/Await**
+- Use `async/await` when you need to handle multiple asynchronous operations sequentially.
+- It makes the code more readable, especially when dealing with complex chains of `.then()` and `.catch()`.