 scary so arrays are awesome isn't it so let's say you have an array right and you can log that array the reason I'm showing this to you of course you know what arrays are I don't have to explain arrays to you the reason I'm showing this to you is because I have this plugin installed just to make it clear that I can I can output stuff right inside the editor so I just wanted to show you that so you know you know what's going on over there so of course you can map over arrays everybody knows that there's nothing special over there especially if you're using react then you know you've been mapping over everything and so you can map over an array and you can let's say double it right and it doubles the array you can see again from the log here that it is doubled right so this is not special everybody knows this already nothing really to explain in case you did not know what is really happening is that array dot map is essentially returning a new array so that's the return value is a new array and it is running the function that we have provided to map and it is it is running that function on every single element in that array right so that's my top thanks a lot for coming no so obviously I have been so I've been on this journey recently well let me introduce myself first so I I run this service called Errorception my name is Rakesh Pai I run the service called Errorception I am Rakesh 314 on that bird website and I have lately been interested in fact to the point of being obsessed with with writing error-free programs now of course part of this is probably because I run Errorception so I deal with errors on a regular basis and so that is something that's always there in the back of my mind it's also you know talks by things like Martin Fowler has has this talk on on YouTube where he talks about the future of programming and he talks about the fact that what is likely to be in the future is this is this hardened discipline about about being professionals about programming and one of that is one of the aspects of that is sort of making sure that your programs don't break and also I think one of them was this language called Elm now I don't know if you guys are you must have probably heard of Elm but I don't know if you're really familiar with Elm at all I'm a JavaScript guy so I'm not like interested in things like Elm and stuff like that but you know it's always good to have a look at such things from these from you know the corner of your eye and if you look at the Elm website this is one of their banner claims right is that there is no runtime exceptions and that's very very interesting this means your programs cannot break how can you write programs like that that cannot break it's very interesting so you know this is this is the kind of stuff that sort of got me into thinking about how can you write code that is sort of unbreakable and of course don't do any of this because I make money when you make errors so you know don't do any of this but you know I'm just just a thought process right so this this journey about trying to figure out how Elm makes that claim and how they can deliver on that claim is what got me into into sort of thinking about the substance of this talk and there are people who have tried to explain this before and they have all failed in in various interesting ways and so here I am to try to fail once again so you know let's give this a shot so it all starts with the humble array and let us so you know what happens if you map over an empty array well it's an empty array right nothing surprising there everybody knows this but what is interesting is this is not an error you are asking it to double nothing and it is not an error right it just keeps over you didn't have to write a null check you didn't have to say if array dot length is greater than zero you don't have to write that you know you don't have to have that null check but it still works it does not fail and that's very interesting this is so you know just as an example let's say that from somewhere you happen to get a man from somewhere right and then now you are console so now when I so you know that size expected it's a man what happens if I double a man it's still a man it's the same nothing case that continues so it's similar to how arrays behave empty arrays behave right it's the same nothing condition that continues another example of this this is all over the place you just haven't noticed it another example let's say you have a promise and I resolve the promise right with some value then I can dot then over it and I can double that and and my display my sort of plug-in thing does not work very well with promises because they are racing or whatever but dot then a similar dot map in the sense that you are sort of operating on the previous value so you know it's very similar in that sense and I'm doubling it but you know of course this will work as you expect but in case I had this as a reject right in case this was a failed promise then you would see that the dot then does not execute right similar to how the previous things are where the dot map does not execute in the case of an error and non man sort of does not execute it actually does execute man's do execute when you're doing the maths but you know as a result like in in JavaScript you do not have arithmetic errors because of the behaviors of man right that's amazing you can never have an arithmetic error in JavaScript because of this that's you know that's a sort of property a trait that what is it that makes that work is what sort of got me thinking about this stuff right so let's start with a more concrete example I've got this person object got some Facebook friends 42 it's not a very realistic number I mean it should be more like 2000 or something if it's Facebook right and so now let's say I can log person dot fb friends dot count right and that as you would expect is 42 let me just for the sake of display break this up like this right now let's say I want to find out this person's Twitter friends so I can just search for tw friends error obviously because there is no such thing as tw friends but then this is not the behavior I wanted all the other things that I showed you so far if there was nothing there it just continued right without an error but here we are having an error being thrown and we want to see how we can avoid this now of course the answer is simple we just have person dot Twitter friends and person dot Twitter friends dot count and then you get undefined everybody's written code like this right null checks this is a null check essentially or or you know what is it called defensive programming as some people call it ugly right what happens if this is five levels deep you know everybody's written code like don't act like you haven't right everybody's written code that does this right and this is ugly we all we all understand this is ugly so now how can we how can we use this behavior of array dot map and nans and promises and so on to help write code that cannot break so that's where I want to get at right so let's let's start with the as with JavaScript you always start with some functions so I'll start with is nil and this is not working out well so alright so this is what my is nil implementation looks like it you know if it returns true if the value is undefined or the value is null so that's what it's doing and let me also define a function called safe right and what this does is given a value if the value is nil sorry if the value is nil then it returns an empty array otherwise it returns the value inside an array okay and the reason I'm doing this is so that now I can so I can check I can make a safe version of person dot fb friends right and as you can see that's a that's an array with count inside of it and I can just map over that to get the count right and of course now the answer is 42 that expect that's expected but it is inside an array that's a little unexpected we did not want that inside an array but obviously it's inside an array because we have put it in an array over here right but if you ignore that for a second it is it is 42 and we can now switch this fb friends to tw friends and it's an empty array it did not break we have been able to achieve this behavior of code not breaking even though it does not exist in even though the keys that we are referencing does not exist right and it's very simple this is the trick right we have just put it into an array if it is nil it's an empty array otherwise it is an array with a value in it right and by virtue of the fact that it is an array you can now map over it and we're using the behavior of arrays over empty arrays that map does nothing so our code just works basically right are you with me so far okay excellent so I could end my talk here like this is this is this is the point right is that if you can take your data put that inside an array maybe an empty array and you map over it then you know your program suddenly becomes safe you cannot break right but arrays are not the best data type to use for this because you know arrays are loaded they have got potion pop and splice and all of these crazy things we don't want all of that for for our use case here so let's try to sort of make this a little simpler by creating our own data type rather than using array which is a loaded data type right so I'll just keep this here for a second move this to a new file so I'm just keeping an older copy of that because I'll come back to it in a second all right so let's start creating our data type what do we want we want an object that we can map over and it turns out this thing has a name it's called a functor a functor is an object that has dot map on it if you have come across this term it's a it's a word from functional programming if you have come across this term before and you have thought it's really confusing that's because people don't know how to explain it really this is all there is to it it's a function it is it's an object that has got that dot map on it that's a functor right I have said conditions apply because there are lots of rules about how dot map works for example an array dot map right it has to return an array it has to operate on every single individual value there are a lot of rules about how it works I'm not going through all the rules you know the rules really I don't have to explain them to you but there are rules and people are sticklers about those rules so you know it's important to stick to those rules but overall the idea is it's an object that has got dot map on it right so let's create an object that has dot map on it it's not hard so we'll create it so let's call our first object so let's try to attack this problem first about the empty array let's try to replace that with an object of our own so we'll call that object nothing okay and it has to have a map right what is C it has to have a map and of course in our case the map does nothing it just continues to return a nothing right this is a valid functor it's a map it returns nothing right the the the reason it by virtue of the fact that it does nothing it means it's a functor again that you have got and so you can continue to dot map over it right so it's like having an empty array return an empty array and then you can map over that to get another empty array and so on right and so we can now replace our thing over here with nothing and I'll come back to this display in a second so you can see that Twitter friends is showing a weird thing and obviously showing this weird thing because we have only got you know it's basically showing this object so it's mapped with the nothing over there so just for the sake of display I'll add a value here and I'll call that nothing and you can see that it displays nothing and again just for hygiene I'll just show dot value over here and you can see that that's nothing right now let's let's represent this value so we need the equivalent of an array of an object or a value inside a functor right so let's do that so we'll make this a constructor so this will take a value and this will return an object and again it has to have a dot map that's the only real rule we have and that takes a function and it it runs you know it invokes that function with that value except there's one more thing that needs to be done here this is why functor rules and stuff like that are important right is that this has to like in arrays it is not sufficient we just run the value on the function or run the function on the value you have to also return an array so it has to be in the same container type right so that's necessary so let's so we are creating the container types with safe so we can just use that you know to create our container type and so then this becomes just off that value right and so now you can see that this is nothing and if I change this to Facebook friends then it's undefined what went wrong can anyone catch what I did wrong what I didn't get that ah you're right you're right so just does not have a dot value so let's put our dot value here so just off value and that just 42 so just for cleanliness I'll put this inside Json Stringify does not matter in this case but like for example if I had removed this line then it becomes a little clearer what that is right so so that is that is what a functis you have just learned the new thing in functional programming if you didn't know about it before and it starts from that behavior about an empty array it's such a small fundamental thing but it can help you start writing programs that now become sort of unbreakable right again I could end my talk here but there is one more point that needs to be made is that you will occasionally run into this issue is everything good I'm guessing everything is good right okay you will run into this issue once in a while where you will have a functor inside a functor that will happen trust me so I'll give you an example here let's say that I just create a function called prop right and what this does is given a key and an object it returns the key of that object right so so I can like instead of calling dot map of this I can just say prop count right and has the same same effect right are you with me so far did you get that so alternatively I can just get rid of this FB friends as well and I can say map prop FB friends right and that's 42 as well and if I switch this of course to Twitter friends then that's nothing right but ideally you would want this prop functions return value to be safe as well because this could be null or undefined and you want to handle that correctly right so you might say that make this safe and now you've got a nothing inside a just which is incorrect right you did not want this so I'll come back to my previous array case here I just copy paste some code from here just to make that easier to work with so let's say add a prop and I think we can just copy all of this right so this is the vanilla array case where we have not created all those functors and you can see that this is undefined and if I had sorry of course this is undefined we want to get rid of value we don't have a value and so you can see that we are having an array inside an array similar to how over here we had a nothing inside a just right here we have an array inside an array and so we want to get rid of that and I don't know if you you must have heard about all the hype around the smush method that happened in JavaScript right that that smush thing the smush gate this conference would have been called like smush gate or something like that really but anyway so one thing that slipped by in the same update about that happened so smush ultimately got renamed to flat if you are aware it got renamed to flat but there was one more method that slipped into the specs at that time which nobody paid any attention to and that is called flat map and that solves exactly this problem so that is what flat map is meant for so what you can do is now you can flat map not flap so you can flat map so what that does is that basically does a map but rather than putting it inside an array it sort of just returns the value immediately so you are already inside the context of an array rather than nesting another array inside of it you know you can just flat map and so that does not give you that wrapper array right or the inner array actually in this case and obviously now when I switch to fb friends then it will give me the correct value right so let us try to replicate this behavior now in our functor by the way if you have a functor that does a flat map that is called a monad so monads are functors with flat map on it it is that simple I don't know why people make these things so complicated but it is really that simple right now flat map is a new thing in JavaScript before it was called flat map monads have existed before as well and they used to call it different things so it has been called dot chain it has been called dot bind there are there are names that people I think dot bind is in the Haskell world they call it dot bind but the name is not important the idea is important you know so anyway so let's implement a flat map in our case as well so again in the nothing case a flat map is very simple it just returns nothing it's already in our container right and in the just case flat map takes a function and returns the we are just not putting it inside a container this time there is no safe wrapper around right so it's just returning the function the result of invoking that function with that value and so now we can change all of this to say safe of flat map and now you get the value that you expect and so if you switch to Facebook friends you get 42 if you switch to Twitter friends you get nothing that is sort of the end of my talk but before I wrap up I will quickly show you that there are these things being used in the wild I already showed you elm if you look at the elm documentation there is this thing called a maybe maybe is the same as what I called safe maybe is essentially the same thing and it's got a just and a nothing as you can see so exactly the same terminology or you can go on to npm and search for for maybe and there are all these things that that tells you about you know truth and true and myth and you know what else option team maybe baby just for the name you should use that so so this is this is available also interesting to know is that promises have got this behavior built in already so in a promise if you inside a then if you return another promise right if the then that you have passed in that sort of disregards that promise or unwraps that promise right if you are aware of how that works so that is behaving like a monad as well so you have been using monads all this while arrays are monads you know it has got a flat map it is it has got a it's got a map it's got a flat map that makes it a monad promises are monads it's got it then and it's got it then so it's a little weird you know it does not exactly follow the semantics of a monad but it behaves like a monad you know so you are already familiar with monads you have already been using them I'm just showing you how it can be done better to improve to use this across all of your applications and improve the quality of all of your apps