Map - Part 2 of Functional Programming in JavaScript

hello in this series we are learning how to do functional programming in JavaScript you can find the full series by clicking there in the last episode we learned about higher order functions since functions are just values like any other value in JavaScript we can exploit that by making functions that take other functions as their arguments and that is called a higher order function we also learned to use a higher order function filter we learned that filter is a method on the array object that takes another function as its argument and uses that function to filter the array in this episode we're going to learn about something new and awesome called map just like filter map is another higher order function also so like filter it goes through an array but unlike filter it doesn't throw the objects away instead it transforms them what what does it mean let me show you take a look at this array you might notice that I'm reusing the array from the previous video but that is simply because arrays of an is very very common in Enterprise grade programming but the problem is different this time around we want to get an array of all the names of all the animals this is super simple to solve with a map but before I do I want to show you how we would solve this using a for Loop so let's check out what this does just console log the output run it and you'll see that this just logs out the names the code is super straightforward it just Loops the animals array and uh for each uh animal it just picks the name property and it pushes it uh into the names array that we create on line 10 now let's do the exact same thing but using map instead I'll comment out the for Loop here and keep it around for comparison [Music] purposes right let's do this remember that I told you that map is a function on the array object just like filter is map will take a callback function just like filter does the Callback function will be past each item in the animals array but here is where map gets different from filter filter expected the its callback function to return a true or false value that determined whether or not the item should be included in the array or not map will include all items in the array but instead it expects the Callback function to return a transformed object that it will put into uh the new array instead of the uh the original animal in this case that will be the name like that now let's save and run it and see if it produces the same output as the for Loop bam exactly the same using map to return a subset of an object like this where we return just the the uh the the name property is a very common usage pattern however since map just expects the call back to return any object we can use it to create completely new objects let's run that Tada fluffikins is a rabbit Coro is a dog Hamilton is a yeah they're getting it don't but do you see how little code this is it is amazing I'm going to put the for Loop example next to the um the map example so that you can compare and I'm going to remove the extra code that we added to the map so that they are doing the same thing now check here when I'm selecting the the the map example and here in the lower left corner you see that this it's 6 6 characters and when I select the uh the for Loop example you see that it's 89 characters that is like 30% more let me put it put it like in one line just to uh show you show you the size difference I'm going to pull this out a bit that is a a lot shorter short code is good because less code almost always means less bugs but it gets even better in ecmascript 6 we're getting Arrow functions I'm going to rewrite this using Arrow functions Arrow functions is a new shorter and better Syntax for functions in ecmascript 6 it looks like this so it's a bit shorter but it gets better if your function logic fits on one line like in this example you can just get rid of the return statement and the uh curly brackets and this will uh whatever statement is after the arrow function will be implicitly returned so uh let me comment out the the stuff that we keep around for comparison and go back to the console and run this whoops this won't work right off the bat because as I said Arrow functions are a part of the ecmascript 6 standard and that is not fully implemented into browsers or node yet however if you running the latest version of ijs you can just use the harmony Arrow functions flag and it works if you're watching this video from the future you don't have to do this in functional programming it's common to go even shorter and just shorten the uh variable names to X like this bam let me put this next to the original for Loop just to show you how gorgeous this [Music] is if you don't think this is absolutely beautiful you I you just have no soul there is you can't see Beauty in the world just check this this is 38 characters and this is 90 and that concludes this informational computer science video about the higher order function map uh which is which is part of this um uh uh this series about functional programming in JavaScript next time we will look at a classic uh higher order function uh called reduce don't miss it Please Subscribe if you like this also follow me on Twitter at mpj me stay curious see you next time