# javascript

1. Variables and Data Types
    
2. Operators
    
3. Control Flow (if-else, switch, loops)
    
4. Functions
    
5. Arrays
    
6. Objects
    
7. Strings
    
8. Numbers
    
9. Booleans
    
10. Null and Undefined
    
11. Type Conversion
    
12. Scope (Global scope, Function scope, Block scope)
    
13. Hoisting
    
14. Closures
    
15. this keyword
    
16. Prototype and Prototypal Inheritance
    
17. Strict Mode
    
18. Destructuring
    
19. Template Literals
    
20. Rest and Spread Operators
    
21. Default Parameters
    
22. Array Methods (forEach, map, filter, reduce, etc.)
    
23. Promises
    
24. Async/Await
    
25. Fetch API
    
26. Classes and Object-oriented Programming
    
27. Modules (ES Modules)
    
28. Error Handling (try-catch, throw)
    
29. Regular Expressions
    
30. JSON
    
31. Event Handling
    
32. DOM Manipulation
    
33. AJAX
    
34. Local Storage and Session Storage
    
35. Web APIs (DOM API, CSSOM, etc.)
    
36. Callbacks
    
37. Arrow Functions
    
38. Map and Set
    
39. Symbol
    
40. Optional Chaining (?.)
    
41. Nullish Coalescing Operator (??)
    
42. BigInt
    
43. Promise.allSettled()
    
44. Optional Catch Binding
    
45. Dynamic Import
    
46. Array Flat and FlatMap Methods
    
47. Object.fromEntries()
    
48. String.trimStart() and String.trimEnd()
    
