Level up Your JavaScript with .map(), .filter() and .reduce()

if you're not using map reduce and filter in your javascript you're missing out on three of the most powerful methods available in the language in this video you'll learn how to use map reduce and filter with plenty of examples and as always some hot tips all three methods share two basic principles firstly they do not mutate the original array they will always return a new value or array and secondly they get their values by iterating over each item in the array and applying a function that you provide we're going to start off with map and we're going to solve these four problems here then we'll move on to filter and we'll solve these problems here and finally we'll move on to reduce and again we're going to solve these problems so let's start off with map so map will call and provide a function for each item in the array the function must return a new value that will be stored in the current element's position let's have a look at the diagram of map and you can see that we start off with an original array here and we're going to finish off with a new array so we're going to iterate through each item in the array and we're going to apply a function to this data here and this is going to be inserted into these elements position so let's have a look at our first problem here it says create an array of 10 users with first name last name and age and we have faker here so we can insert some fake data let's start off by creating a new constant and we'll call this users and then we're going to use array and we know that we want this to have a length of 10 so i'm going to say array 10 and i'm just going to fill this with undefined and then i'm going to call dot map if we hover over this we can see that we're going to take an array and we're going to provide a callback function and the zeroth element in the callback function is going to be our value and then we're going to have an index and then the last element is going to be an array so we're just going to use the first element so this is going to be user but in this case we don't need to use user and we're going to return a new object for the user so i'm going to return a new object i'm going to have a property of first name and this is going to be equal to faker dot name dot first name then i'm going to have a property of last name and again this is going to be faker.name.lastname then i'm going to have a property of age and this is going to be faker.datatype and i'm going to call dot number and give this a max of 100. and inside our package.json we have nodemon and we can run our map filter and reduce i'm going to open up the terminal i'm going to say yarn map and if you want to follow along this repository will be on github so let's console log our users so we can see what is in this array and you can see here we have an array of 10 users or with first names last names and ages so we're ready to move on to our second problem here it says combine the user's first name and last name in a field called name make sure the user does not lose any other properties so i'm going to say const users with name equals and i'm going to map through users so i'm going to call users.map and for this we're going to pass in user as our first argument then i'm going to provide a pullback function and i'm going to return a new object and to make sure we don't lose any other properties i'm going to spread the current user onto the object then i'm going to say name and i'm going to use template strings for this so i'm going to say user dot first name then i'm going to provide a space and then i'm going to add the last name so i'm going to call user.lastname and let's console.log this users with names and you can see here we get firstname name and their name say add an email address to each user that is the first letter of their first name followed by a period followed by their last name and at example.com let's say const users with email equals and i'm going to map over users with name because we also want the name in this array and again i'm going to put user into the callback function and again i'm going to return a new object and to make sure we don't lose any properties i'm going to spread user then i'm going to say email and i'm going to use template strings again and i'm going to say user dot first name and i'm going to call dot substring because we just want a segment of this string and we're going to start at the zeroth index and we're going to get the first letter then i'm going to call dot 2 lowercase then i'm going to add a period now i'm going to add the last name so i'm going to go user dot last name and again i'm going to make this lower case and now i'm just going to add at example.com now let's print out our users with email and you can see here we get an email on each user so map is one of the easiest of the functions to use and it is very useful and you can see that all we're doing is iterating over each item in the list and then we're going to return a new property for that in this case we're returning a new object but you could simply return the index for each user and you're just going to get an array here from zero to nine and you can see that here so let's move on to filter so filter is used to do exactly what it sounds like built in an array of values down to a new array that match a condition so i'm going to say yarn so this is our filter diagram and you can see we start off with the original array and we're going to iterate through each item in the array and we're going to test to see if it matches a condition and if it does it's going to get appended to the new array but if the condition is not met the item will be omitted from the new array and our first task here is to copy from the map to create an array of users i'm just going to copy this here so we get an array of users to work with so create an array of users with an age of greater than 60. so i'm going to say const aldi's equals users dot filter and just like map we're going to get our user property here and if you hover over dot filter you can see down here the properties we're going to get so we're going to get our user object here and then we're going to get our index and then we're going to get this so i'm just going to return here and this return is a condition so in here we need to return a boolean so if we just return true and print out all these we'll just get the original array it's important to know that these methods do not mutate the original array so if we contour log this array here under oldies we would get the exact same array as we do up here because filter and map and reduce don't change the original array and you can see our aldi's here is untouched and if we were to return false we would get an empty array because no user matches the condition of just false to say return a user dot age is greater than 60. and you can see we have an array here of two users one is 79 and one is 66 which are both greater than 60. they create an array of users with an even age let's say const even equals users dot filter and to pass my user in as the argument and i'm just going to return user dot age i'm going to say modulus 2 is equal to 0. and this is if we divide the age by two how many remainders do i get and i'm just going to console log this even and you can see here we have 30 46 74 4 and 66 which are all even numbers the last problem here is to create an array of users that have a first or last name that start with a b c or d so i'm just going to say const u because i don't know what to call this array and i'm going to and i'm going to say users.filter i'm going to pass in my user as the argument and i'm going to create a constant called test and this is going to be the letters that we want to test for and in this case it's a b c or d so this is going to be an array i'm going to say a b c or d and i'm just going to move test outside of our filter because filter will iterate over each object and so it's going to recreate this test every single iteration of the user's array which is unnecessary then i'm going to create a new array called letters and this is going to be the first letter of the user's first name and the first letter of the user's last name so there's lots of ways to solve this problem and this is the one that i think is the nicest so i'm going to say user dot first name and again i'm going to get the substring i'm going to put in 1 0 and 1 to get the first element and i'm going to call dot 2 lowercase to make sure it's lower case because our test elements are all lowercase i'm going to copy this here and i'm gonna do the same for the last name dot last name now i'm going to return and i'm going to say test dot sum and sum is another array method that is a higher order function so i'm going to pass in i here and then our callback function is just going to say letters dot includes i and so what this is doing is it's going to iterate over test and it's going to say if some of these conditions here match then return true so let's console log u and you can see here we have kerry tremblay carol and so carol obviously starts with c we have doris and dora starts with d we have ed and their last name starts with d and the last user their last name starts with d so this all looks correct so let's have a look at reduce so reduce is the trickiest of the methods and it's the most controversial reduce will return a new value and should be used to reduce an array of data down to a single value so if we have a look at how reduce works we can see we have our original array here and then we're going to contribute to the accumulator and finally the accumulator is going to be reduced down to a single value so let's have a look at the first problem that we need to solve so we need to copy the code from map to create an array of users and each user needs to have a uuid so let's copy this user's array here and let's say yarn reduce and let's console log our users so the first problem is to find the sum of all users ages so i'm going to say const sum equals users dot reduce and again reduce is a higher order function and so it's going to take a callback and the second argument in reduce is the new value that you want to return so i can put a 0 in here and when we first iterate through the array our accumulator this ack here stands for accumulator is going to start off as zero but if i wanted my new value to be an array i would pass in an array here if i want it to be an object i would pass in an object but in this case we just want a single number so i'm going to say accumulator equals accumulator plus and i'm going to call current and this is this car here stands for current dot age and we need to return our accumulator so let's console log sum and you can see here the sum of all users ages is 583 so the next function is to get the average age of all users so this could obviously be done by console logging sum divided by users dot length and this would return the average but we want to use reduce to get this average so when i say reduce is the most controversial this is why because a lot of developers will use reduce when the output could be generated with less code and less confusing code you can see here that reduce can quickly start to get quite complicated but for demos purposes we're going to use reduce here i'm going to say const average equals users don't reduce and i'm going to console log the average and i'm going to console log it here as well just so we can check that they're the same so i'm going to say the accumulator plus equals i'm going to say current dot age then we need to pass in our accumulator and our current value and for this one we're also going to need the index and we want it to return a single number then i'm going to say if the index is equal to users dot length -1 then we're at the last iteration of the loop so i'm going to return accumulator divided by users dot length else i'm just going to return the accumulator so what this is going to do is it's going to iterate over every single user and this statement here will be false until we get to the last iteration and so we're just going to increment the accumulator until we get to the last one and then we're going to divide the accumulator by the user's length so you can see here we get the average of 51.3 and this is exactly what we would expect so the last problem we're going to solve with reduce is transform an array of users into an object with the user's id as the key so this is going to return a new object and we're going to have the id so we're going to have an id so it's going to say 123 and then the user's property is going to be in here and this is a very common use case for reduce so i'm going to say const user object equals and i'm going to say users dot reduce and we need to pass in our accumulator our current value and our new object so we're going to say the accumulator is going to be the current dot id and this is going to be equal to the current and i don't think we added the id up onto our users so let's quickly do that say user is equal to faker random dot u id and then we just need to return the accumulator and we can console load this you can call these values here accumulator and current you can call them whatever you want so you could call this all users if you wanted to and then you could call this one current user and this would work but i always call these ack and car and that helps keep the reduce a little bit less complicated whenever you go to use it so let's have a look at our output here you can see we have a key and this is the uuid and it matches the id of that actual user and we have the user attached to it and this has been applied for all users so all these higher order functions can have the body of the function taken out and put into a named function we can see here function get user name and we can take the body of our function here and we can put it up in here and this is going to take a user and now we can replace a map with this function and this will work exactly the same and this is obviously quite nice to do if you want to split the logic out however only ever do this with functions that are made to go inside your map reduce or filter don't get any other function that wasn't made for this purpose and try stuff it in here and the reason for that is because these are not the only properties that are passed into this function you can see here map is going to take our user and it's also going to pass in index and this so this argument here of index and this is going to be this so your function may not expect these arguments to be what map has passed in but map is always going to pass these arguments in so that is how to use map reduce and filter in javascript thank you for watching please make sure you like the video and subscribe and i'll see you in the next one

Channel: TomDoesTech

Views: 208

Rating: 5 out of 5

Keywords:

Id: WBPjr_vci48

Length: 20min 39sec (1239 seconds)

Published: Tue Sep 14 2021