Advanced-JavaScript-With-Projects/callBackFunctionPromisesAsyncAwait.html at main · marleyDip/Advanced-JavaScript-With-Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CallBack Function</title>
  </head>
  <body></body>
  <script>
    let displayData = (res) => {
      // do some work
      return res * 2; // 50 * 2
    };

    // displayData(50) Actually res = 50

    // sumData receives 3 parameters - 2 numbers & a result function
    let sumData = (num1, num2, result) => {
      // 20 + 30 = result(50)
      return result(num1 + num2); //calls result function & passing the 50 as an argument
    };

    // when function's inside parameter - that parameter call a function is called callback function

    let outPut = sumData(20, 30, displayData);

    // on the other hand, a callback function is a function that - is passed as an argument to another function

    console.log(outPut);

    /* anonymous function => a function without name (){} */

    let addData = (a, b, result) => {
      result(a + b);
    };

    /*
        (results)=> {}

        (result) argument for results

    */

    addData(10, 30, (results) => {
      console.log(`The sum is: $${results * 2}.00`);
    });

    let addData1 = (a, b, result) => {
      result(a + b); // The function continues executing
    };

    let out = addData1(10, 30, (results) => results * 2);

    console.log(out); // undefined

    let addData2 = (a, b, result) => {
      return result(a + b); //The function exits immediately after executing the callback
    };

    let out2 = addData2(10, 30, (results) => results * 2);

    console.log(out2); // 80

    // Practical Example with Calculation

    function calculation(a, b, operation) {
      return operation(a, b); //  operation(5, 3); The callback performs the actual operation
    }

    // Different callback Implementations

    let add = (x, y) => x + y;

    // add(5 , 3)
    // passing operation value a, b as argument here

    let multiply = (x, y) => x * y;

    console.log(calculation(5, 3, add));
    console.log(calculation(5, 6, multiply));

    /* setTimeout */

    function hello() {
      console.log("Hello");
    }

    setTimeout(hello, 4000);

    setTimeout(() => {
      console.log("Deep");
    }, 2000);

    /* synchronous */

    function sum(a, b) {
      console.log(a + b); // 3
    }

    // sum(1, 2)

    function calculator(a, b, sumCallBack) {
      sumCallBack(a, b); // call sumCallBack function & passing value 1, 2 as argument
    }

    calculation(1, 2, sum); // sum is function & add here as  a argument

    calculation(2, 4, (a, b) => console.log(a + b)); // direct call-back....(2, 4) => 6

    /* Asynchronous callback hell*/

    function getData(dataId, getNextData) {
      setTimeout(() => {
        console.log("data", dataId);
        if (getNextData) {
          getNextData();
        }
      }, 3000);
    }

    getData(1, () => {
      console.log("getting data2....");
      getData(2, () => {
        console.log("getting data3....");
        getData(3, () => {
          console.log("getting data4....");
          getData(4);
        });
      });
    });

    /*
        => Promise is for "eventual" completion of task.
            == means error or successfully but execute

        ==> it is an object in JS

        ===> It is a solution callback hell
    */

    /*
        let promise = new Promise((resolve, reject)=> {....})

      => Function with two handlers;
      => resolve & reject are callback provided by JS
    */

    /*
        3 states =>
          i) pending
          ii) fulfilled[resolved]
          iii) rejected
    */

    // let promise = new Promise((resolve, reject) => {
    //   console.log("I am a promise");
    //   // its  object so prototype is here
    //   //resolve("Successfully");
    //   reject("Some error occurred");
    // });

    /*
        Promise Object can be:
        => Pending = the result is undefined

        => Resolved = the result is a value (fulfilled)
            => resolve (result)

        => Rejected = the result is an error object
            => reject (error)
    */

    function getData1(dataId, getNextData) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log("data", dataId);
          resolve("success");
          if (getNextData) {
            getNextData();
          }
        }, 10000);
      });
    }
  </script>
</html>