49. [Array.at](http://Array.at)()
    
50. Intl API (Internationalization API)
    
51. Object.getOwnPropertyDescriptors()
    
52. GlobalThis
    
53. Temporal API
    
54. Logical Assignment Operators (&&=, ||=, ??=)
    

# emmet

Emmet is a powerful toolkit and abbreviation engine primarily used in web development for rapidly generating HTML and CSS code. It provides a shorthand syntax that allows developers to write code snippets using abbreviations, which are then expanded into full-fledged code blocks.

Emmet was originally developed as a plugin for the Sublime Text editor but has gained popularity and support across various code editors and IDEs, including Visual Studio Code, Atom, IntelliJ IDEA, and more. It offers a quick and efficient way to write code, saving developers time and effort.

Emmet enables developers to write complex HTML and CSS structures using concise and intuitive abbreviations. It supports a wide range of features, including:

1. HTML Abbreviations: Emmet provides abbreviations for HTML tags, such as `div`, `ul`, `p`, etc. These tags can be combined and nested using operators like `>`, `+`, `^`, and `*` to create complex structures quickly.
    
2. CSS-like Selectors: Emmet allows you to use CSS-like selectors to specify attributes, classes, IDs, and other properties of HTML elements. For example, `div.container#main` represents a `<div>` element with a class of "container" and an ID of "main".
    
3. Numeric Multiplication: You can use numeric multiplication to generate multiple elements with incremental attributes or content. For example, `ul>li.item$*5` expands into five `<li>` elements with the class "item" and numbers appended to it (item1, item2, item3, etc.).
    
4. CSS Abbreviations: Emmet also provides shortcuts for CSS properties, allowing you to write CSS rules more quickly. For instance, `m10` expands to `margin: 10px;`, and `p10-20` expands to `padding: 10px 20px;`.
    
5. Customization: Emmet can be customized to fit individual preferences and coding conventions. Developers can configure their own custom snippets, abbreviations, and preferences to enhance their workflow.
    

Emmet is particularly useful when working on large-scale web projects that involve complex HTML and CSS structures. It greatly accelerates the development process and improves productivity by reducing the amount of manual typing required.

It's worth noting that while Emmet is widely used and highly regarded in the web development community, it is an optional tool, and developers can choose to use it or not based on their personal preference and workflow.

# Inline JavaScript , Internal JavaScript ,External JavaScript

Inline JavaScript, Internal JavaScript, and External JavaScript are different ways to include JavaScript code within an HTML document.

1. Inline JavaScript: In inline JavaScript, JavaScript code is directly embedded within an HTML element using the `on` event attributes or the `script` tag with the `src` attribute. Here are examples of both approaches:
    
    a. Using `on` event attributes:
    
    ```javascript
    <button onclick="myFunction()">Click me</button>
    ```
    
    In this example, the `onclick` event attribute contains the JavaScript code `myFunction()`, which will be executed when the button is clicked.
    
    b. Using the `script` tag with code directly in the HTML:
    
    ```javascript
    <script>
      function myFunction() {
        alert("Hello, world!");
      }
    </script>
    ```
    
    In this example, the JavaScript code is enclosed within the `<script>` tags directly in the HTML document.
    
    Inline JavaScript is convenient for simple tasks or quick code snippets but can become difficult to manage and maintain in larger projects.
    
2. Internal JavaScript: Internal JavaScript refers to JavaScript code placed within the `<script>` tags within the HTML document. The `<script>` tags are usually placed in the `<head>` or `<body>` section of the HTML document. Here's an example:
    
    ```javascript
    <html>
      <head>
        <script>
          function myFunction() {
            alert("Hello, world!");
          }
        </script>
      </head>
      <body>
        <!-- HTML content -->
        <button onclick="myFunction()">Click me</button>
      </body>
    </html>
    ```
    
    The JavaScript code is placed between the `<script>` tags within the HTML document itself. This approach allows you to keep the JavaScript code separate from the HTML content, but it can still result in code duplication and is not ideal for larger projects.
    
3. External JavaScript: External JavaScript involves storing the JavaScript code in a separate external file with a `.js` extension and linking it to the HTML document using the `src` attribute of the `<script>` tag. Here's an example:
    
    ```javascript
    <html>
      <head>
        <script src="script.js"></script>
      </head>
      <body>
        <!-- HTML content -->
        <button onclick="myFunction()">Click me</button>
      </body>
    </html>
    ```
    
    In this example, the JavaScript code is stored in a file called `script.js`, and it is linked to the HTML document using the `src` attribute of the `<script>` tag.
    
    Using external JavaScript files allows for better code organization, reusability, and separation of concerns. It makes it easier to manage and maintain JavaScript code in larger projects and enables caching and faster loading of the JavaScript code.
    

In general, it is considered a best practice to use external JavaScript files for larger projects, while inline and internal JavaScript can be used for smaller tasks or quick prototyping.

# JavaScript Statements

[https://www.w3schools.com/js/js\_statements.asp](https://www.w3schools.com/js/js_statements.asp)

# Const, Let, Var

`const`, `let`, and `var` are three different ways to declare variables in JavaScript. Each keyword has its own scoping rules and behaviors.

1. `const`: Variables declared with `const` are block-scoped and have a constant value. Once assigned, the value of a `const` variable cannot be changed. It is commonly used for values that are not intended to be reassigned.
    
    ```javascript
    const x = 5;
    // x = 10; // Error: Assignment to constant variable
    
    const array = [1, 2, 3];
    array.push(4); // Valid: The array itself can be mutated
    ```
    
    `const` is often used for declaring variables that should not be re-assigned throughout the code.
    
2. `let`: Variables declared with `let` are block-scoped but can have their values reassigned. The scope of a `let` variable is limited to the block in which it is defined.
    
    ```javascript
    let x = 5;
    x = 10; // Valid: The value of 'x' can be changed
    
    let y = 20;
    if (true) {
      let y = 30; // This 'y' is scoped to the if block
      console.log(y); // Output: 30
    }
    console.log(y); // Output: 20 (outer 'y' is unchanged)
    ```
    
    `let` is commonly used when you need to reassign a variable or when you want to limit its scope to a specific block.
    
3. `var`: Variables declared with `var` are function-scoped or globally scoped, but not block-scoped. They can be reassigned and have some different scoping behaviors compared to `let` and `const`.
    
    ```javascript
    var x = 5;
    x = 10; // Valid: The value of 'x' can be changed
    
    function example() {
      var y = 20;
      if (true) {
        var y = 30; // This 'y' reassigns the outer 'y'
        console.log(y); // Output: 30
      }
      console.log(y); // Output: 30 (outer 'y' is changed)
    }
    example();
    ```
    
    Unlike `let` and `const`, `var` variables are not block-scoped. They are function-scoped, meaning they are accessible throughout the entire function in which they are defined. This can lead to potential issues with variable hoisting and unintended global scope.
    

In modern JavaScript, it is generally recommended to use `const` and `let` over `var` due to their block scoping and more predictable behavior. `const` should be used for values that should not be reassigned, while `let` can be used for variables that require reassignment.

# String Concatenation

String concatenation in JavaScript refers to the process of combining multiple strings into a single string. There are multiple ways to perform string concatenation in JavaScript:

1. Using the `+` operator: The `+` operator can be used to concatenate strings. When one of the operands is a string, JavaScript automatically converts the other operand to a string and concatenates them.
    
    ```javascript
    const str1 = "Hello";
    const str2 = "world";
    const result = str1 + " " + str2; // Concatenates "Hello" and "world"
    console.log(result); // Output: "Hello world"
    ```
    
2. Using the `concat()` method: The `concat()` method is available on string objects and can be used to concatenate strings together.
    
    ```javascript
    const str1 = "Hello";
    const str2 = "world";
    const result = str1.concat(" ", str2); // Concatenates "Hello" and "world"
    console.log(result); // Output: "Hello world"
    ```
    
3. Using template literals (backticks): Template literals are a modern feature introduced in ECMAScript 2015 (ES6). They allow for more flexible string interpolation and multiline strings. Variables and expressions can be directly embedded within the string using `${}`.
    
    ```javascript
    const str1 = "Hello";
    const str2 = "world";
    const result = `${str1} ${str2}`; // Concatenates "Hello" and "world"
    console.log(result); // Output: "Hello world"
    ```
    

String concatenation is commonly used when combining static text with dynamic data or when constructing more complex strings. It's important to note that string concatenation can be resource-intensive when performed repeatedly in a loop, as strings in JavaScript are immutable and each concatenation operation creates a new string. In such cases, it may be more efficient to use an array and `join()` method or to leverage template literals for complex string construction.

# Implicit Type Conversion

Implicit type conversion, also known as type coercion, is a feature in JavaScript where the JavaScript engine automatically converts one data type to another during certain operations or comparisons. It occurs when you perform operations involving values of different types.

JavaScript performs implicit type conversion based on a set of predefined rules to determine the appropriate conversion. Here are some examples of implicit type conversions in JavaScript:

1. **String to Number Conversion:** JavaScript converts a string to a number when performing mathematical operations:
    
    ```javascript
    const str = "42";
    const num = str * 1; // Converts the string to a number
    console.log(num); // Output: 42
    ```
    
2. **Number to String Conversion:** JavaScript converts a number to a string when using the `+` operator with a string:
    
    ```javascript
    javascriptCopy codeconst num = 42;
    const str = "The answer is " + num; // Converts the number to a string
    console.log(str); // Output: "The answer is 42"
    ```
    
3. **Boolean to Number Conversion:** JavaScript converts a boolean value (`true` or `false`) to a number:
    
    ```javascript
    const bool = true;
    const num = bool * 1; // Converts the boolean to a number
    console.log(num); // Output: 1
    ```
    
4. **String to Boolean Conversion:** JavaScript converts a non-empty string to `true` and an empty string to `false`:
    
    ```javascript
    const str1 = "Hello";
    const bool1 = !!str1; // Converts the string to a boolean
    console.log(bool1); // Output: true
    
    const str2 = "";
    const bool2 = !!str2; // Converts the string to a boolean
    console.log(bool2); // Output: false
    ```
    
5. **Comparison and Equality Operators:** JavaScript performs implicit type conversion when comparing values using comparison operators (`<`, `>`, `<=`, `>=`) or equality operators (`==`, `!=`). It attempts to convert the values to a common type before making the comparison.
    
    ```javascript
    const num = 42;
    const str = "42";
    
    console.log(num == str); // Output: true (Implicit type conversion occurs)
    ```
    
    In this example, JavaScript converts the string `"42"` to the number `42` before performing the equality comparison.
    

Implicit type conversion can be convenient in some cases, but it can also lead to unexpected behavior and bugs if not handled carefully. It is generally recommended to use explicit type conversion (using functions like `parseInt`, `parseFloat`, `String`, etc.) when working with different data types to ensure predictable results and avoid unintended conversions.

# Data Types

JavaScript has several built-in data types that are used to represent different kinds of values. The main data types in JavaScript are as follows:

1. Primitive Data Types:
    
    * `Number`: Represents numeric values, such as integers and floating-point numbers.
        
    * `String`: Represents textual data enclosed in single quotes ('') or double quotes ("").
        
    * `Boolean`: Represents either `true` or `false`.
        
    * `Null`: Represents the absence of any object value.
        
    * `Undefined`: Represents a variable that has been declared but has not been assigned a value.
        
    * `Symbol` (added in ES6): Represents a unique identifier.
        
2. Complex Data Types:
    
    * `Object`: Represents a collection of key-value pairs, where the keys are strings and the values can be of any type, including other objects.
        
    * `Array`: Represents an ordered list of values, which can be of any type, and are accessed by their indices (0-based).
        
3. Function Data Type:
    
    * `Function`: Represents a reusable block of code that performs a specific task when invoked.
        

```javascript
const str = "Hello";
console.log(typeof str); // Output: "string"

const num = 42;
console.log(typeof num); // Output: "number"

const bool = true;
console.log(typeof bool); // Output: "boolean"

const obj = {};
console.log(typeof obj); // Output: "object"

const arr = [];
console.log(typeof arr); // Output: "object"

const func = function() {};
console.log(typeof func); // Output: "function"
```

# Arrays

Arrays are a fundamental data structure in JavaScript that allow you to store and manipulate multiple values in a single variable. In JavaScript, arrays are dynamic and can hold values of different data types, such as numbers, strings, objects, and even other arrays.

Here's how you can create and work with arrays in JavaScript:

1. **Creating an Array:** You can create an array using square brackets `[]` and separating the values with commas:
    
    ```javascript
    const numbers = [1, 2, 3, 4, 5];
    const fruits = ["apple", "banana", "orange"];
    const mixed = [1, "hello", true, { name: "John" }];
    const emptyArray = [];
    ```
    
2. **Accessing Array Elements:** You can access individual elements in an array using zero-based indexing:
    
    ```javascript
    const numbers = [1, 2, 3, 4, 5];
    console.log(numbers[0]); // Output: 1
    console.log(numbers[2]); // Output: 3
    ```
    
3. **Modifying Array Elements:** You can modify array elements by assigning new values to specific indices:
    
    ```javascript
    const fruits = ["apple", "banana", "orange"];
    fruits[1] = "grape";
    console.log(fruits); // Output: ["apple", "grape", "orange"]
    ```
    
4. **Array Length:** You can determine the length of an array using the `length` property:
    
    ```javascript
    const numbers = [1, 2, 3, 4, 5];
    console.log(numbers.length); // Output: 5
    ```
    
5. **Array Methods:** JavaScript provides several built-in methods for working with arrays. Some common methods include:
    
    * `push()`: Adds one or more elements to the end of an array.
        
    * `pop()`: Removes the last element from an array.
        
    * `shift()`: Removes the first element from an array.
        
    * `unshift()`: Adds one or more elements to the beginning of an array.
        
    * `splice()`: Adds or removes elements at a specific position in an array.
        
    * `concat()`: Concatenates two or more arrays.
        
    * `slice()`: Extracts a portion of an array into a new array.
        
    * `indexOf()`: Returns the first index at which a given element is found in an array.
        
    
    ```javascript
    const numbers = [1, 2, 3];
    numbers.push(4); // Adds 4 to the end of the array
    numbers.pop(); // Removes the last element (4) from the array
    
    const fruits = ["apple", "banana"];
    fruits.unshift("orange"); // Adds "orange" to the beginning of the array
    fruits.shift(); // Removes the first element ("orange") from the array
    
    const animals = ["cat", "dog", "elephant"];
    animals.splice(1, 1, "lion"); // Removes "dog" and inserts "lion" at index 1
    
    const combined = numbers.concat(fruits); // Combines two arrays
    
    console.log(numbers); // Output: [1, 2, 3]
    console.log(fruits); // Output: ["banana"]
    console.log(combined); // Output: [1, 2, 3, "banana"]
    ```
    

Arrays in JavaScript provide powerful functionality for storing and manipulating collections of data. They are extensively used in JavaScript programming for tasks ranging from simple list processing to more complex data structures and algorithms.

# Functions

Functions in JavaScript are reusable blocks of code that can be defined once and called multiple times to perform specific tasks or calculations. Functions provide a way to organize and modularize code, improving code reusability, readability, and maintainability.

Here's how you can define and use functions in JavaScript:

1. **Function Declaration:** You can declare a function using the `function` keyword, followed by the function name, a list of parameters (optional), and the function body enclosed in curly braces `{}`:
    
    ```javascript
    function greet(name) {
      console.log("Hello, " + name + "!");
    }
    ```
    
2. **Function Expression:** You can also define a function using a function expression, where the function is assigned to a variable:
    
    ```javascript
    const greet = function(name) {
      console.log("Hello, " + name + "!");
    };
    ```
    
3. **Arrow Function:** Arrow functions provide a shorter syntax for defining functions. They are commonly used for anonymous functions or when you want to maintain the lexical scope of `this`:
    
    ```javascript
    const greet = (name) => {
      console.log("Hello, " + name + "!");
    };
    ```
    
4. **Function Invocation:** Once you have defined a function, you can invoke/call it by using the function name followed by parentheses `()`, passing any required arguments:
    
    ```javascript
    greet("Alice"); // Output: Hello, Alice!
    ```
    
5. **Return Statement:** Functions can return values using the `return` statement. The `return` statement terminates the function and sends a value back to the caller:
    
    ```javascript
    function add(a, b) {
      return a + b;
    }
    
    const result = add(2, 3);
    console.log(result); // Output: 5
    ```
    
6. **Function Parameters and Arguments:** Functions can accept parameters, which act as placeholders for values that are passed when invoking the function:
    
    ```javascript
    function multiply(a, b) {
      return a * b;
    }
    
    const result = multiply(4, 5);
    console.log(result); // Output: 20
    ```
    
    In this example, `a` and `b` are the parameters of the `multiply` function, and `4` and `5` are the arguments passed when invoking the function.
    

Functions in JavaScript can also have default parameters, rest parameters, and access variables defined in outer scopes. They can be assigned to variables, passed as arguments to other functions, and even returned from other functions.

Using functions, you can organize your code into modular and reusable blocks, encapsulating specific functionality. They are a crucial part of JavaScript programming and enable the creation of complex applications and systems.

# setTimeout()

`setTimeout` is a JavaScript function that allows you to execute a function or a piece of code after a specified amount of time (in milliseconds). It is often used to delay the execution of code or to schedule an action to occur after a certain time has passed.

### Basic Syntax

```plaintext
setTimeout(function, delayInMilliseconds);
```

### Example

Here’s a simple example of how `setTimeout` works:

```plaintext
function sayHello() {
  console.log("Hello, world!");
}

// Execute `sayHello` after 2 seconds (2000 milliseconds)
setTimeout(sayHello, 2000);
```

In this example, the `sayHello` function will be executed after a 2-second delay.

### Example with Anonymous Function

You can also pass an anonymous function directly into `setTimeout`:

```plaintext
setTimeout(function() {
  console.log("This message will appear after 3 seconds.");
}, 3000);
```

### Clearing a Timeout

If you want to cancel the execution of a function scheduled with `setTimeout`, you can use the `clearTimeout` function:

```plaintext
let timeoutId = setTimeout(function() {
  console.log("This will not be logged.");
}, 5000);

// Cancel the timeout before it executes
clearTimeout(timeoutId);
```

In this example, the `clearTimeout` function prevents the scheduled function from running.

# Objects

Objects in JavaScript are complex data types that allow you to store and organize related data and functionality together. They are collections of key-value pairs, where each key is a string (or a symbol) and each value can be of any data type, including other objects.

Here's how you can create and work with objects in JavaScript:

1. **Object Literal Syntax:** The simplest way to create an object is by using object literal syntax, which involves enclosing key-value pairs in curly braces `{}`:
    
    ```javascript
    const person = {
      name: "John",
      age: 30,
      occupation: "Developer"
    };
    ```
    
    In this example, `person` is an object with three properties: `name`, `age`, and `occupation`. Each property has a corresponding value.
    
2. **Accessing Object Properties:** You can access object properties using dot notation ([`object.property`](http://object.property)) or bracket notation (`object["property"]`):
    
    ```javascript
    console.log(person.name); // Output: "John"
    console.log(person["age"]); // Output: 30
    ```
    
3. **Modifying Object Properties:** You can modify object properties by assigning new values to them:
    
    ```javascript
    person.age = 32;
    person["occupation"] = "Senior Developer";
    ```
    
4. **Adding and Removing Object Properties:** You can add new properties to an object by assigning a value to a new key:
    
    ```javascript
    person.location = "New York";
    ```
    
    To remove a property from an object, you can use the `delete` operator:
    
    ```javascript
    delete person.location;
    ```
    
5. **Nested Objects:** Objects can contain other objects as property values, allowing you to create nested structures:
    
    ```javascript
    const person = {
      name: "John",
      age: 30,
      occupation: "Developer",
      address: {
        street: "123 Main St",
        city: "New York"
      }
    };
    
    console.log(person.address.street); // Output: "123 Main St"
    ```
    
6. **Object Methods:** In addition to properties, objects can also have methods, which are functions defined as object properties:
    
    ```javascript
    const person = {
      name: "John",
      sayHello: function() {
        console.log("Hello, " + this.name + "!");
      }
    };
    
    person.sayHello(); // Output: "Hello, John!"
    ```
    
    In this example, `sayHello` is a method that can be invoked on the `person` object.
    

Objects in JavaScript are flexible and powerful data structures. They are widely used for organizing and representing complex data, modeling real-world entities, and building applications. Understanding objects and their properties and methods is essential for effective JavaScript programming.

# strings

strings, string methods

[https://www.w3schools.com/js/js\_strings.asp](https://www.w3schools.com/js/js_strings.asp)

# foreach

`forEach()` is a method available on arrays in JavaScript that allows you to iterate over each element in the array and execute a provided callback function for each element. It provides a convenient way to perform an action on each item in the array without explicitly using a traditional `for` loop.

The basic syntax of the `forEach()` method is as follows:

```css
array.forEach(callbackFunction(currentValue, index, array) {
  // Code to execute on each element
});
```

* `array`: The array on which the `forEach()` method is called.
    
* `callbackFunction`: The function to be executed on each element of the array. It is a user-defined function that takes three arguments:
    
    * `currentValue`: The current element being processed in the array.
        
    * `index` (optional): The index of the current element being processed.
        
    * `array` (optional): The array on which the `forEach()` method was called.
        

The `forEach()` method does not return a new array; it simply iterates through the array elements and executes the callback function for each element.

Here's an example of using `forEach()` to log each element in an array:

```css
const fruits = ['apple', 'banana', 'orange'];

fruits.forEach((fruit, index) => {
  console.log(`Element at index ${index}: ${fruit}`);
});
```

Output:

```css
Element at index 0: apple
Element at index 1: banana
Element at index 2: orange
```

In this example, the `forEach()` method iterates over the `fruits` array and logs each element along with its index to the console.

Note that unlike other array methods like `map()` or `filter()`, `forEach()` does not create a new array based on the return value of the callback function. If you want to transform or filter elements and create a new array, consider using `map()` or `filter()` instead. However, if you simply need to perform an action on each element without creating a new array, `forEach()` is a useful choice.

# map method

The `map()` method is a built-in array method in JavaScript that allows you to iterate over each element of an array and create a new array with the results of applying a provided callback function to each element. It is commonly used when you want to transform the elements of an array and create a new array based on the return values of the callback function.

The basic syntax of the `map()` method is as follows:

```css
const newArray = array.map(callbackFunction(currentValue, index, array) {
  // Code to transform each element and return the new value
});
```

* `array`: The array on which the `map()` method is called.
    
* `callbackFunction`: The function to be executed on each element of the array. It is a user-defined function that takes three arguments:
    
    * `currentValue`: The current element being processed in the array.
        
    * `index` (optional): The index of the current element being processed.
        
    * `array` (optional): The array on which the `map()` method was called.
        

The `map()` method returns a new array containing the values returned by the callback function for each element of the original array, in the same order.

Here's an example of using `map()` to double each element in an array:

```css
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
```

In this example, the `map()` method iterates over the `numbers` array, and for each element, it multiplies the number by 2 and returns the new value. The `doubledNumbers` array contains the new transformed values.

One of the advantages of using `map()` is that it creates a new array without modifying the original array, which makes it non-destructive. Additionally, the resulting array has the same length as the original array, and it preserves the order of elements.

`map()` is commonly used to transform data, such as converting objects into a specific property value or formatting data for display. It provides a concise and expressive way to transform arrays and is a powerful tool for working with data in JavaScript.

# Filter

The `filter()` method is a built-in array method in JavaScript that allows you to iterate over each element of an array and create a new array containing elements that satisfy a given condition. It is commonly used when you want to filter out specific elements from an array based on a certain criterion.

The basic syntax of the `filter()` method is as follows:

```css
const newArray = array.filter(callbackFunction(currentValue, index, array) {
  // Code to test each element and return true or false
});
```

* `array`: The array on which the `filter()` method is called.
    
* `callbackFunction`: The function to be executed on each element of the array. It is a user-defined function that takes three arguments:
    
    * `currentValue`: The current element being processed in the array.
        
    * `index` (optional): The index of the current element being processed.
        
    * `array` (optional): The array on which the `filter()` method was called.
        

The `filter()` method returns a new array containing all the elements from the original array for which the callback function returns `true`. Elements for which the callback function returns `false` will not be included in the new array.

Here's an example of using `filter()` to get all even numbers from an array:

```css
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

console.log(evenNumbers); // Output: [2, 4, 6, 8, 10]
```

In this example, the `filter()` method iterates over the `numbers` array, and for each element, it checks if the number is even (divisible by 2). If the number satisfies the condition (`number % 2 === 0`), it is included in the `evenNumbers` array. Otherwise, it is excluded from the new array.

Like `map()`, `filter()` also creates a new array without modifying the original array, making it non-destructive. The resulting array may have a different length from the original array, depending on how many elements satisfy the filtering condition.

The `filter()` method is useful for creating subsets of data based on specific criteria. It provides an elegant and concise way to extract elements from an array that meet certain conditions, making it a powerful tool for data manipulation and filtering in JavaScript.

# reduce

The `reduce()` method is a built-in array method in JavaScript that allows you to iterate over the elements of an array and accumulate them into a single value. It is commonly used when you want to perform a calculation or transformation on an array to derive a single result. The `reduce()` method executes a provided callback function for each element in the array, passing an accumulator as well as the current element, and returns a final value.

The basic syntax of the `reduce()` method is as follows:

```css
const result = array.reduce(callbackFunction(accumulator, currentValue, index, array) {
  // Code to accumulate the elements and return the updated accumulator
}, initialValue);
```

* `array`: The array on which the `reduce()` method is called.
    
* `callbackFunction`: The function to be executed on each element of the array. It is a user-defined function that takes four arguments:
    
    * `accumulator`: The accumulator accumulates the callback's return values. It is the result of previous iterations and is initialized with the `initialValue` (if provided) or the first element of the array (if no `initialValue` is given).
        
    * `currentValue`: The current element being processed in the array.
        
    * `index` (optional): The index of the current element being processed.
        
    * `array` (optional): The array on which the `reduce()` method was called.
        
* `initialValue` (optional): The initial value of the accumulator. If not provided, the first element of the array is used as the initial value, and the callback starts from the second element.
    

Here's an example of using `reduce()` to calculate the sum of all elements in an array:

```css
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // Output: 15
```

In this example, the `reduce()` method iterates over the `numbers` array, starting with an initial value of `0` for the accumulator. For each element, the callback function adds the current element's value to the accumulator. After all iterations, the final sum of all elements is stored in the `sum` variable.

`reduce()` is highly flexible and can be used to perform various operations on arrays, such as calculating sums, products, averages, and concatenating strings. It is a powerful method for deriving meaningful values from array elements and is commonly used in functional programming paradigms.

# if else

In JavaScript, `if` and `else` are conditional statements that allow you to execute different blocks of code based on whether a certain condition is true or false. These statements are fundamental in controlling the flow of your program and making decisions based on various conditions.

The basic syntax of the `if` statement is as follows:

```css
if (condition) {
  // Code block to execute if the condition is true
} else {
  // Code block to execute if the condition is false
}
```

* `condition`: A JavaScript expression that evaluates to either `true` or `false`. If the condition is true, the code block inside the `if` statement is executed; otherwise, the code block inside the `else` statement (if provided) is executed.
    

Here's an example of using `if` and `else`:

```css
const age = 25;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}
```

In this example, the `if` statement checks whether the `age` variable is greater than or equal to `18`. If the condition is true (age is 18 or older), it will log "You are an adult." to the console. Otherwise, if the condition is false (age is younger than 18), it will log "You are a minor.".

You can also use the `else if` clause to chain multiple conditions together. Here's an example:

```css
const score = 75;

if (score >= 90) {
  console.log("You got an A.");
} else if (score >= 80) {
  console.log("You got a B.");
} else if (score >= 70) {
  console.log("You got a C.");
} else {
  console.log("You got below a C.");
}
```

In this example, the program evaluates the `score` variable against different ranges to determine the grade. Depending on the value of `score`, it will log the corresponding grade to the console.

The `if` and `else` statements are essential for controlling the flow of your JavaScript code, enabling you to execute different blocks of code based on different conditions. They are foundational for implementing decision-making logic and making your programs more dynamic and responsive to different scenarios.

# switch case

In JavaScript, the `switch` statement provides a way to perform multiple comparisons based on the value of an expression. It allows you to specify different code blocks to execute for different values of the expression. The `switch` statement is useful when you have a single expression that you want to compare against multiple possible values, rather than using a series of `if` and `else if` statements.

The basic syntax of the `switch` statement is as follows:

```css
switch (expression) {
  case value1:
    // Code block to execute if expression matches value1
    break;
  case value2:
    // Code block to execute if expression matches value2
    break;
  // Add more cases as needed
  default:
    // Code block to execute if none of the cases match
}
```

* `expression`: The expression whose value you want to compare.
    
* `value1`, `value2`, etc.: The values you want to compare the expression against. If the expression matches any of these values, the corresponding case block will be executed.
    
* `default` (optional): An optional case that is executed when none of the other cases match the expression.
    

The `switch` statement works as follows:

1. The `expression` is evaluated once.
    
2. The value of the `expression` is compared with each `case` value.
    
3. If a match is found, the code block associated with that `case` is executed.
    
4. If no match is found and there is a `default` case, the code block inside the `default` case is executed.
    
5. If no match is found and there is no `default` case, the `switch` statement is skipped entirely.
    

Here's an example of using `switch`:

```css
javascriptCopy codeconst dayOfWeek = 3;
let dayName;

switch (dayOfWeek) {
  case 1:
    dayName = 'Sunday';
    break;
  case 2:
    dayName = 'Monday';
    break;
  case 3:
    dayName = 'Tuesday';
    break;
  case 4:
    dayName = 'Wednesday';
    break;
  case 5:
    dayName = 'Thursday';
    break;
  case 6:
    dayName = 'Friday';
    break;
  case 7:
    dayName = 'Saturday';
    break;
  default:
    dayName = 'Unknown';
}

console.log(`Today is ${dayName}.`);
```

In this example, the `switch` statement checks the value of `dayOfWeek`. Since `dayOfWeek` is `3`, the case with value `3` matches, and the code block inside that case assigns the `dayName` variable to `'Tuesday'`. The `default` case is not executed because there is a matching case for `3`.

The `switch` statement is a clean and concise way to handle multiple cases of a single expression, making your code more organized and easier to read when you have multiple comparisons to perform.

# for,for of , for in

In JavaScript, there are several types of loops that allow you to iterate over elements in an array, object, or other iterable data structures. The three commonly used loops are the `for` loop, the `for...of` loop, and the `for...in` loop. Each loop has its specific use case and syntax:

1. **For Loop:** The `for` loop is a traditional loop that allows you to execute a block of code repeatedly for a specified number of times. It is particularly useful when you need to loop a specific number of iterations.
    

Syntax:

```css
for (initialization; condition; increment/decrement) {
  // Code to be executed in each iteration
}
```

Example:

```css
for (let i = 0; i < 5; i++) {
  console.log(i);
}
// Output: 0, 1, 2, 3, 4
```

1. **For...of Loop:** The `for...of` loop is used for iterating over elements in iterable objects like arrays, strings, sets, maps, etc. It simplifies the process of looping through the elements without the need for an index variable.
    

Syntax:

```css
for (const element of iterable) {
  // Code to be executed for each element
}
```

Example:

```css
javascriptCopy codeconst fruits = ['apple', 'banana', 'orange'];

for (const fruit of fruits) {
  console.log(fruit);
}
// Output: 'apple', 'banana', 'orange'
```

1. **For...in Loop:** The `for...in` loop is used to loop over the enumerable properties of an object. It iterates over the keys (property names) of the object.
    

Syntax:

```css
for (const key in object) {
  if (object.hasOwnProperty(key)) {
    // Code to be executed for each property
  }
}
```

Example:

```css
const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (const key in person) {
  console.log(key + ': ' + person[key]);
}
// Output: 'name: John', 'age: 30', 'city: New York'
```

It's essential to choose the appropriate loop based on the data you are working with. Use the `for` loop when you know the number of iterations, the `for...of` loop when iterating over iterable elements, and the `for...in` loop when dealing with object properties.

# This keyword

[https://www.instagram.com/p/CtiQmvkv9WI/](https://www.instagram.com/p/CtiQmvkv9WI/)

In JavaScript, the `this` keyword is a special keyword that refers to the context in which a function is executed or an object is accessed. It allows you to access and manipulate properties and methods within the current execution context.

The value of `this` is determined dynamically at runtime and can vary based on how a function is invoked. Here are some common use cases and behaviours of the `this` keyword:

1. Global Scope: When used in the global scope (outside of any function), `this` refers to the global object. In a web browser environment, the global object is typically `window`.
    

```javascript
console.log(this); // Refers to the global object (e.g., window in a browser)
```

1. Object Method: When a function is called as a method of an object, `this` refers to the object itself. It allows you to access the object's properties and methods.
    

```javascript
const person = {
  name: "John",
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // Output: Hello, my name is John
```

1. Constructor Function: When a function is used as a constructor function with the `new` keyword, `this` refers to the newly created instance of the object. It allows you to set properties on the instance.
    

```javascript
function Person(name) {
  this.name = name;
}

const john = new Person("John");
console.log(john.name); // Output: John
```

1. Event Handlers: When a function is used as an event handler, `this` typically refers to the DOM element on which the event occurred. It allows you to access and manipulate properties of the element.
    

```javascript
const button = document.querySelector("button");
button.addEventListener("click", function() {
  console.log(this); // Refers to the button element
});
```

1. Function Context: The value of `this` in a regular function depends on how the function is invoked. It can be influenced by the use of explicit binding methods like `call()`, `apply()`, or `bind()`, which allow you to explicitly set the value of `this` within the function.
    

```javascript
function greet() {
  console.log(`Hello, ${this.name}`);
}

const person = { name: "John" };

greet.call(person); // Output: Hello, John
```

Understanding the behavior of the `this` keyword is crucial in JavaScript, as it allows you to access and interact with the appropriate context or object within your code.

# Hoisting

Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed. This means that you can use variables and call functions before they are declared in your code.

However, it's important to note that only the declarations are hoisted, not the initializations or assignments. Let's take a look at some examples to understand how hoisting works:

Example 1: Variable Hoisting

```javascript
console.log(x); // undefined
var x = 10;
```

In this example, the variable `x` is hoisted to the top of the scope (global or function scope). However, its value is not hoisted, so when we try to access it before the declaration, it will be `undefined`.

Example 2: Function Hoisting

```javascript
foo(); // "Hello, world!"

function foo() {
  console.log("Hello, world!");
}
```

In this example, the function `foo()` is hoisted to the top of the scope, so we can call it before its declaration. The function declaration is moved to the top, allowing us to execute it without any error.

However, it's important to be aware of the differences between function declarations and function expressions when it comes to hoisting. Function declarations are hoisted entirely, whereas function expressions are not. Only the variable declaration is hoisted in the case of function expressions.

Example 3: Function Expression Hoisting

```javascript
foo(); // TypeError: foo is not a function

var foo = function() {
  console.log("Hello, world!");
};
```

In this example, the variable `foo` is hoisted to the top, but its value, which is a function expression, is not hoisted. Therefore, when we try to call `foo()` before the variable assignment, we get a `TypeError`.

To avoid confusion and potential issues, it is recommended to declare variables at the top of their scope and define functions before using them. This practice promotes code readability and avoids unexpected behavior due to hoisting.

Overall, hoisting is a JavaScript behavior that allows you to use variables and call functions before they are declared in your code. However, it's important to understand how hoisting works to write clean and maintainable code.

# closures

Closures in JavaScript refer to the combination of a function and its lexical environment. A closure occurs when a function is defined inside another function (the outer function), and the inner function retains access to the variables, parameters, and scope of the outer function, even after the outer function has finished executing.

Closures are a powerful and important concept in JavaScript. They occur when a function is defined inside another function (the outer function), and the inner function has access to the variables and parameters of the outer function, even after the outer function has finished executing. In other words, the inner function "closes over" the variables of the outer function, and this combination of the function and its lexical environment forms a closure.

Here's a simplified explanation of closures with an example:

```css
javascriptCopy codefunction outerFunction() {
  const outerVar = 'I am from the outer function';

  function innerFunction() {
    console.log(outerVar); // Accessing outerVar from the outer function
  }

  return innerFunction; // Returning the inner function from the outer function
}

const closureExample = outerFunction(); // closureExample now holds the inner function

closureExample(); // Output: 'I am from the outer function'
```

In this example, the `outerFunction` defines a variable `outerVar` and a nested function `innerFunction`. The `innerFunction` has access to `outerVar`, which is a variable from its lexical environment (the outer function). When `outerFunction` is called and returns `innerFunction`, it creates a closure. The closure retains a reference to the `outerVar`, even after `outerFunction` has finished executing.

Closures are powerful because they allow functions to "remember" and access the scope in which they were created, even when executed in a different context. They are widely used in JavaScript for various purposes, such as creating private variables, implementing data hiding, and managing state in functional programming.

Here's an example demonstrating how closures can be used to create private variables:

```css
javascriptCopy codefunction createCounter() {
  let count = 0;

  return function () {
    return ++count;
  };
}

const counter = createCounter();

console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
```

In this example, the `createCounter` function returns an inner function that increments a `count` variable. The `count` variable is private to the returned function and cannot be accessed from outside. The closure ensures that the `count` variable is preserved between multiple calls to the returned function, allowing the counter to work correctly.

Closures are a fundamental aspect of JavaScript's functional nature, and understanding them is crucial for advanced JavaScript development and solving certain programming challenges effectively.

# Destructuring

Destructuring is a powerful feature in JavaScript that allows you to extract values from arrays or objects and assign them to variables in a concise and convenient way. It simplifies the process of accessing nested data structures and makes the code more readable and expressive.

There are two types of destructuring in JavaScript:

1. **Array Destructuring:**
    
    * Array destructuring allows you to unpack values from an array into individual variables.
        
    * The syntax uses square brackets `[]` on the left-hand side of the assignment.
        

Example of array destructuring:

```css
javascriptCopy codeconst numbers = [1, 2, 3];

// Destructuring the array into individual variables
const [a, b, c] = numbers;

console.log(a); // Output: 1
console.log(b); // Output: 2
console.log(c); // Output: 3
```

1. **Object Destructuring:**
    
    * Object destructuring allows you to extract values from an object into individual variables based on their property names.
        
    * The syntax uses curly braces `{}` on the left-hand side of the assignment.
        

Example of object destructuring:

```css
javascriptCopy codeconst person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// Destructuring the object into individual variables
const { name, age, city } = person;

console.log(name); // Output: 'John'
console.log(age); // Output: 30
console.log(city); // Output: 'New York'
```

You can also use aliases while destructuring to assign variables with different names:

```css
javascriptCopy codeconst person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// Destructuring the object with aliases
const { name: fullName, age: personAge, city: location } = person;

console.log(fullName); // Output: 'John'
console.log(personAge); // Output: 30
console.log(location); // Output: 'New York'
```

Destructuring is not only limited to top-level arrays and objects but can also be used with nested structures. Here's an example:

```css
javascriptCopy codeconst nestedData = {
  first: [1, 2, 3],
  second: { a: 4, b: 5, c: 6 }
};

const {
  first: [x, y, z],
  second: { a, b, c }
} = nestedData;

console.log(x, y, z); // Output: 1 2 3
console.log(a, b, c); // Output: 4 5 6
```

Destructuring is a handy feature in modern JavaScript, and it's commonly used to access and extract values from arrays and objects, especially when working with API responses, function parameters, or complex data structures. It improves code readability, reduces boilerplate code, and simplifies data manipulation tasks.

# rest operator

The rest operator (`...`) in JavaScript is used to represent an indefinite number of function arguments as an array. It allows a function to accept multiple arguments without explicitly defining them in the function parameter list. The rest operator collects the remaining arguments passed to a function and puts them into an array.

Here's how the rest operator is used in function parameters:

```javascript
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // Output: 15
```

In this example, the `sum` function accepts any number of arguments. The rest operator `...numbers` collects all the arguments passed to the function and stores them in an array called `numbers`. The `reduce` method is then used to calculate the sum of the numbers in the array.

The rest operator can also be used in array destructuring to collect the remaining elements into a new array:

```javascript
const [first, second, ...rest] = [1, 2, 3, 4, 5];

console.log(first);  // Output: 1
console.log(second); // Output: 2
console.log(rest);   // Output: [3, 4, 5]
```

In this example, the rest operator `...rest` collects the remaining elements of the array `[1, 2, 3, 4, 5]` after assigning the values of `first` and `second`. The rest of the elements are then assigned to the `rest` array.

The rest operator allows you to handle a varying number of function arguments or extract specific elements from an array while collecting the rest into a new array. It provides flexibility and simplifies working with variable-length argument lists or arrays with unknown lengths.

# spread operator

The spread operator (`...`) in JavaScript is used to expand or unpack elements from an iterable (like an array or string) into individual elements. It allows you to create copies of arrays, merge arrays or objects, and pass multiple elements as function arguments conveniently.

Here are some common use cases of the spread operator:

1. Array Expansion:
    
    * You can use the spread operator to create a new array by expanding the elements of an existing array.
        
        Example:
        
        ```javascript
        const arr = [1, 2, 3];
        const newArr = [...arr];
        
        console.log(newArr); // Output: [1, 2, 3]
        ```
        
2. Array Concatenation:
    
    * The spread operator can be used to concatenate multiple arrays into a single array.
        
        Example:
        
        ```javascript
        javascriptCopy codeconst arr1 = [1, 2];
        const arr2 = [3, 4];
        const concatenated = [...arr1, ...arr2];
        
        console.log(concatenated); // Output: [1, 2, 3, 4]
        ```
        
3. Object Expansion:
    
    * The spread operator can also be used to create a new object by merging the properties of existing objects.
        
        Example:
        
        ```javascript
        javascriptCopy codeconst obj1 = { a: 1, b: 2 };
        const obj2 = { c: 3, d: 4 };
        const merged = { ...obj1, ...obj2 };
        
        console.log(merged); // Output: { a: 1, b: 2, c: 3, d: 4 }
        ```
        
4. Function Arguments:
    
    * The spread operator can be used to pass multiple elements as arguments to a function.
        
        Example:
        
        ```javascript
        javascriptCopy codefunction sum(a, b, c) {
          return a + b + c;
        }
        
        const numbers = [1, 2, 3];
        const result = sum(...numbers);
        
        console.log(result); // Output: 6
        ```
        
5. String Expansion:
    
    * The spread operator can be used to convert a string into an array of individual characters.
        
        Example:
        
        ```javascript
        javascriptCopy codeconst str = "Hello";
        const chars = [...str];
        
        console.log(chars); // Output: ["H", "e", "l", "l", "o"]
        ```
        

The spread operator provides a concise and powerful way to work with arrays, objects, and function arguments in JavaScript. It simplifies the process of copying, merging, or expanding elements, improving code readability and reducing the need for traditional looping or concatenation methods.

# JSON

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTgwNzExNzZfMTQ4NzE0MTAyMTgyMzAyMl84NDUwNjAxNjI0NDcwODczMTU2X24uanBnP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMTAmX25jX29oYz11MVpDbC01UklOSUFYLWtfQTlrJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek9EUTNPREV4T0Rjek9EUTNOall6TXdcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZEQ0YtbXBQdWJSZ3pQTDZteVNEc0RCR2dDdGFpUDYyak95OVBXUEpvLTRXQSZvZT02NEJFMzI1MCZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTgwNzExNzZfMTQ4NzE0MTAyMTgyMzAyMl84NDUwNjAxNjI0NDcwODczMTU2X24uanBnIn0.K2YMepZzaCj6DDYrAklqgvS8-dC7BYkn32ed5Hg6NMM align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTczNzE4OTdfODAyMjYxMDcxMzMzODkwXzMyMDEyNzU0MjQxMjg1MjA5NTVfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwMiZfbmNfb2hjPUhNd3RzMTdnV080QVhfd2VJNEMmZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6T0RRM09ERXhPRGMwTmprek16TTJOQVxcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkNfTzRQNi1xWFdOSW9BaDROUFJ2Y3VmNEYzQ0N6RHVUN1B1b05Oa2hPTFRRJm9lPTY0QkYxRkJCJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NzM3MTg5N184MDIyNjEwNzEzMzM4OTBfMzIwMTI3NTQyNDEyODUyMDk1NV9uLmpwZyJ9.Cl9N4-QPwGKC0KfdguUxhjf8qvYVVod68O7OkaHGYvE align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTczNzY2NThfMTIxOTIzMTU1MTk5OTM3NF80MDQ3ODY5ODY3MzIxMDg4NjU4X24uanBnP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDImX25jX29oYz1vcnBZRndlckRYOEFYOENGTHlZJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek9EUTNPREV4T0RnM01qWXlPVE0wT1FcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZDMEFDOTNBZVVWNk5aeXNJQlFyWmFHLTdaRnlKazE1a2tld0lYUTFYbGRvUSZvZT02NEJERTNEMCZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTczNzY2NThfMTIxOTIzMTU1MTk5OTM3NF80MDQ3ODY5ODY3MzIxMDg4NjU4X24uanBnIn0.FkUEl_c9BIaeBKAjYd0Jc7TYNKCe4ItduKBSvnyeuW4 align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTcyODg4MTFfMTQ2ODk5ODUwNzI2MTAxMl8xOTM3Nzk0ODUwMTM5OTg0NDY2X24uanBnP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDAmX25jX29oYz1xMExsTkw0YnV4TUFYLXhlYlBpJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek9EUTNPREV4T0RjMU5UTXlNekkxT0FcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZDcGFsTTJRUmxjb2htYkpkUGZsdEt1UEhBYnRleF90OTlzSTFWemx2V3dhUSZvZT02NEJGNDA4OCZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTcyODg4MTFfMTQ2ODk5ODUwNzI2MTAxMl8xOTM3Nzk0ODUwMTM5OTg0NDY2X24uanBnIn0.sjQj6hTPiGhdnrsn3iEnLE2ROOC8cr9xjRIaq6Qg-d4 align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTcxNTMwMzZfMTEwODc5MzczNjU5MDE5MF84NzEwNzMxNTcxODQ2Njc2OTI5X24uanBnP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDYmX25jX29oYz14bXJkdEpNQTJ5Z0FYOVhYVGhHJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek9EUTNPREV4T0RnNE1UQTRNVGd3TlFcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZBeUhLcGdsbjg4ZzR1eWwzLUM2dVg4a0h5dVBBZ2RHZDNjRWlobU4weWVZUSZvZT02NEJGMDQ2RiZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTcxNTMwMzZfMTEwODc5MzczNjU5MDE5MF84NzEwNzMxNTcxODQ2Njc2OTI5X24uanBnIn0.4I99NbLqQ5mcYOKt_aZMEcEvzo40igT1zh_a-IISp78 align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTc2Mzk5MDJfNzk5NjQzNDg1MDM3NjQwXzg5MTcxNTc1OTk2MTI5MDQxODlfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwMCZfbmNfb2hjPWRkR1U0RnB4cVdrQVhfdzRZZUkmZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6T0RRM09ERXhPRGMwTmprMk5qUXpOZ1xcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkRHUlBTMjJKTU9JX3czLXh1THpkeWpYTUtCMkFYek9Xb005M2x3Y1RRd3dRJm9lPTY0QkVCNjBFJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NzYzOTkwMl83OTk2NDM0ODUwMzc2NDBfODkxNzE1NzU5OTYxMjkwNDE4OV9uLmpwZyJ9.Z2crpQwIVi3sLLlV_MQNbkzLXHwC9Hqr4zkHYhOb1jo align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTcyNDkyMjhfMTMyNDk2MDUxNTA0NTUyN18yNjg1NTA3Mjc5NTgxOTMyNzRfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTExMSZfbmNfb2hjPXV6STZiVW1POFgwQVg5aHQwTnQmZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6T0RRM09ERXhPRGMxTlRNeE16Z3lNZ1xcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkNjdjQ1S25VUXBsS09RV0VzWm9WS2JrZFVqZ29CT1BmS0NvT2ZjdzcyZkdnJm9lPTY0QkRCMEZDJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NzI0OTIyOF8xMzI0OTYwNTE1MDQ1NTI3XzI2ODU1MDcyNzk1ODE5MzI3NF9uLmpwZyJ9.owqeRBqsVxhngGycQG_QQMJ_KgjQBYPzWyDHNqMONZg align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTcxOTY5ODdfMTAyMDM0NDg3NTc5Nzc3N18yMjgzNjYwNjc1MDkyNTMwMjNfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwOSZfbmNfb2hjPWQ5M3Nkb1duNXRvQVhfWHpSZ3EmZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6T0RRM09ERXhPRGt4TkRZME5qSTJPQVxcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkQ2UEp2eUNLeDRYOHU1bWN6dmZXS01GczJIOV9SSkdkQ1lwcm9lWG9aS213Jm9lPTY0QkY2QzVFJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NzE5Njk4N18xMDIwMzQ0ODc1Nzk3Nzc3XzIyODM2NjA2NzUwOTI1MzAyM19uLmpwZyJ9.cpT1kVSYHRosmpom0tyOa4i_yPVcscMsTeTBqZl_4_U align="left")

# Fetch API

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU4MTg3MjRfNjE2Mjc4OTQwMjY5NjM5XzkzNTk2MzMwMTcxMDI5MjY2OV9uLndlYnA_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwMyZfbmNfb2hjPUNGVVJiWER0YWxJQVg5QThoWWomZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6TWpZNE1qSXhNVFV6TkRJeE5qUXhPUVxcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkJGVHlRTEd3Ynk1eThvcXJLOW5ybDYzZjhMSkdINXBxbVFvZUF5OTJvOHB3Jm9lPTY0QkYxODYyJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NTgxODcyNF82MTYyNzg5NDAyNjk2MzlfOTM1OTYzMzAxNzEwMjkyNjY5X24ud2VicCJ9.v-Lx2VTphMQvO7oBiBT_OuFvcsiPHa_JICJ5tgdaLOc align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU0MzE1MzhfNzc3MDMzNzcwODE4OTM0XzI2NDUyMjk2MDU4MTExMjkxMjBfbi53ZWJwP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDImX25jX29oYz14NGYyQjMtWk5Gd0FYLUhSUVZpJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek1qWTRNakl4TVRVd09EazVOVFF6TUFcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZCVmpnX1FScGZZMXl0RGJkOHlGSXlIalJYQU5pYzg0LVh2ZlU0a21POXRTUSZvZT02NEJERkNENiZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTU0MzE1MzhfNzc3MDMzNzcwODE4OTM0XzI2NDUyMjk2MDU4MTExMjkxMjBfbi53ZWJwIn0.v9MLVcDMcGdi34xjl0bXMTrSbiVdQ1MEBa24XaJba_M align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU4NDkyNTJfOTYyMTk5NDM0OTAxNDM4XzU1ODI5NTUyMTQ3ODEyNDQxNzVfbi53ZWJwP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDYmX25jX29oYz1qOWZVY29GdzktTUFYOHo5YlpsJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek1qWTRNakl4TVRRM05UUTFNakV3TkFcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZBM2hLZldoa2Fxci1nNXFReFRjaU1SMGZ5ZmZlZ3FGRHJoYndienQxOGFFZyZvZT02NEJFODU0MiZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTU4NDkyNTJfOTYyMTk5NDM0OTAxNDM4XzU1ODI5NTUyMTQ3ODEyNDQxNzVfbi53ZWJwIn0.gfrffHEOdzN6LfuhJC83xtPhBLi2PRI2WHquLYy2qGY align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU2NzgyMzVfMjU3ODE2MzczNTM0ODc4XzI5Nzg5NDY5OTE5MTM0NDA4Mzlfbi53ZWJwP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDImX25jX29oYz1CaTJ0SEhYTGJKSUFYOS1NSGp5JmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek1qWTRNakl4TVRVeU5UZzFOakUxTXdcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZCMy1DUDI4dVc5RVlmZVJxaE94ckJ0QWx1YndFUkFXX0E1aEd0WklwT1NVQSZvZT02NEJEOUJGNSZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTU2NzgyMzVfMjU3ODE2MzczNTM0ODc4XzI5Nzg5NDY5OTE5MTM0NDA4Mzlfbi53ZWJwIn0.tqAWS7CFrjWgxQlupzk_seXKFkksKQB5gxgEOClh8MI align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU4NjM4NTBfMTMxMDIzMDM3NjI2Mjg3NF8zNDAxMDI2NTI1MzI4ODgyNTU1X24ud2VicD9zdHA9ZHN0LWpwZ19lMzVfcDY0MHg2NDBfc2gwLjA4Jl9uY19odD1zY29udGVudC5jZG5pbnN0YWdyYW0uY29tJl9uY19jYXQ9MTEwJl9uY19vaGM9ZWFiZzU4NkJYOElBWDk4NUVPOSZlZG09QVBzMTdDVUJBQUFBJmNjYj03LTUmaWdfY2FjaGVfa2V5PU16RXpNalk0TWpJeE1UVXdNRGN6TXpRME1BXFx1MDAyNTNEXFx1MDAyNTNELjItY2NiNy01Jm9oPTAwX0FmQ0FiWDkzUUdmNVhmSHBjWWxFUGZyQVQ3UEx0M29NUkhLMmVJUThGLTlsWmcmb2U9NjRCRUFBMEYmX25jX3NpZD0xMGQxM2IiLCJmaWxlbmFtZSI6IlNuYXBpbnN0YS5hcHBfdGh1bWJfMzU1ODYzODUwXzEzMTAyMzAzNzYyNjI4NzRfMzQwMTAyNjUyNTMyODg4MjU1NV9uLndlYnAifQ.EettVZnN7_3pDJ75FYhNpvhqx1PkhBzDBMWkaZ884I8 align="left")

# Callback Hell

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTUxMDkxODVfNjIxODUxMTgxNDg5MzQ2OF8xNTYyMzA0MjY0NTI1MTc2MzQxX24uanBnP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDAmX25jX29oYz1ZdDl2eC1tWk5BY0FYX0ZjVVpYJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek1EYzVORFkxTURJM016TTNPRFE1TlFcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZBRDZCUmI3NE56S04tVndSd3NMVFNNRjBpcDFRLVRvSnhGVE00ekYzOHUzZyZvZT02NEJGNTdFMSZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTUxMDkxODVfNjIxODUxMTgxNDg5MzQ2OF8xNTYyMzA0MjY0NTI1MTc2MzQxX24uanBnIn0.UgZVVV-Hmn0Fs9RGoTqKZxjah12Y-KBYlZfuwm3Jb78 align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTUzODExOTZfMjgyNjkzNjQ0MTUwOTg3XzMwMjU2MDQ0MzcyMTYxMjU2Mjhfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTExMSZfbmNfb2hjPTlaTUJpclNPZ3dnQVhfV19mTjYmZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6TURjNU5EWTFNREkzTXpRek5EQTVNZ1xcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkNkUHhiQkNyR1lULTB2TW5FUEZQQVZXS25oWlp6SGFIMkZubExJRFpCU0p3Jm9lPTY0QkY1MzI5Jl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NTM4MTE5Nl8yODI2OTM2NDQxNTA5ODdfMzAyNTYwNDQzNzIxNjEyNTYyOF9uLmpwZyJ9.fK-WendzoJauzOE9iHXw5Qls-FTBCdDl3GRSPkVwVec align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU0NDczNzBfMjgxMDIyNDY0NDIwNjIxXzU1MzM1NTIyOTQ1NDI3MjkxMTBfbi5qcGc_c3RwPWRzdC1qcGdfZTE1X2ZyX3AxMDgweDEwODAmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDUmX25jX29oYz1GZDNFUzhRM1d0MEFYXzV2dVZEJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZvaD0wMF9BZkFCTVdQbGlpa01VWmllLVV2RkUycFFobGpvLVQzY1dwdFllTXRoRi1JV0xRJm9lPTY0QkI1MjQxJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NTQ0NzM3MF8yODEwMjI0NjQ0MjA2MjFfNTUzMzU1MjI5NDU0MjcyOTExMF9uLmpwZyJ9.J4moCEn7Oq1EcMX0lkTk349gK17IBG4wMmVWhbXlvSw align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU2OTY1MjVfNjUwMzk5NjI2NTg1OTEzXzM1NDgyMDY5MzE2NTgwNTM4ODBfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwNSZfbmNfb2hjPVVIQkM4Vml0TWlrQVg5WGN4RmEmZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6TURjNU5EWTFNREkzTXpRd056azJOd1xcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkR3cjBZZDlBUUF3b3hGVktYVVpzUkc1ZldfLXhDTDNwWEg2X3ozZGROQU93Jm9lPTY0QkY2NTJDJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NTY5NjUyNV82NTAzOTk2MjY1ODU5MTNfMzU0ODIwNjkzMTY1ODA1Mzg4MF9uLmpwZyJ9.S81OAClZ2Z5UIBmMn8TDFptdYSZWwhvF9Lfy-yoiwd8 align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU0MTc4ODFfOTg4ODczMTA1NjMwODc3Xzc0ODQ1ODg3NTIwMTQ2NzEzNTZfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwNSZfbmNfb2hjPXRZS3hTT0JWVTNBQVhfNU1ZQ04mZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6TURjNU5EWTFNREkyTlRBek16QTVNd1xcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkQzOFhPajdaTWpFVGtqTnpJTHFpSVBIeWZoV2hNSHF4Y0xDb09SM0pGWmlRJm9lPTY0QkU3NzlDJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NTQxNzg4MV85ODg4NzMxMDU2MzA4NzdfNzQ4NDU4ODc1MjAxNDY3MTM1Nl9uLmpwZyJ9.y9qgx1G_Fp1uOk45VZnbBKXhmwzO8dHDzbpZoyBTX8g align="left")

# Asynchronous js

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU0MjAzODdfODA3MDEwOTIxMDIwODgxXzI0MzcwODcyMTEzNjUzMDM1Nzhfbi53ZWJwP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDUmX25jX29oYz1MV2ZMOFItUkVZTUFYX0Y2R1RkJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek1USTBOVFV4TnpRNU1qWTBNRGd5T0FcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZDcW1DU0F5STlIXzhNT1JnYy1tMTFyS3F3SGVNeGt0T0xGbHo1ZUlTYTRiQSZvZT02NEJFNUFGNSZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTU0MjAzODdfODA3MDEwOTIxMDIwODgxXzI0MzcwODcyMTEzNjUzMDM1Nzhfbi53ZWJwIn0.V_YnqvpWapyhQ4NMKdgajjssG1CSfyAlX32YuOpI2Ts align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTUyNDA5NzRfMTM1MDk4ODI0MjEyMDU3Nl83ODU5NTM1MzAxOTk2MzE3OTkwX24ud2VicD9zdHA9ZHN0LWpwZ19lMzVfcDY0MHg2NDBfc2gwLjA4Jl9uY19odD1zY29udGVudC5jZG5pbnN0YWdyYW0uY29tJl9uY19jYXQ9MTAwJl9uY19vaGM9bU5ibkptMGswdWNBWDg3dnJEYSZlZG09QVBzMTdDVUJBQUFBJmNjYj03LTUmaWdfY2FjaGVfa2V5PU16RXpNVEkwTlRVeE56VTFPVGMxTnpNNE13XFx1MDAyNTNEXFx1MDAyNTNELjItY2NiNy01Jm9oPTAwX0FmRGh0MzJGYi1sWkU2eldVUWl3Smd5Y0J6c0FHdVNIWkhaU0NmRHdkQ3pCWVEmb2U9NjRCRjA1MjkmX25jX3NpZD0xMGQxM2IiLCJmaWxlbmFtZSI6IlNuYXBpbnN0YS5hcHBfdGh1bWJfMzU1MjQwOTc0XzEzNTA5ODgyNDIxMjA1NzZfNzg1OTUzNTMwMTk5NjMxNzk5MF9uLndlYnAifQ.LKHU9H0-3OHgtfSgC_ls2CO2MQoasOnirRQhOYL8_ic align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU0MzMwNTRfMTk2OTExMTUxMzQ1MDczOF83MTY4Nzc5NDkxNTQ3Mzk3MDUxX24ud2VicD9zdHA9ZHN0LWpwZ19lMzVfcDY0MHg2NDBfc2gwLjA4Jl9uY19odD1zY29udGVudC5jZG5pbnN0YWdyYW0uY29tJl9uY19jYXQ9MTEwJl9uY19vaGM9S3ZZWUhVNjh5YVlBWDlfWVlfXyZlZG09QVBzMTdDVUJBQUFBJmNjYj03LTUmaWdfY2FjaGVfa2V5PU16RXpNVEkwTlRVeE56VXpORFUyTXpRek5nXFx1MDAyNTNEXFx1MDAyNTNELjItY2NiNy01Jm9oPTAwX0FmRDJNVVlEcmRVd1d3ZjZSS0hhdjBJTk1qLXMzOU9NWWZQbVRLVTRaZ2k0VHcmb2U9NjRCRTc3MTQmX25jX3NpZD0xMGQxM2IiLCJmaWxlbmFtZSI6IlNuYXBpbnN0YS5hcHBfdGh1bWJfMzU1NDMzMDU0XzE5NjkxMTE1MTM0NTA3MzhfNzE2ODc3OTQ5MTU0NzM5NzA1MV9uLndlYnAifQ.L5ocUCL6htV5V1aboAmbFxv0-gWFwuFojTRmWQHTO8E align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU2MTgyMzRfMTk1OTAyMjI2NDE1OTA4XzQ3OTk2MzYwNTk4MDM4NTc4NzZfbi53ZWJwP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDAmX25jX29oYz1BOHB3a1hUMldTVUFYOVZucGhhJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek1USTBOVFV4TnpVek5EWXlOell3TWdcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZETjdvOFRVMEw4SVJmNUxMTU9hQXpCUlZCclNQaGRNbVY3ZkdSa1F3VU9QQSZvZT02NEJFMzc4QiZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTU2MTgyMzRfMTk1OTAyMjI2NDE1OTA4XzQ3OTk2MzYwNTk4MDM4NTc4NzZfbi53ZWJwIn0.22k3BSMnpjNF7U6YFX9Q7LKfAOwsfTDMpZgpl0JjgqU align="left")

# promises

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU1NzMyODRfOTQ4NTcwMzU5Njg3MDk4XzgwMjg2MTc2ODA0ODk5MTQ0NjBfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTExMCZfbmNfb2hjPWJOS3VnQ3FMdUprQVg4STJZYWomZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6TVRrME1qazBOekkwTXpZME1qRTNNQVxcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkQ1VFdFNkxOcjlrc0hKNE5Xd0d3ZHBHTkU0MmZpRXc3Y0VTUG1vMW9qOHB3Jm9lPTY0QkYyQTAxJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NTU3MzI4NF85NDg1NzAzNTk2ODcwOThfODAyODYxNzY4MDQ4OTkxNDQ2MF9uLmpwZyJ9._6ZnZsbDI9QgYL7UR9UJN-ETY0aEYtcF275cz4xfg9Y align="left")

Promises are an essential part of modern JavaScript for handling asynchronous operations. They provide a cleaner and more structured way to work with asynchronous code, such as making API requests, reading files, or fetching data from a server. Promises are objects that represent the eventual completion or failure of an asynchronous operation, and they allow you to handle the results when they are ready.

**Creating a Promise:** A Promise is created using the `Promise` constructor, which takes a function (often called the "executor") as its argument. The executor function has two parameters: `resolve` and `reject`. Inside the executor function, you perform the asynchronous operation and call either `resolve(value)` when the operation is successful, or `reject(error)` when it encounters an error.

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU1NDYyMDFfNzg2MjE2NTIyODgwOTIzXzM5MDYwNjIwNTgxNjc5MDQ2OTBfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwMyZfbmNfb2hjPVlNRmhYWGpUZC1nQVgtYTM2eEkmZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6TVRrME1qazBOek15TnpVM01qSTBOd1xcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkJvaTh5dUwwVFVQcW5FYk1vNEctdTRxYWJaQU5iakw4MDlmVGNaY0FHLTlnJm9lPTY0QkUwMkYwJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NTU0NjIwMV83ODYyMTY1MjI4ODA5MjNfMzkwNjA2MjA1ODE2NzkwNDY5MF9uLmpwZyJ9.JiFHpb3vUcFOsBY0jCAtgElwOknmYTvrYpzP-7kVtes align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU0MDg4MTRfMjI5ODU4NzU5ODYxMDI2XzQ2Mzc5ODIzNTQ4NDcxNTg2MDJfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwNiZfbmNfb2hjPXVkZkRON051c2EwQVg5a3FTaWMmZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6TVRrME1qazBOekl4T0RVeE5URTBPQVxcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkRLel9FSi1MbXVtQ3FvMDV1TmtWcGpMcERwWFAwRGVyWVlnYmhXMm5iZkhBJm9lPTY0QkREM0QyJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NTQwODgxNF8yMjk4NTg3NTk4NjEwMjZfNDYzNzk4MjM1NDg0NzE1ODYwMl9uLmpwZyJ9.PXhqbURgVoivjOCtjW18eui1MOU-UtcR4bjA3EBpC0M align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU4NDA5MTZfMTU4MzA0OTU5MjEwNDcwMF84MjAzMTY4NjU1NTI3ODUzOTM4X24uanBnP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDQmX25jX29oYz0wVUc1bkV4dERkVUFYLU43cTlzJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek1UazBNamswTnpBMk56UXdOamd4TkFcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZDT25CSkozRWc5NGJsZ21wWUoyeTNDLXJ1cTd1aVh5WXJFWV9ya1dWT1hZQSZvZT02NEJFMTVBNyZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTU4NDA5MTZfMTU4MzA0OTU5MjEwNDcwMF84MjAzMTY4NjU1NTI3ODUzOTM4X24uanBnIn0.H_ciUdzI5AAkMsnZjIzJ-uhAwZ0KuqS8V611P4pj5pg align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU2Mjc1NzFfMjMwNjQwNDk5ODI0NDg5Xzc1MTM4NTkyODgyNzMyOTg4NTlfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwOSZfbmNfb2hjPTZFTEJyS25VbWxZQVhfUFdBOGwmZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6TVRrME1qazBOekk1TXpnMU5qY3hPQVxcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkRVVEJZaXdoVWVmNlBpX2hCSWZZMmhNLWFENVRuWXFmdTNwNUJhTlc2aVNRJm9lPTY0QkY3MTRCJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NTYyNzU3MV8yMzA2NDA0OTk4MjQ0ODlfNzUxMzg1OTI4ODI3MzI5ODg1OV9uLmpwZyJ9.Vsct_0npTeK-lqD7fqtdfa6nE1Wddnq--wLz0eI_F2k align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU0MTk3NjBfMTcxNzIzNzQzMjAyOTc5NV84NjI5OTE4NDU1MjU3NDc2MjU4X24uanBnP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDMmX25jX29oYz1sVFlVRDlZdzgyTUFYLUl0akdRJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek1UazBNamswTnpJeE9EUXdOemd6TndcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZBQUprTUI5SDRIbUpQMVJkSXBHdDVPN3pLc0RleDMzdGZxOTRsTy00bHFuQSZvZT02NEJFNjk0OSZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTU0MTk3NjBfMTcxNzIzNzQzMjAyOTc5NV84NjI5OTE4NDU1MjU3NDc2MjU4X24uanBnIn0.Y6ydVM8yxF33GgIs5SWnynZR4r2kZMzX6ny_ijfOtiU align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU0MDc4NjFfNzk4MjUwNjU4NTA1NTE5XzIyNzgzMjM1ODg2NjQ0NTA5MzBfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwMyZfbmNfb2hjPUNkeVFKeGZoVGxZQVg5Z2VTc0QmZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6TVRrME1qazBOekEyTnpNNU9EWTNNUVxcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkRvdXpyZWVLMm5OZ05EYzNjd0hRNjFmWnIwSGlNREVVSEZrZGkyR2daa1R3Jm9lPTY0QkU1RThBJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NTQwNzg2MV83OTgyNTA2NTg1MDU1MTlfMjI3ODMyMzU4ODY2NDQ1MDkzMF9uLmpwZyJ9.J_fNBLFR6nk-hLskpBPGQZsul9u6FbKJS5bm1Gxq6rU align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU0MDk3MzdfMTQxOTY4OTQ0ODgyMzkwOF83MTY2ODA0OTE0MDEyNzk1ODcwX24uanBnP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDAmX25jX29oYz1sa2dCdXNWX05Yd0FYLW5KUThHJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek1UazBNamswTnpBMk56UXhPRGMxTVFcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZBY2NkcFFxTmVoX2VKN2ZrbjZsRl8yaG1yaVNfZmNVS29kWldxZDB3YjVCUSZvZT02NEJFQzMzRSZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTU0MDk3MzdfMTQxOTY4OTQ0ODgyMzkwOF83MTY2ODA0OTE0MDEyNzk1ODcwX24uanBnIn0.tJhV8q6YhtZRcuSwJ5Gh1FWATdychqoChR_nPRPVKWc align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTU2NzY5ODVfNTg1NDcwODMzNDc3OTYwXzIzMTQ3OTA4Mjg3MDE0ODI1ODdfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwNCZfbmNfb2hjPTA4cUJTanBEM244QVhfQVlFUFImZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6TVRrME1qazBOekEzTlRrd05qQXdOUVxcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkRvSXJ5cG9WSjJ5SFB0VjNGN2wxcmc0Q2JaQTdGRUFuMzZWb09SM3pnenhRJm9lPTY0QkYwQjAxJl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NTY3Njk4NV81ODU0NzA4MzM0Nzc5NjBfMjMxNDc5MDgyODcwMTQ4MjU4N19uLmpwZyJ9.6EFsZF1VPa9WMw1j_ihzl9k3jOf-aSRsp1UD_lyWxKE align="left")

