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 learn 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 gonna learn about something new and awesome Called map Just like filter map is another higher-order function Also, 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 animals 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 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 so long the output Run it you see that this just logs out the names the code is super straightforward it just loops the animals array and for each Animal it just picks the name property and its pushes it 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 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 passed each item in the animals array But here is where map gets different from filter filter expect that it’s callback function to Return a true or false value that determine 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 the new array instead of the 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 the the name Property is a very common usage pattern, however since map just Expects the callback to return any object we can use it to create completely new objects Let’s run that Tada! Fluffykins is a rabbit, Caro 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 gonna put the for loop example next to the the map example so that you can compare and I’m gonna 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 66 characters, and when I select the For loop example you see that it’s 89 characters that like 30% more. Let me put it put it like in one line as to show you show you the size difference I got pull this out a bit That is 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 statements and the curly brackets and This will… Whatever statement is after the arrow function will be implicitly returned, so let me comment out 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’re running the latest version of io.js 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 variable names to x like this Bam, let me put this next to the original for loop just to show you how gorgeous this 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… aaaahhh And that concludes this informational computer science video about the higher-order function map Which is which is part of this The series about functional programming in Javascript. Next time we will look at a classic higher-order function called reduce Don’t miss it, please subscribe if you like this, also follow me on Twitter @mpjme Stay curious, see you next time

Tags: , , , , , , , , , , , , , , ,


Leave a Reply

Your email address will not be published. Required fields are marked *