JavaScript Higher Order Functions & Arrays

This video is sponsored by reproducing errors that your browser logs along with things like debug logs and network traffic available as a Chrome extension or Firefox add-on. It facilitates communication between developers and non-developers and between companies and their end users. Network requests and responses are synchronized with recordings and it is a great tool for any developer. Check out the bug reproduction by clicking the link in the description below. Hey guys, I know a lot of you really like project videos where we build something from start to finish. I'm done and those are the kind of basic videos on this channel, but today I want to do something different that may not be as visually satisfying in the browser, but will really up your basic JavaScript game, so what I want to do is we'll talk about some of

higher

order

array methods, as well as writing them in a shorter and more elegant way using es6's arrow

functions

, so we will be working with methods like map filter sort reduce and I'm sure many of you are.

I wouldn't say I'm new to JavaScript, but many of you who don't really understand how these work have seen them quite a bit and are a little confused by them, so I hope this video can clear it up and you can see what they actually do, let's not to do anything too advanced, but we'll explain how they work and what the benefit is, and we'll actually compare them to a for loop that you know you would do in the past, so learn. These methods will really help you become a better programmer. I mean, you can do react and angular tutorials and you can really master the framework, but you want to do things like this so you really understand the language that lies beneath those frameworks.

The guys know and bought my 21 hour course on modern JavaScript from udemy from the beginning and we talked about these methods, but not as much as I would have liked, so I will add some of this material as well. as well as new material that has to do with functional programming in that course. Well, like I said, this won't be like a project where we build something in the UI, we'll just use the Google Chrome console for our thing, but it will really up your programming game if you don't know these methods, so if you want follow them, all you have to do is create an index.html file and a dot J main file and the HTML file is very simple, it's just basic head and body tags.

I have an h1 and then a link to the main point J s and in the main point J s we have two

arrays

, one called companies and it has just a bunch of objects with a name, a category and a start and end date for that company, for which is basically companies that ended and then we just have a simple array of numbers called ages so these are the methods we're going to look at so for each one it's basically just an An easier way to loop through an array instead of using it like a for loop.

It doesn't give you anything back like some of these others do, but it's a much nicer and more elegant way to get around it. data, so if the first thing I want to do is just do a standard for loop so we can compare what they look like and I know a lot of you already know this, but let's create a variable called, I set it to 0 and then we'll say that whenever I be less than companies, which is the array above the point length, as long as it is less than the number of companies in that array and then we want to increment by one through each iteration and we'll just console. .log each company, so we will say companies and then we need to extract the current index with the variable I so that it starts at 0 in each iteration, it will add one to I and print it, so let's save and run. and you can see we have that in the console now I'm using the live server from vs code so when I saved it it loaded automatically so I didn't have to keep reloading so that's basic for Labine.

I know most of you. You guys know this so let's take a look at each one so for each one we can take the actual array for the companies and we can say a point for each one and then what it does is it takes a callback function , okay, and this is synchronous. is not an asynchronous callback, so this includes which can include three different things, so basically we need an iterator, something that we can use for each company or whatever is in the array, so I'm just going to call to this company, but you can also get the index and you can also get the entire array, so those are the three things that can be passed in and that's the same with most of these

higher

order

methods, so here we'll move on and we'll console the dot log and just log company, okay, we'll comment out this for loop and save and get the same thing, okay, so this looks a lot better than this, there's no configuration, there's no I brackets, it's just which this is much prettier, it looks much better and if we wanted to get exactly like the name, we could just do the company name and there we go, very simple as I'm sure many of you already know this for each , so let's move on to the filter, so what the filter does is it allows us. to do just that, filter things out of the array, so let's say we want to look at this array of ages and we want to get all the ages that are 21 or older.

Now first I'll do this with a for loop. so we would define an empty array, we'll call it can drink because we want 21 or older and we would set it to an empty array and then we would do the for loop, so it would have to let me just move. For this, we would have to define our high variable, let I be equal to 0 as long as I is less than the age point length and then increment by 1 and then what we would do is take well, first we would have to do an if statement and we're I'm going to say that if age is I, then if the current iteration is greater than or equal to 21, then we wouldn't drink that canned drink, sorry about those guys fucking, we'd drink that variety of canned drinks and move on. add it using dot push and we would pass in ages I, so whatever the current age is, the current iteration is fine and then we could go down here, we could console dot log, you can drink the array, okay, so we'll go ahead and save that . and now we have an array of 21 and up okay so you can see 12 16 5 these are not in the array this is how we would do it with a for loop so let's do this let's do the same thing with the filter for that all What we need to do is define a variable again, we'll call it Can Drink and we can set it equal to the ages point filter and then this takes a function like the one you did for each and we'll pass it in.