**Syntax:**

```javascript
const myPromise = new Promise((resolve, reject) => {
  // Perform asynchronous operation
  // If successful, call resolve(value)
  // If an error occurs, call reject(error)
});
```

**Promise States:** Promises have three possible states:

1. **Pending:** The initial state when the Promise is created and the asynchronous operation is still ongoing.
    
2. **Fulfilled (Resolved):** The state when the asynchronous operation is successfully completed, and the Promise's `resolve` function is called with a value.
    
3. **Rejected:** The state when the asynchronous operation encounters an error, and the Promise's `reject` function is called with an error.
    

**Chaining Promises:** One of the key advantages of Promises is their ability to chain multiple asynchronous operations together. This is achieved using `.then()` and `.catch()` methods. The `.then()` method is used to handle the fulfilled state, while the `.catch()` method is used to handle the rejected state.

**Example: Fetching Data from a Server using Promise:**

```javascript
function fetchData() {
  return new Promise((resolve, reject) => {
    // Simulate fetching data from a server
    setTimeout(() => {
      const data = { id: 1, name: 'John Doe' };
      // Resolve with the fetched data
      resolve(data);
      // If an error occurs during fetching, reject with an error
      // reject('Error: Unable to fetch data');
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log('Data:', data); // Output: { id: 1, name: 'John Doe' }
  })
  .catch((error) => {
    console.log('Error:', error); // Output: 'Error: Unable to fetch data'
  });
```

