// Promise = An Object that manages asynchronous operations. // Wrap a Promise Object around {asynchronous code} // "I promise to return a value" // PENDING -> RESOLVED or REJECTED // new Promise((resolve, reject) => {asynchronous code}) // DO THESE CHORES IN ORDER // 1. WALK THE DOG // 2. CLEAN THE KITCHEN // 3. TAKE OUT THE TRASH function walkDog(){ return new Promise((resolve, reject) => { setTimeout(() => { const dogWalked = false; if(dogWalked){ resolve("You walk the dog 🐕"); } else{ reject("You DIDN'T walk the dog"); } }, 1500); }); } function cleanKitchen(){ return new Promise((resolve, reject) => { setTimeout(() => {
const kitchenCleaned = true; if(kitchenCleaned){ resolve("You clean the kitchen 🧹"); } else{ reject("You DIDN'T clean the kitchen"); } }, 2500); }); } function takeOutTrash(){ return new Promise((resolve, reject) => { setTimeout(() => { const trashTakenOut = true; if(trashTakenOut){ resolve("You take out the trash ♻"); } else{ reject("You DIDN'T take out the trash"); } }, 500); }); } walkDog().then(value => {console.log(value); return cleanKitchen()}) .then(value => {console.log(value); return takeOutTrash()}) .then(value => {console.log(value); console.log("You finished all the chores!")}) .catch(error => console.error(error));
can you also show other ways to compare? like do you always need to use function? can you use other things? with every word, you should say what else can be used, like with the => also, what else could be used? etc.
Here some questions that helped me understand the video more ! I'm absolute beginner so don't judge 2:40 1) Why do we need callbacks to do these chores in order? I was wondering why don't we just call the functions like this.. walkDog(); cleanKitchen(); takeOutTrash(); We can't do this because the output is going to be >> You take out the trash >> You walk the dog >> You clean the kitchen So the function that takes less time is going to be executed first. Since we want to make sure that each chore is going to be done after the another in order we have to use callbacks since the next function It will never be called unless the function fully executes 3:10 2) What is Callback hell? is an old pattern to handle asynchronous functions I watched the video Callback hell , and It also answers the first question 3) Why do we need a new arrow function to act as it our callback and not use the functions that we already have ? walkDog(cleanKitchen(takeOutTrash)) I tried doing something like this , with the last function without a parameter since there is no next chore..It returned an error that the passed argument to walkDog is not a function ..and I checked the type by console.log(typeof cleanKitchen(takeOutTrash)) and it was undefined ..So this method only works for two chores maximum like this.. --> cleanKitchen(takeOutTrash) and the output will be following the order correctly 6:33 4) How can the function provide a value parameter ? one snippet of code that made me understand better is let prom = walkDog() // returns a promise object and store in prom setTimeout(() => {console.log(prom)}, 3000) /*which is going to make sure that the result of the promise is not pending , logging it without the timeout will output Promise { } which is also cool */ the output is going to be >> Promise { 'You walk the dog' } so we are just like passing the value to then handler like the following .. Promise {value}.then( value=>console.log(value)) ( searching different sites mainly FreeCodeCamp) our function walkDog is returning a promise object which can have there different results .. undefined: Initially when the state value is pending. value: When resolve(value) is called. error: When reject(error) is called. The .then() method should be called on the promise object to handle the value or the error of the promise. the parameters of then receive data from the Promise then(successFunc, rejectFunc) returns a promise If you are interested only in successful outcomes, you can just pass one argument to it. 7:22 5) Why returning cleanKitchen and not just calling it ? Because we want to return what the function returns so simply .. return what cleanKitchen returns cleanKitchen returns a promise and we want to returns that promise It just like storing the returned promise to const prom and then returning it like.. const prom = cleanKitchen() return prom we need a promise since we are going to attach the handler then to it
Legend. Such a hard concept to grasp, and after watching your video and following along closely, I understand Promises now. Entertaining, imo funny, and educational video. You never disappoint me. Thank you so much. You're awesome!
Take out the trash "is really quick" => open the window/door - throw the trash - close. 🙊 .... Thank you! Getting closer to understand. (The value in the end is a bit "confusing", but I will make some studies and samples.)
😅 It gets easier with a lot of repetition… It was hard to wrap my head around but just going back over and over and coding along simultaneously can & will do the trick.
Using the ? operator makes simple stuff much easier, check it out : function task1() { return new Promise((resolve, reject) => { let completed = false; setTimeout(function () { completed ? resolve("task1 completed") : reject("didint complete task1"); }, 3000); }); }
Can you please explain the code you wrote inside the then() method. What does it do and why are we creating the arrow function with value parameter and how is it able to access the resolve value
When you pass the value into the resolve, that value parameter is what gets sent to the ".then()" function (as a parameter) written at the end of the file. Just how promises work
I understood it, but you made it a little unclear than it should have. Using .then.then.then without returning anything would've been a little clearer maybe, but there are a few other ways.
So basiclly, we created async to make code run parallely,... then we found out that it caused some errors,... so we again create promises to make the async code, run sychronously 💀
@@bryanquartey-papafio7628 no he's misunderstood event based async with truly parallel async. I doubt he would know the difference between concurrent and parallel
I noticed some tutorials will create a variable equally a new promise kinda like this "var p = new Promise((resolve, reject))" ... in your example you returned promises, is there a preferred way or this situational ?
// Promise = An Object that manages asynchronous operations.
// Wrap a Promise Object around {asynchronous code}
// "I promise to return a value"
// PENDING -> RESOLVED or REJECTED
// new Promise((resolve, reject) => {asynchronous code})
// DO THESE CHORES IN ORDER
// 1. WALK THE DOG
// 2. CLEAN THE KITCHEN
// 3. TAKE OUT THE TRASH
function walkDog(){
return new Promise((resolve, reject) => {
setTimeout(() => {
const dogWalked = false;
if(dogWalked){
resolve("You walk the dog 🐕");
}
else{
reject("You DIDN'T walk the dog");
}
}, 1500);
});
}
function cleanKitchen(){
return new Promise((resolve, reject) => {
setTimeout(() => {
const kitchenCleaned = true;
if(kitchenCleaned){
resolve("You clean the kitchen 🧹");
}
else{
reject("You DIDN'T clean the kitchen");
}
}, 2500);
});
}
function takeOutTrash(){
return new Promise((resolve, reject) => {
setTimeout(() => {
const trashTakenOut = true;
if(trashTakenOut){
resolve("You take out the trash ♻");
}
else{
reject("You DIDN'T take out the trash");
}
}, 500);
});
}
walkDog().then(value => {console.log(value); return cleanKitchen()})
.then(value => {console.log(value); return takeOutTrash()})
.then(value => {console.log(value); console.log("You finished all the chores!")})
.catch(error => console.error(error));
Thank you bro!You made me understand promises!
can you also show other ways to compare? like do you always need to use function? can you use other things? with every word, you should say what else can be used, like with the => also, what else could be used? etc.
Finally, I understand PROMISES. Thanks
Here some questions that helped me understand the video more !
I'm absolute beginner so don't judge
2:40
1) Why do we need callbacks to do these chores in order?
I was wondering why don't we just call the functions like this..
walkDog();
cleanKitchen();
takeOutTrash();
We can't do this because the output is going to be
>> You take out the trash
>> You walk the dog
>> You clean the kitchen
So the function that takes less time is going to be executed first.
Since we want to make sure that each chore is going to be done after the another in order we have to use callbacks since the next function It will never be called unless the function fully executes
3:10
2) What is Callback hell?
is an old pattern to handle asynchronous functions
I watched the video Callback hell , and It also answers the first question
3) Why do we need a new arrow function to act as it our callback and not use the functions that we already have ?
walkDog(cleanKitchen(takeOutTrash))
I tried doing something like this , with the last function without a parameter since there is no next chore..It returned an error that the passed argument to walkDog is not a function ..and I checked the type by console.log(typeof cleanKitchen(takeOutTrash)) and it was undefined ..So this method only works for two chores maximum like this.. --> cleanKitchen(takeOutTrash) and the output will be following the order correctly
6:33
4) How can the function provide a value parameter ?
one snippet of code that made me understand better is
let prom = walkDog() // returns a promise object and store in prom
setTimeout(() => {console.log(prom)}, 3000) /*which is going to make sure that the result of the promise is not pending , logging it without the timeout will output Promise { } which is also cool */
the output is going to be
>> Promise { 'You walk the dog' }
so we are just like passing the value to then handler like the following ..
Promise {value}.then( value=>console.log(value))
( searching different sites mainly FreeCodeCamp)
our function walkDog is returning a promise object which can have there different results ..
undefined: Initially when the state value is pending.
value: When resolve(value) is called.
error: When reject(error) is called.
The .then() method should be called on the promise object to handle the value or the error of the promise.
the parameters of then receive data from the Promise
then(successFunc, rejectFunc) returns a promise
If you are interested only in successful outcomes, you can just pass one argument to it.
7:22
5) Why returning cleanKitchen and not just calling it ?
Because we want to return what the function returns
so simply .. return what cleanKitchen returns
cleanKitchen returns a promise and we want to returns that promise
It just like storing the returned promise to const prom and then returning it like..
const prom = cleanKitchen()
return prom
we need a promise since we are going to attach the handler then to it
thank you bro, you really helped me
Bro i was having the same doubt as your 3rd point! Thanks for sharing!
thanks !
Legend. Such a hard concept to grasp, and after watching your video and following along closely, I understand Promises now. Entertaining, imo funny, and educational video. You never disappoint me. Thank you so much. You're awesome!
Take out the trash "is really quick" => open the window/door - throw the trash - close. 🙊 .... Thank you! Getting closer to understand. (The value in the end is a bit "confusing", but I will make some studies and samples.)
async/await simplifies the process in the next topic
Your video made promises clear in my head. Thank you for your effort.
It is the best explanation ever.
Thanks
Why didn't I saw this video before? Now that's so clear! Thank you 🤗
2.5 seconds to clean the kitchen? Damn, that's a long time!
The best tutorial on promises. Thanks mannn
Bro, you rock. Thanks for the video!
This is super helpful, last night was having trouble wrapping my head around this but this video really made it click! Thanks man!
Very good thank you.
Fantastic, finally i got it🙏🙏❤️❤️
Wow, after watching many videos finally i understood. Thanks.
Honestly I find the "pyramid of doom" less confusing than promises
😂😂😂😂 same
😅 It gets easier with a lot of repetition… It was hard to wrap my head around but just going back over and over and coding along simultaneously can & will do the trick.
really helpful. Thanks
BRO FINALLY I UNDERSTAND AFTER 5 VIDEOS AND COURSES
i just searched about this tomorrow and you uploaded it today what are the odds ;)
awsome explanation !!
The way of your explain is Awesome #BroCodez
Thank You
Thank you very much
Wow thanks a lot. I was struggling to understand but now I do.
what a simple explanation after like 10 videos for that thx you bro 🙏
I finally fully understood. Thanks man.
thanks
THE BEST EXPLANATION
Using the ? operator makes simple stuff much easier, check it out :
function task1() {
return new Promise((resolve, reject) => {
let completed = false;
setTimeout(function () {
completed ? resolve("task1 completed") : reject("didint complete task1");
}, 3000);
});
}
Thank you, it was very clear and simple.
Man i love you sm i had such a hard time understanding callbacks and promises
You are awesome
Yuuuhh, killed it mann
Youre a savior man!
sharp.
Thank you
The best!
Thank you, it really helped me
Can you please explain the code you wrote inside the then() method. What does it do and why are we creating the arrow function with value parameter and how is it able to access the resolve value
When you pass the value into the resolve, that value parameter is what gets sent to the ".then()" function (as a parameter) written at the end of the file. Just how promises work
where was this when i was banging my head against the wall learning this ;.;
I was probably still recording it lol
If the code is asynchronous why does the first reject prevent the other functions from being executed
Because it promises to return a value, but the next function depends on the value.
OO LA LA
how he do this 1:50 ? This little picture ?
window key + > , for mac is CTRL + CMD + Space
@@hongquannguyen5532 Thank you, very appreciate !
thanks bud
I understood it, but you made it a little unclear than it should have. Using .then.then.then without returning anything would've been a little clearer maybe, but there are a few other ways.
So basiclly, we created async to make code run parallely,... then we found out that it caused some errors,... so we again create promises to make the async code, run sychronously 💀
No, it seems you have no fundamental understanding of how javascript runs. It's not parallel.
@@TragicGFuel he was right at the last part tho it did make it run synchronously
@@bryanquartey-papafio7628 no he's misunderstood event based async with truly parallel async.
I doubt he would know the difference between concurrent and parallel
@@TragicGFuel oh wait I see
Hi, why do we need the return when calling another chore?
31/8/2024
day 1 : 12:36
✅✅
I noticed some tutorials will create a variable equally a new promise kinda like this "var p = new Promise((resolve, reject))" ... in your example you returned promises, is there a preferred way or this situational ?
Can you not method chain instead of returning the values of the promises?
What if multiple rejects come??
this is more complicated and verbose than callback hell 😅
callback hell 10x better
31/8/2024
day 1: 12:36