I'll call this age. Okay, and we can also get the index and stuff like that if we want, but then we just have to meet our condition, which will be if the age is greater than or equal to 21, then all we have to do here is return true. there's no need to create an array and then continue with it, we just meet the condition and return true, so we'll go ahead and comment this out and save, and you can see we get exactly the same thing, so this looks a lot better. than this now we can even improve this, we can put all of this on a single line using the arrow

functions

of es6, so let's create the canned drink again and set it to the ages points filter and in here instead of doing the function like we did above.

We're just going to put the age parameter and we're going to set an arrow function and then we're going to put the condition which is that the age is greater than or equal to 21 and that's it, so let's go ahead and comment this out and save. and we get the same thing, so we go from this ugly snippet of code to this pretty fancy liar, so if you're applying for a job or just showing someone your code, if you have this instead of this, then make you look like a better professional, then these methods are really important, you don't want to do things this way when we have this available, so we'll do a couple more filter examples in case.

It's not registering yet, so let's go ahead and put some comments here, we'll say 21 or older so it's clear what's going on because I want it. I'll put this code in the description for you. In the next one, let's go ahead and filter out the retail companies. Okay, each company has a category and we want to get only one matrix or no matrix. Yes, an array, but we're not going to create a new one like we would with the map. We'll get there, but we'll only filter out the ones that are retailers, so we'll create a variable called retail companies and set it to company points filter and then I'll go ahead and do the es5 version. first and we'll pass these are companies so I'm just going to call this company okay and then we want to fulfill our condition and the condition is that if the company's points category is equal to retail, wow, retailer, then we just want to return true , Alright. so we're going to go down here and we're going to check the retail business record and we're going to save and now we have three objects in our business two, four and nine and they all have the retail category, so what do I want you to do now?

What you want, of course, is to pause the video and try to do this in a shorthand way using the arrow functions. Okay, see if you can do that and then come back and then we'll go ahead and do it to create retail businesses again. set it to companies if I can spell companies point filter and then we would put the company parameter here now. The reason I'm not putting parentheses around this like this is because it's just a parameter. Well, we can actually do this if I had more than one here, like if we also got the index, then we would have to have parentheses, but since we only have one parameter, we don't actually need these parentheses, so what we would do is the condition that It's company.

I can't spell company for some reason the points category is equal to or will be equal to retail so let's comment this and save and we'll get the same thing okay so let's do all the companies that started in the 80's so you can see we have 81, we have 89, so we want to filter out all the companies from the 80s. Let's do that, so we'll go ahead and say get companies from the 80s that I don't know and we'll create a variable. call it companies or we'll call it eighties companies and we'll set it up as companies and if you want to pause it and try this on your own, feel free to do so, so we'll say filter and I'll just do it with the short form from the beginning, so let's say company and what our condition will be if we want from the start date.

Ok, remember that they have a beginning and an end. We want the start to be between 80 and 89, so we're going to put a The condition here is going to be, actually, we want to wrap this in parentheses, so we're going to say company start point is, let's see, we're going to say it's greater than or equal to 1980 and, oh my god I can't spell company I should have chosen a different resource so company dot starts will say less than 1990 okay so that should work it has to be greater than or equal to 1980 and less than 1990 and that It should work, so let's go ahead and console. register companies from the eighties and save get five and if we take a look here we have 1 4 6 and 7 and 9 and if we look at the years, they are all in the 80s, so let's do one more with filter, let's get all the companies that lasted to least 10 years well some of these guys lasted longer some lasted less than 10 years eg 99 to 2007, 2011 to 6, 2016 so some of these didn't last 10 years so we want the ones that worked well , so that's what a comment here will do. let's say companies that lasted 10 years or more are fine, so we'll say we still last 10 years, we'll set it to company points filter, okay, so company and then what we want to do here is wrap this in parentheses. and we'll say company end point is okay, so we want to take the end date and we want to subtract Oops.

I want to subtract the company start point okay and then on top of that we want to make sure it's greater than 10, so this is how we could get it, let's say the console point log lasts 10 years and we save it, and now, if We look at our matrix, we have 81 223 92, well, actually I wanted to make ten years greater or equal because there is one that was ten years old. The years that Sookie accompanied seven were from 86 to 96, so now that's included, so I think that's enough with the filter, you can see how elegant it is and how easy it is to select certain things from the array or certain values , in this case our company objects, but let's move on to the map, so the map works a little differently instead of just filtering things, we can create new

arrays

