Monad - FunFunFunction #21

Key Takeaways

good Monday morning I'm mpj and this is fun fun function today we are going to explore monads monads is a type of functor so you need to know what a funter is before watching this episode or it's not going to make sense thankfully there is a fun fun function episode for that which you can watch here a disclaimer a lot of the material out there on the into webs talking about MO ad is very picky on the details talking about the exact monad laws and uh how the monad is implemented in hasle and I think that doing it with that level of detail and correctness is going to cause you to not see the forest for all the trees so we're not going to do that in this video instead I'm going to try to make you get a sense of what the monut is and how it's used so our objective here is to make you get the monad not try to get every detail right because you can learn that later once you've gotten the monad so what is a monad do you remember that funter is something that implements map a monad is a more powerful functor that also implements flat map that's the main thing about the monad which begs the question what the hell is flatmap what is flat map good for what is flat about flat map before we get to that I'm going to show you a little bit of code that uses streams in case you're not familiar with streams there is a handy episode that you can watch here we are using bacon JS as our streaming library in this example but streams are streams all streaming libraries have similar functionality what you see in this video will for example apply to rxjs or Highland or really any other streaming library that will be written let me just run this to show you what it outputs and we start from there so it outputs cat meal and trumpet on line two here we are creating a bus which is uh the most basic type of stream in bacon jazz on line 78 and9 and we push a couple of words onto the stream these words are printed here by this console.log which is inside this uh function which is passed as a uh callback function to the onv value function of the stream and this function is called every time a word is emitted on the stream every time we call Push absolutely nothing strange going on here in the Stream episode we learned that streams are functors and that means that we can map them let's do that and uppercase each word before we print it map [Music] word word. to upper case bam and we run that cat meal trumpet great that is very useful in the Enterprise world but let's say that we uh want to use the Google Translate API to translate these words to Portuguese side note I will be speaking at braziljs the world's largest JavaScript conference in August let's uh delete this code for now and let's write a function that translates a single word to Portuguese using Google translate API like a good TV chef I have prepared some code if you look at the last two lines here you see that we call get Portuguese with a word and then that will return a stream that we just call on value on and pass it a call back which will print each word let's run that he my Portuguese is shite the code uses fetch to do a uh get request to the uh Google translate API if you're not jet familiar with how fetch works I have linked linked a good article in the description that will get you up to speed fetch will return an es6 promise but we are working with bacon JS in our app so we want our uh function to return a bacon stream we can accomplish this by passing our promise to bacon from promise which will return a bacon stream which we subsequently return as the return value of the function so the stream will be returned from this function now and we call on value on it with a call back word and it gets printed now let's try to tie this together with the bus that we had before I want to uh delete this going to add a few lines here let's create a stream Li Let's uh push some words and we want to print the these values out so I'm going to go stream and then we're going to call map and for every map we want to do take each word map over it and we want to call get in Portuguese for that word and when we get the value back from that we want to console.log it out word let's run that and see what happens whoops seems like map is just giving us the individual stream items the map is giving us these and that's not what we wanted we wanted the translated words funter and map you have failed us this is where the monad enters our story again monad is a more powerful funter that old also has flat map flat map works just like map but it will also flatten the streams to return the values contained within the streams so if we change the code here to use flat map instead of map see what happens we get he and treta tra tra ain't this cool what flat map does is that it will uh take the return stream here from P that comes from getting Portuguese and it will wait for that to resolve you know flatten it into its actual word value it will take the stream flatten it into the contained word value and then it will pass it on to the onv value callback here let me change back to map for a second just to give you like a rehearsal and we run with the known test Jazz that gives us the uh the the streams again and this is because now here getting Portuguese that will return streams and map will just take them and pass them on to uh on value directly it will not perform the flattening of the streams then we go back to flat map and run it again it will flatten the streams into the values contained within the streams you might have heard that some people say that promises are monads but here I am saying that uh monads are things that Implement flat map and Promises they don't have flat map do they well they do actually it's just not called flat map it is called then and this is one of those things that make monads seem a bit more complicated than they actually are they the flat map has many names other names that you might have heard are bind and chain but it is the same idea it's the same implementation it's just different names you can actually see this in action in the uh fetch implementation here response. Json here this does not actually return a uh an object literal that you might expect no this will return a promise which then will flatten into its value the parest object literal and it will pass it onto the Callback of the the next then which is this so par response here this will is not a promise anymore this has now been flattened into the object literal just the way we want it and then we can call it individual properties and extract the uh translated word here now back to the stream remember that uh streams are funs so we can map them let's do that and we just call uh word. to upper case boom let's run that so in summary a monad is a functor stream for instance that implements flat map in addition to uh map which all funs implements flat map has the same Principle as map with the exception that if the uh callback pass to flat map returns a monad of the same type you know if if stream if you're calling flat map on stream it returns a stream monad that uh stream monad will be flattened into its contain aining value before it's it's passed on and that is why we can call map directly on this and and get a plain word that we can uppercase here that's all I got did this video make sense to you did this video make you get what a monad is I will most likely do a follow-up to this video so please post your questions and confusions down below uh and I will try to address them in the next video that would that would really help me if you did that speaking of which do not miss that episode Monday morning 0800 GMT if you don't feel like waiting that long you can check out this playlist here with all the fun fun function episodes and see if something tickles your fancy in the meantime I am mpj this is fun fun function until next Monday morning stay curious