In this example, the `fetchData()` function returns a Promise. After 1 second (simulated delay), the Promise resolves with the fetched data. If an error occurs (by uncommenting the `reject` call), the Promise will reject with an error message. We then chain `.then()` to handle the resolved data and `.catch()` to handle any errors that may occur.

Promises are an integral part of modern JavaScript, and they significantly improve the way we handle asynchronous operations. They provide a more structured and organized approach to handling asynchronous code, leading to cleaner and more maintainable codebases. Additionally, Promises are widely supported across modern browsers and Node.js versions. However, with the introduction of async/await in ES8, working with Promises has become even more convenient and readable.

```javascript
let g= new Promise((res,rej)=>{
let num=false;
if(num){
  res()
}
else{
  rej()
}
})

g
.then(()=>{
console.log("sucesss")
})
.catch(()=>{
  console.log("error")
})
```

# Async/Await

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTY5NTg5NDdfNTc0MjMwNjA4MjQ4MzY1XzQ4ODgxNzQwMTYxNzc3NDY3Mzlfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwOSZfbmNfb2hjPUp4VWpSUERGckhBQVg4WjlqUFomZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6TnprNE5ERTJOREk0T0RjNU9EY3hOd1xcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkRmNTdHMTE2aEpoUmhLRlUyWjJfQWhJdGs1bVdGMy1vUDZ6WjJPMUxJWFBRJm9lPTY0QkUyODE0Jl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1Njk1ODk0N181NzQyMzA2MDgyNDgzNjVfNDg4ODE3NDAxNjE3Nzc0NjczOV9uLmpwZyJ9.MhuknC0Vk5OTUbekn0HiAzLL0FPFEQ8zpdehm-UM8wE align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTcxMjgzOTBfMzQ2MjI2MTA1NzQzNzAwOF8zNDYzNjE5Mjg4MzI0NDQ2OTAxX24uanBnP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMDQmX25jX29oYz13bXVROHhRdDVka0FYOEowS2pkJmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek56azROREUyTkRJNE9Ea3lOREEzT0FcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZCUW1jVlo2b3JRSTBJSzZOcGdVcE54LW5leU1JNjI1ak50eUl6bjZrRFE5QSZvZT02NEJERTEyQiZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTcxMjgzOTBfMzQ2MjI2MTA1NzQzNzAwOF8zNDYzNjE5Mjg4MzI0NDQ2OTAxX24uanBnIn0.Y_omfjaMfxPMtyDXipysEbqigNHhW5SFxEiTZljhKoc align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTc0MjYxNjBfNzA3MjQ5MDc3OTAxMjk2XzI2Mzg1Nzc5OTM3NzY5ODM5NDBfbi5qcGc_c3RwPWRzdC1qcGdfZTM1X3A2NDB4NjQwX3NoMC4wOCZfbmNfaHQ9c2NvbnRlbnQuY2RuaW5zdGFncmFtLmNvbSZfbmNfY2F0PTEwNCZfbmNfb2hjPTlQbE9jeHZqZEUwQVg5TlNqUW0mZWRtPUFQczE3Q1VCQUFBQSZjY2I9Ny01JmlnX2NhY2hlX2tleT1NekV6TnprNE5ERTJORE13TlRnd09UWXdNUVxcdTAwMjUzRFxcdTAwMjUzRC4yLWNjYjctNSZvaD0wMF9BZkNEMzFaLWh4Z1Yzem84M25CMU1BMTJIaUQ4bDloVWR1MHVsWnNmWnhUWTNRJm9lPTY0QkQ5QkQ0Jl9uY19zaWQ9MTBkMTNiIiwiZmlsZW5hbWUiOiJTbmFwaW5zdGEuYXBwX3RodW1iXzM1NzQyNjE2MF83MDcyNDkwNzc5MDEyOTZfMjYzODU3Nzk5Mzc3Njk4Mzk0MF9uLmpwZyJ9.3wH3Mfwwb7wqR8g0XVcDd1mGCHnP7dROmdqsZ_rJlTE align="left")

