-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathnew3.js
More file actions
346 lines (262 loc) · 9.32 KB
/
new3.js
File metadata and controls
346 lines (262 loc) · 9.32 KB
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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
ternary eg1
//A ternary operator is a shorthand way of writing an if–else statement in a single line.
function example(…) {
return condition1 ? value1
: condition2 ? value2
: condition3 ? value3
: value4;
}
// Equivalent to:
function example(…) {
if (condition1) { return value1; }
else if (condition2) { return value2; }
else if (condition3) { return value3; }
else { return value4; }
}
//ternary operator eg2
var age=15;
console.log((age>=18)? "You are an adult": "You are a kid");
let greeting = person => {
let name = person ? person.name : `stranger`
return `Howdy, ${name}`
}
console.log(greeting({name: `Alice`})); // "Howdy, Alice"
console.log(greeting(null)); // "Howdy, stranger"
//Understanding Synchronous vs Asynchronous JavaScript
//Synchronous Example
console.log("1");
console.log("2");
console.log("3");
/**
Output: Each statement executes one after another — blocking.
1
2
3
**/
//Asynchronous Example
console.log("1");
setTimeout(() => console.log("2"), 2000);
console.log("3");
/**
Output: The timer runs in the background — code doesn’t wait.
1
3
2
SYNCHRONOUS FLOW
----------------
Call Stack:
┌──────────────────────────┐
│ console.log("1") │
│ console.log("2") │
│ console.log("3") │
└──────────────────────────┘
↓
Output: 1 → 2 → 3
ASYNCHRONOUS FLOW
-----------------
Call Stack: Web APIs: Callback Queue:
┌──────────────────────┐ ┌──────────────┐ ┌──────────────┐
│ console.log("1") │ │ setTimeout() │ │ │
│ setTimeout(...) │ ───→ │ (2 sec timer)│ │ │
│ console.log("3") │ └──────────────┘ │ │
└──────────────────────┘ │ callback() │
└───────▲──────┘
│
Event Loop picks callback
and pushes it to Call Stack
Output: 1 → 3 → 2
**/
//Callback Functions
//hows how one function can be passed into another and executed later — the foundation of asynchronous JS (before Promises).
//A callback is a function passed as an argument to another function.
//It’s executed later — often after a certain task completes.
function calculateBonus(amount, customCalculatorFn){
return customCalculatorFn ? customCalculatorFn(amount) : 0.15 * amount;
}
console.log(calculateBonus(10));
console.log(calculateBonus(100, function customFn(amount) {
return 0.3 * amount;
}));
/**
calculateBonus takes an optional function customCalculatorFn.
If not provided, it defaults to 15% of the amount.
**/
/**
Promises
Promises replace the need for deeply nested callbacks and provide a cleaner asynchronous flow.
A Promise represents a future value eg to do sth after a file is downloaded eg.
Replaces callbacks
| State | Description |
| ------------- | -------------------------------------------------------- |
| **Pending** | The initial state — the operation is still running. |
| **Fulfilled** | The operation completed successfully — we have a result. |
| **Rejected** | The operation failed — we have an error. |
Creating a promise
resolve() is called when the operation succeeds.
reject() is called when it fails.
**/
let myPromise = new Promise((resolve, reject) => {
let success = true; // simulate condition
if (success) {
resolve("Task completed successfully!");
} else {
reject("Something went wrong!");
}
});
/**
You “consume” a Promise using .then(), .catch(), and .finally().
.then() runs when the promise is fulfilled.
.catch() runs when the promise is rejected.
.finally() runs no matter what (like cleanup code).
**/
myPromise
.then((message) => {
console.log("Success:", message);
})
.catch((error) => {
console.log("Error:", error);
})
.finally(() => {
console.log("Promise finished.");
});
//--------------another example of promise---------------------------------
let p = new Promise((resolve,reject) => {
let a = 1+1
if (a ==2){
resolve('Success')
}
else(
reject('Failed')
)
})
p.then((message)=>{ //then is called if promise is resolve
console.log('this is the then '+ message)
}).catch((message)=>{ //catch is called if promise is reject
console.log('This is in the catch ' +message)
})
/**
Example with Asynchronous Operation with setTimeout
setTimeout() simulates a delay — showing how Promises handle async tasks like API calls.
**/
const fetchData = new Promise((resolve, reject) => {
console.log("Fetching data...");
setTimeout(() => {
let success = true;
if (success) resolve("Data received!");
else reject("Network error!");
}, 2000);
});
fetchData
.then((result) => console.log(result)) // after 2 sec: "Data received!"
.catch((error) => console.log(error));
//Promise Chaining
//You can chain multiple .then() calls to run operations in sequence:
//Each .then() receives the previous return value.
new Promise((resolve) => {
resolve(10);
})
.then((num) => {
console.log(num); // 10
return num * 2;
})
.then((num) => {
console.log(num); // 20
return num * 3;
})
.then((num) => {
console.log(num); // 60
});
/**
Async / Await (Simplified Promises)
Promises are great — but chaining them can be messy.
So JavaScript introduced async/await, a cleaner way to handle Promises.
Async/Await makes Promises look like synchronous code. Cleaner/Modern syntax
async declares an asynchronous function.
await pauses execution until the Promise resolves.
**/
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => resolve("Data fetched!"), 2000);
});
}
async function getData() {
console.log("Fetching...");
const result = await fetchData(); // waits for the promise to resolve
console.log(result);
console.log("Done!");
}
getData();
//using Promise.all
//Runs multiple promises in parallel.
const recordVideoOne = new Promise((resolve,reject)=> {
resolve('Video 1 recorded')
})
const recordVideoTwo = new Promise((resolve,reject)=> {
resolve('Video 2 recorded')
})
const recordVideoThree = new Promise((resolve,reject)=> {
resolve('Video 3 recorded')
})
Promise.all([ //takes input as array
recordVideoOne,
recordVideoTwo,
recordVideoThree
]).then(message => { //message as array
console.log(message)})
// promise vs aysn await
// using promises
function organizeBirthdayParty1() {
inviteFamilyMembers().then((v) => {
console.log(v);
inviteColleagues().then((v) => console.log(v));
});
}
function inviteFamilyMembers() {
return new Promise((res) => {
setTimeout(() => {
res("Family members invited!");
}, 5000);
});
}
function inviteColleagues() {
return new Promise((res) => {
setTimeout(() => {
res("Colleagues invited!");
}, 5000);
});
}
organizeBirthdayParty1();
// The same operation using async-await
// The async/await version is cleaner, easier to follow, and avoids nested .then() chains.
//https://www.geeksforgeeks.org/difference-between-promise-and-async-await-in-node-js/#:~:text=Promise%20is%20an%20object%20representing,the%20code%20execute%20more%20synchronously.
async function organizeBirthdayParty() {
const familyInvitations = await inviteFamilyMembers();
console.log(familyInvitations);
const colleaguesInvitations = await inviteColleagues();
console.log(colleaguesInvitations);
}
function inviteFamilyMembers() {
return new Promise((res) => {
setTimeout(() => {
res("Family members invited!");
}, 5000);
});
}
function inviteColleagues() {
return new Promise((res) => {
setTimeout(() => {
res("Colleagues invited!");
}, 5000);
});
}
// organizeBirthdayParty();
/**
Summary:
| Concept | Description | Example Used |
| ----------- | --------------------------- | --------------------------------------------- |
| Ternary | Shortened if-else | Age check, greeting |
| Callback | Function passed as argument | `calculateBonus()`, `watchTutorialCallback()` |
| Promise | Async operation handler | `fetchData`, `watchTutorialPromise()` |
| Async/Await | Modern syntax for Promises | `getData()`, `organizeBirthdayParty()` |
| Promise.all | Parallel execution | Multiple video uploads |
**/