of anything from a current array, so let's take all the names of companies and let's put them in their own array okay, so we'll say create an array of company names, so we'll createa variable called company names, we'll set it to companies dot and map and then all we have to do is pass in our company, this can also take the index in the entire array and actually, let's do it this way first and you know , I mean you don't have to use arrow functions if you don't want to, it's completely up to you, so company and then down here.

What we need to do is just return the company point, search for the name of the company point, okay, let's console. Let's register that gentleman and how we call it company names, save and that's it, now we just have a simple array with each one with the entire company. names, now we can do whatever we want with this, so I'm going to copy this comment and I don't know, we'll just call this test and then we could go back like all if we wanted for each element. in the array, so if we record the test, we would get an array of ones, if we wanted.

Call this a test map actually if we wanted, let's say we each wanted an array with the name and then the beginning of any air so we can return, you know, let's use a template, a template string here, so with template strings es6 this. it's the syntax of a variable, so we're going to say the name of the company and then we're just going to put in some square brackets and here we're going to put the start to end date so we can say company dot start and then we're just going to write a script. and then let's say company dot end so let's try that and now we just have a simple array with the name of each value and then a set of square brackets with the start to end date so you can format it however you want and then if we want to do this for short, we could go ahead and remove the function or move the parentheses around as well, so we'll say company and use an arrow function.

We no longer need the return or the keys, so we will get rid of this side. of these two too or just the curly braces and that semicolon and that should work, so I'm going to go ahead and comment this out and save and we'll get the same thing, okay, so let's see, let's do one more example with the map, let's use the ages. matrix, so what we're going to do here is take each one and get the square root or we're going to square it. We'll just use the math object for that, so let's say Const ages squared and we'll set it to ages point map and then here we'll say age, we'll use an arrow and we'll just do point square root or RT square calculations and we'll pass in the age and that's everything, so the console point register ages Square and save and there we go now we have an array of all those numbers squared if we wanted to pretend we wanted to multiply each one by to say ages times two and we could just do age, let's say age by two and save Lopes, which I do well I forgot the parentheses and here we go, so we will have each number multiplied by two and if we really wanted to use two maps, let's say we want to square it and then multiply it by two, we could get rid of this semicolon and then just go. go ahead and add another point map and when you do this it will usually put them on separate lines like this to format it, so let's see what that gives us, we'll just call it, let's call this I don't know age map and We'll change this to age map and we'll save, we'll see what we get, so what he did was first square all the numbers and then multiply them by two and we could go on like this and we can manipulate our data to make the map very, very powerful, so now let's take a look to order.

Well, sorting works similarly to the rest of these functions. Let's create a variable, let's call it ordered companies and what I want to do here is sort the companies by principle. year, okay, from the first year to the last, so we say it's equal to companies sort by points and sort will take a function and what we're going to do here is what we're going to do here is we need to pass in two values, basically it's they need two in In this case, two companies and it will compare them in any way we want. We're going to compare the start dates and then return one or negative one to move it up and down the array, okay? for each iteration two companies will be needed and we will compare them, so we need something to make this even more understandable: company one and company two, and then we basically want to test the start date, so we will say if c1 start point is greater than C, two point star, if that is true then we want to return one, otherwise we want to return a negative one, this is how it works, you want to return one or a negative one depending on your condition, so if we were to look at what do I get this.

I forgot my closing parenthesis, so let's console. Let's now record the seedy companies and save and see that we still have our age map, let's get rid of that and if we look now and check that the years start in the eighties. one and you see that it's actually sorted by start date, so to write this in a shorter form, we could say type of companies equals type companies dot now a lot of times I use C one and C two above, but a lot of times you'll see a and B, okay, it's kind of a standard, so we'll say a B and then we'll do.

I'll say start point or I'm just doing this off the top of my head, so we'll say A start point is greater than B star point and then we have to return 1 or return a negative one, so what we'll do is use a ternary operator, so with a ternary operator we put a condition and then if that's true we put whatever we want to happen here and I'm just going to return one, otherwise we use a colon, otherwise we want to return a negative one, not a negative one , a negative one, okay and then I'll just go. go ahead and comment on this and let's hope it works so we'll see the dates and there we go so that's an easier way to write this.