![Preview](https://d.rapidcdn.app/snapinsta?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3Njb250ZW50LmNkbmluc3RhZ3JhbS5jb20vdi90NTEuMjg4NS0xNS8zNTc1NTQ5ODRfMTQxMTYzMDQ2NjA2NDI1MF8xNDkyMzU4MDAzOTY4NjEwOTM3X24uanBnP3N0cD1kc3QtanBnX2UzNV9wNjQweDY0MF9zaDAuMDgmX25jX2h0PXNjb250ZW50LmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMTAmX25jX29oYz1PSmV2d0VreFNld0FYLU5KbVk4JmVkbT1BUHMxN0NVQkFBQUEmY2NiPTctNSZpZ19jYWNoZV9rZXk9TXpFek56azROREUyTkRJNE9EZzRPVEU1T1FcXHUwMDI1M0RcXHUwMDI1M0QuMi1jY2I3LTUmb2g9MDBfQWZBRHBmOHM0Q3dvSzJYTDlpZXJiWjl0VHJLUVJHSHZLaXVGTWNFSGRKcGZFUSZvZT02NEJFRjMxQiZfbmNfc2lkPTEwZDEzYiIsImZpbGVuYW1lIjoiU25hcGluc3RhLmFwcF90aHVtYl8zNTc1NTQ5ODRfMTQxMTYzMDQ2NjA2NDI1MF8xNDkyMzU4MDAzOTY4NjEwOTM3X24uanBnIn0.7JLak5uQHZ-MGAArWajUTemCSDY92YJckzBLYiGDq5k align="left")

Async/await is a powerful feature introduced in ECMAScript 2017 (ES8) that provides a more straightforward and synchronous-looking way to work with asynchronous code in JavaScript. It is built on top of Promises and provides a more readable and structured syntax for handling asynchronous operations.

**Async Function:** To use `async/await`, you declare an `async` function. An async function always returns a Promise, and inside the function, you can use the `await` keyword to pause the execution until a Promise is resolved or rejected.

**Await Keyword:** The `await` keyword is used to wait for the resolution of a Promise. When you use `await` inside an async function, it suspends the execution of the function until the Promise is settled (resolved or rejected). The function will then resume its execution with the resolved value if the Promise was resolved, or it will throw an error if the Promise was rejected.

**Syntax:**

```javascript
async function functionName() {
  try {
    const result = await someAsyncFunction();
    // Code to execute after the Promise is resolved
  } catch (error) {
    // Code to handle errors if the Promise is rejected
  }
}
```

**Using async/await with Promises:** To better understand async/await, let's compare it with the equivalent code using Promises:

**Using Promises:**

```javascript
function fetchUserData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { id: 1, name: 'John Doe' };
      resolve(user); // Resolve the Promise after a delay
    }, 1000);
  });
}

function getUserData() {
  return fetchUserData()
    .then((user) => {
      console.log(user); // Output: { id: 1, name: 'John Doe' }
    })
    .catch((error) => {
      console.log('Error:', error);
    });
}

getUserData();
```

**Using async/await:**

```javascript
function fetchUserData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { id: 1, name: 'John Doe' };
      resolve(user); // Resolve the Promise after a delay
    }, 1000);
  });
}

async function getUserData() {
  try {
    const user = await fetchUserData();
    console.log(user); // Output: { id: 1, name: 'John Doe' }
  } catch (error) {
    console.log('Error:', error);
  }
}

getUserData();
```

As you can see, using async/await provides a more concise and synchronous-like code structure compared to Promises. It allows you to write asynchronous code in a more natural way, making it easier to read and maintain. Additionally, using try-catch blocks with async/await simplifies error handling, and it feels more like traditional synchronous error handling.

**Error Handling:** Async/await also simplifies error handling. If a Promise is rejected within an async function, the error can be caught using a try-catch block. This way, you can handle errors more cleanly and avoid nested `.then()` and `.catch()` chains.

**Handling Multiple Async Operations:** You can use `await` with multiple asynchronous operations, and they will execute sequentially. If you need to execute multiple operations concurrently, you can use `Promise.all()` with `await` to wait for all the Promises to be resolved.

**Async Functions and Return Values:** Async functions always return a Promise, whether explicitly with `return` or implicitly if nothing is returned. The resolved value of the Promise is the value returned by the async function.

**Async/Await vs. Promises:** While async/await provides a more readable and synchronous-looking code, it is important to note that it is built on top of Promises. Under the hood, async/await still relies on Promises, and it is fully compatible with existing Promise-based code.

In summary, async/await is a significant enhancement to JavaScript's asynchronous capabilities. It simplifies asynchronous code, reduces callback nesting, and makes it easier to work with Promises. It has become the preferred way to handle asynchronous operations in modern JavaScript development.

# Ajax

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687242945727/fb4d4f43-800b-4e67-a82d-40fffd936c57.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687243020626/d179f741-1d97-44e1-affe-b82f2dfad993.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687248617098/b65ccee3-c1d0-4578-9f93-0ac5c3b093b8.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687261919754/01c1ab63-c912-455a-94ef-92dc3d848483.png align="center")

normally using promises

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687261942484/a4728463-99f3-4b51-b317-4dadefaf7f49.png align="center")

```javascript

// let a = fetch("https://dummyjson.com/products/categories")

// a.then((q)=>{

//     q.json().then((w)=>{
//         console.log(w);
//     })
// })

async function y(){

    let q=await fetch("https://dummyjson.com/products/categories");

    let w=await q.json();
    console.log(w);
}
y()
console.log("hjhjjhj");
```