Promises - Part 8 of Functional Programming in JavaScript

hello people today we're talking about promises this video is part of a series where we learn functional programming with JavaScript in this video I will be making a lot of references to previous episodes so you'll get a lot more out of this video if you have watched the previous episodes by clicking there especially the first episode I've repeated a lot that one of the big things about functional programming is to make your code more composable in this series you've also seen a lot of cold max callbacks it's a way of telling your code that when this thing is done executes this piece of code promises serve that same purpose as callbacks do but promises are a bit more powerful because they are unlike callbacks composable we are going to get into the why and how and all kinds of fancy stuff about promises but first I'm going to show you just a very basic promise so we have a function that we are importing ah it's called load image promised I will be going into how to implement that function but for now we are just calling it load image promise is being called with the path to a cat this function call will return a promise promise has a method called them and we are calling then here and we are passing it this callback function when the image has finished loading this callback will be called with the loaded image the callback function itself is very simple it creates an image element and it assigns the SRC probably from the loaded image to the image elements and appends it to the body let me break the promise out into a variable yes to further illustrate that it is an object being returned so all we can return regularity - when cats loaded Oh like that and then we call then which will give us the same result oh this should be nice you should always use left in Atmos crib six so when cat loaded is a promise and that is just what it sounds like it's not the value itself it's the promise of the value in real life promises are useful because a person can say for instance a back and tell you that yeah we promise to lend you our this much money and then you can go to people selling houses and say that yeah the bank has promised me to lend me this much money and you can actually make a contract based on that even though the the you don't actually have the money yes I promise is something that you can pass around and you can write code around it even though you don't have the value just yet boom here is the same thing but implemented with the coal-black pattern instead of promises just like the other function that we saw this function takes a path to an image as its first argument however as the second argument it takes a callback the first argument to the callback function will be an error if there was one if there wasn't one the second argument to the callback function will be the success object in this case the image and the function body itself is exactly the same as the other four missed function and this is a fine pattern it's actually even a bit shorter than the de promise pattern so one might wonder why why use promises at all actually as many things in life when you start adding more cats things become complex do cats cats cats we are loading three cats I broke the code that adds the image element to the Dom out into its own separate function called add image the add image function is used here here and here so here we are calling load image callback with first cap that cap is going to be passed to the outer callback and that is then going to be passed into a add image here when that is done we're going to call load image callback with a second cap that is going to be passed here into the next outermost callback which then goes into add image here uh yeah and then we're done we've got a cool load image cold back here with the path and then that goes into the inner call back and that is going to be passed to add image what we see here is what is often referred to as the nodejs callback Christmas tree of doom this is extremely convoluted code I even had to reduce the font size to get this to fit sorry about that mobile viewers and this is just three levels deep imagine if you had six or ten or something like that it would be zonkers apart from this being incredibly ugly this code is actually not executing in parallel because the second callback is not going to be cold until the first one has finished and so on this is also dreadful from an error handling standpoint we're not doing an error handling here but if we did we would have to do something like this for every single callback coordinating stuff like this with just Kovacs is messy alright so we are now looking inside the load image pull back as expected it takes an arrow takes a callback it creates an image huh it will wait for the image to load and when it does it will call the callback using this tandem no pattern of now because we don't have an error and then the success object the image if there's an error it does the equivalent thing ah with the a message could not load image at right quits a new error with that message and passes it as the first argument to the callback ei here when we call no it's a letter and here first argument is the error and once it had set up those two listeners it will assign the SRC property of the image with a URL and this will trigger the image loading and now I would rewrite this to return a promise instead of using coal mines it will actually essentially become the function that I showed you in the beginning of this episode Eckman script 6 includes promises natively however unless you're watching this from the future not all browsers have implemented X script 6 fully yet luckily enough bubble provides a polyfill for the promises to use that I will go bubble if I only fill depending on how you get bubble into your project this line is going to be a bit different I use bubble fi which is a browser if I plug in and I will put a link to the full project that you're seeing here in the show notes but I won't go into specifics because these things change around a lot and I don't want this video to go out of date so su try to instead focus on the parts about the promises because those will stay true for years we are going to return a promise here the promise constructor takes a single function as its argument this function this this callback will in turn be called with two arguments resolve and reject both of these are also functions and JavaScript wants you to call these functions with the values when you have them or the error if you get one so let's just start moving things into a promise that's fine moving this in and instead of calling the the Coburg here with the valid value we will call result and we will only call it with the success value it smoothly on error here oh my keyboard is being an ass for work alright huh image on error you stand up calling the callback we will now call reject with the error ah and we will also move this image this time see in here am remove some lines and now this is no longer reference this callback so we can just remove it so we are now returning new promised you the promise we'll get this callback which in turn will be called with these resolve and reject functions which in turn we are expected to call with the either the success value or the failure value so here unload when we reload it week old we solve with the success image or if we get a failure we will call reject with this very let's go back to active Jas ok this is a bit badly named now let's uh let's rename it into just load image and now this won't do anything anymore because ah the syntax will now be that this returns an object which we are supposed to call then on and it won't be an error it just will just be the success value so it just did is remove those see a compilation error oh it's because we don't start these we have another compilation error oh yeah it's because I'm missing this still nothing happens ah let's check out the console ok error is not defined yeah because we have now removed the errors from the callbacks so let's get rid of those for the moment I will show you how to do error handling in it of course this still looks horrible remember how I told you that promises help us out better than callbacks because they compose let me show you what that means let me break each of the load image calls out so I can do that I'll move this here and I'll move this here ah and what I'm going to do now is promise dot all I'm going to pass indeed these in as an array so this is now an array of promises being passed into promise all I'm going to delete this and go again this is now getting a function all back which in turn is going to gaps all the images let me console.log that out to see that we're getting three images here ah they will have 11s to see there see this are the cat images let's do image dot for each IMG and call add image with image dot SRC ha Oh image s what how awesome is that how awesome is that look at how awesome it is let me clean this up a bit for you that oh there's a space there we can't have that oh this hurts me just let me rename this just rename low image it we can do that in one line crease it on size again right look how big we can make it now that we have so short an elegant code so now this load image function that we imported importing here is the one that returns a promise so when we are calling these load images here we are actually creating an array of promises here and we are passing that into the old method on the promise object and this is native to ACMA script six promise not all will in turn return a new promise which we are calling then and we are passing in a callback to them and that callback will be called with an array of the actual values that these promises return and for each image we are adding that image to the dome but what about the errors we remove the error handling before how do we handle errors when it comes to promises well you your scope catch and catch once another callback which should handle there and we'll do some error hunting here a little later if an error occurs in any of these it will follow up to this error handler which is so much nicer than having to handle the error in multiple places in summary promises are just like pull backs a way of dealing with a synchronous code when we don't know when things are gonna happen or in what order but promises are more powerful and callbacks because they compose I showed you one example of that today using promise oh but there are way more where that came from once you get comfortable with promises in this show I am doing the talking but you are the audience and without you it would just be neat screaming into the void so I need to hear from you I need to understand who you are because of creepy YouTube analytics I know where you're located how old you are and what gender you are but apart from that I am flying blind so please comment down below and tell me give me an idea of what kind of programmer you are do you work as a programmer are you studying is Yahveh script your first language what was the last thing you learned and we're not counting these videos stuff like that oh and the next episode is gonna be a good one I won't tell you what yep oh but you don't wanna miss it make sure that you subscribe and also blue if you already have turn on notifications for my channel on your phone I always post on Monday mornings but it's so good with the reminder right ah till next Monday stay curious

Channel: Fun Fun Function

Views: 316,914

Rating: 4.9364443 out of 5

Keywords: JavaScript (Programming Language), Functional Programming (Programming Language Paradigm), Programming Language (Software Genre), Technology, Training, Programming Paradigm (Film Subject), Programmer (Profession), Software Development (Industry), Software Developer (Project Role), Software (Industry), Software Engineering (Industry), Computer Science (Field Of Study), Computer Scientist (Profession)

Id: 2d7s3spWAzo

Length: 16min 56sec (1016 seconds)

Published: Mon Aug 31 2015