Let me just put a comment that says what we're doing, it ranks companies by star. So hopefully that's helpful guys, let's do one more with sorting, let's sort by ages, so we just have a simple array of numbers, we want to sort it from smallest to largest, so I'll say Const sort ages and we'll set this to ages points or and I want to show you what happens if we just do this, so let's do console.log, sort ages and save and if we look at this, it looks like it works right away until we get to a single number or a single digit number like five and what it's doing is basically just looking at the first number so to fix this we need to go again to and B or whatever you want to call it and then we just have to say minus B and save and now you'll see that five is at the beginning if you wanted this in order descending, then you could do B minus a sorry for the screams above and now you can see that five is at the end, okay, so that's it, so let's go. let's talk about reducing a little bit now reduce that is, it can be used for a lot of things and it can get quite complicated, we'll keep it simple and use it to add all the ages so we have this age array with all the numbers, let's add all of these and first I'll do that with a for loop so you can see the difference, so what we have to do is first create a variable that we'll call age, some will set it to zero and then we would have to do our for loop, which in itself is just a headache so what I call zero I is whenever I is less than the length of the age point and then plus plus and then what we would do is take age from the variable that we just created and we would just use a kind of pen and two more is equal to whatever that iteration is, so ages, wow, okay and then we could console the point record what's the age? sum and we get 460 so that's all added up so let's do this with reduce so we'll just create a variable called age sum and we'll set it to ages dot reduce and then here we'll put a function and say age actually sorry for reduce, we need to do the total and then the age and then we'll go down here and return the total plus the age, okay and we'll also take a second parameter from the total. which will be zero, okay it will start at zero, so let's take this, comment and save and we still get 460, now this is a little long, it's actually as long or longer than the for loop, so to shorten it, we would use an arrow function, so we're going to go ahead and remove the function, add our arrow and remove the return and the brace and we're going to go here to get rid of the brace and this semicolon and that.

It should do that too, so we'll comment this out, save and still get 460, so this is a much more elegant way than doing it this way, so let's do another example with reduce, let's get the total years for all the companies. so the range for each company will add all of those together to get the total years for all companies, so we'll say Const, we'll call it total years and we'll set it to companies, period, reduction, here we'll put company and then what we'll do is we'll just go back. Sorry, this should be total and co.

I always forget that, so total and company and then we want to return total plus and in parentheses we're going to do the company end point. company dot start okay and if we do that, let's go ahead and console.log total years, if we do that now we'll get this weird looking thing because we forgot the zero, remember we have to add that second parameter of zero, okay, now we get 118 and just to test it, if I go up here and add an extra year, let's say this top one will say 2004, to save it, we should get 119, so it takes the time of each company and adds them. all together, to do this in a shorter way, you'll see arrow functions and if you want to pause it and try it yourself and see if you do it right, then I mean it's a great way to learn, but what we would do. what we do is we get rid of the function, we would add shouts to our arrow, we'll get rid of the return and that, we'll get rid of that and that, okay, we'll comment this out and save and we'll get 119 still okay, so that's for each map filter reduce and order now you can use any of these together to do certain things, so I'll give you an example.

It's not really the most practical example, but let's combine methods, so what we'll do is we'll create a variable called we'll just call it combined and set it to ages and let's first do, let's see, first let's do the map, so I want to map, I want to multiply them all times two, all ages, so I'll say age. I'll use an arrow and we'll say age and then we'll multiply that by two so that by itself and we'll just put this on a new line that by itself will give us an array of all the ages multiplied. 2, which is the combined console point log, so we can see this kind of transformation, so we have all the ages multiplied by two, you know, let me comment on some of these other things because they are sorting, get rid of that, so save it well, so now we just have an unsorted array of all ages.

Now let's say that next we want to filter out anything that is 40 years old or older. Okay, and I'm doing 40 because we multiplied everything, so to do that we're going to use a filter and We're going to say age and we're going to say any age that's greater than or equal to 40, so let's look at that and now that we've filtered out everything that was less than 40, let's do a classification and we will order them from lowest to lowest. higher, so we want to pass our a/b values ​​and then just do a minus B, save that now they're sorted and now let's use reduce to add them all together, so we'll say dot reduce and we'll pass our to B and let's just say a plus B and then let's add our zero value for the total and save that and we get 798, so you can see we've used all four methods here to manipulate our data, so that's what it's going to be like.

Guys, what I would suggest is maybe create your own data set and try to pull things out, manipulate them, you could create new arrays from your array, sort things and try to do some things on your own because you're just going to learn a lot by watching. tutorials or even following tutorials. You want to experiment with your own stuff, okay, maybe even use some kind of external API to pull the data and see what you can do with it, see what you can create with it. these higher order functions are fine that's all if you like this video please leave a like if you are not subscribed and you like this type of video press the subscribe button and that's it thank you for watching this video. was sponsored by bug repro which is a fantastic tool that logs your browser along with JavaScript, logs network traffic and others get it as a Chrome extension or Firefox add-on, easily displays HTTP requests along with WebSocket data In addition to easily viewing all your environmental data such as browser, OS geolocation system, memory, cookie information and much more, error reproduction, it also easily integrates with slack and github, supports unlimited users and is a great tool for developers.

I highly recommend checking out bug reproduction and more featuresby clicking on the link. in the description below