Name: 8 Must Know JavaScript Array Methods
Uploaded: 2020-03-28T16:32:17.000Z
Duration: 10 min 5 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

One of the most common things you're going to use is a programmer.

Future continuous

So today I'm going to be covering a JavaScript.

A ray methods that we're going to make your life so much easier and more enjoyable, so make sure you stick around to the end to get started.

I just have an array of items that were going to use for all these different array methods, and the first method that we're going to talk about is the filter method.

So let's assume that we want to get all the items in this list that are less than or equal to $100 of price.

All you need to use is the filter method to filter out everything that's not under $100.

So let's just say that we have here variable, which is going to be filtered items.

We want to set that equal toe item stop filter, which is the filter method on the array.

And this builder method just takes a single function, which is going to have one parameter of item, which is just each item inside of the array, and then we don't need to return a true or false statement on whether or not we want to include that in the new array.

This is saying all the items that are less than $100 in price are going to be in our new filtered items already.

And to test that, we could just cancel that long that filtered items array.

And if you say that you see, we get in a rage over here four items, all of them with a price less than or equal to $100.

This filtered of ray method is super easy to use.

All you do is return, true or false for each item.

And if it's false, it's not in the new array.

And the great thing about this filter method and all the other methods for a raise that we're going to be covering is that they actually don't change the underlying object that you're filtering over so we can log the items array.

And as you can see, these items of race still has all of our different items, all seven of them, while are filtered.

Array has our four filtered items, so it got rid of the three expensive items over $100.

And that's super convenient because we don't have to worry about changing the old array.

When we use these new array method to create new IT race, it's now let's cover in the next two right method, which is going to be mad, and map allows you to take one of Ray and converted into a new array so all of the items in the race are going to look slightly different.

So let's just say we want to get the name of every item so we can get an array of the item names by using map so it looks very similar.

All we do is change filter to map, and it takes a single parameter, which is a function with the item as well.

And here we just returned what we want in the new right.

In our case, we just want the item dot name, and now if we print out these item names and we saved you see, we get a new rate that is just full of all the different names, the items and if we wanted prices instead of names, all we do changes to price, and now we have an array of all the different prices is a super convenient.

When you want to take an object, for example, and just get the names or a single key, or take one array and converted into another array.

It has billions of different uses, and you'll find yourself using this all the time over, for example, in normal four loop or some other method to do this next, I'm going to talk about the fine method, which allows you to find a single object in an array.

So which is to say, we want our found item.

It takes the exact same single function with item as the parameter, and all we do is we have a true or false statement in here, and it's going to return the item for the 1st 1 where it's true.

So let's say we want to get the item with the name of book so we can just say item dot name equals book, and if we save that, but make sure you counsel along the correct thing.

And if you say that you see that we get the item that has the name of book, we could do the same thing, for example, for the name of album.

And now we get that actual album item, and this is just going to return The very first item that it finds in the array that returns true for the statement that you pass inside of this find function next method that we want to talk about is for each, which, unlike these other methods, does not actually return anything.

So we no longer need this return statement here, and we don't actually need to log anything down here so we could just say for each and this is going to work very similarly toe a four loop.

But it's going to take a function here instead, and we have our first parameter and I function, which is item just like before.

And we could just print out item dot name.

So for every single item it's going to do what's inside of this function.

And as you can see, we get all the different names of the different items of being printed out and we get print whatever we want.

We could be priced, for example, print out the price or anything else that you need to do for every single element inside of the array.

This just makes working with the rays, where you need to look over them so much easier, since you don't have to write out the clunky long four loops syntax like you'd normally have to next.

One that we want to talk about is going to be the sum function, which is a bit different than most of our other functions.

Since instead of returning a brand new array, it's actually going to return, true or false, so we can check if some of the items in this array have a price less than $100.

Will say has an expensive item, since we want to see if this ray has any inexpensive items and all we do is say items that dot some, and this is going to take that same exact syntax as all these other array methods, but it's just going to check our return value and as soon as a single item in turn, is true, it's going to return true for the entire thing, so we can just say I am Dr.

So anything is less than equal to $100 will say that this array has inexpensive items in it, and we commit along this as in expensive items.

And if you said that, you see it says, True, because it does have items less than or equal to $100.

It just checks the ray to see if anything in the array returns true for this.

And if it does, the entire thing returns true.

But let's say we wanted to check if there's any items that are completely free, so less than equal to zero and you'll see it returns false because nothing in the array returns true for this statement, the next door a method every is very similar to some, except for instead of checking for a beast, one item, it checks to make sure every single item falls under that.

So if we say less than or equal to 100 this is going to check it every item in the array is less than $100.

And if you say that, you see that we get false returned over here because there are items more than $100.

If we change this to be 1000 though, and ran it, you'll see that we get true because there are all the items in this array or less than $1000.

So everything returns true for this, so the entire thing is going to return.

The next method that I want to talk about the reduced method is a bit different than all of the other methods, since it's actually doing some operation on the array and returning a combination of all those different operations.

So if we wanted to get the total price of all the different items in this ray, normally what you do is you would just do a four loop and add the price every single time, and at the end of the four loop you'd print out the price.

But you can use the reduce method to do this instead, and the syntax for the reduce method is a bit different.

Instead of taking an item, it takes an item and a property for what we want to reduce everything into.

In our case, this is just going to be these sub or the current total.

So this is going to be the total after each iteration of the array and then it also takes a second parameter, which is going to be your starting point.

In our case, we want to start our total at zero, and then in here all we do is return the price of the item.

We added to whatever the current total is.

And now if we print out that total, you'll see that we get an air.

And that's because this current total actually is going to be the first method in our perimeter.

And the second method is the actual item that we're going to be iterating over.

And now if we say that, you'll see that we get the total to be 18 40 which is the total of we add all these numbers together, and this method is a bit more confusing the rest.

So I'm gonna break it down and explain it the best that I can.

So as we see here, we have the reduced method which runs a function on every single item instead of our ray.

The first method of that function is going to be whatever the previous iteration of this array returned.

And thesis and item is the actual item in the array.

And this current total is going to start on the very first iteration with whatever we pass in as the second perimeter sonar keys zero.

So, the first time this reduced runs, we get zero and our bike item.

So just as 100 plus zero and returns that which is 100 the second time this gets ran, that return value of 100 gets put in here as the current total.

So it does 200 plus our current total of 100 which is 300 and put that back in for the current total.

And it does that until we get all the way to the very last item in our ray the keyboard.

It'll add that 25 to whatever the previous totals were, and then that will output as the total right here in our total variable, which were printing down here.

So it's a bit more confusing, but this is incredibly useful when you need to do some kind of operation cumulatively toe all the items in an array such as grabbing the total price for all the items.

Now the last element that I want to talk about for the methods is the includes method, and this is a bit different because it doesn't actually take a function, is just going to take a single argument.

So instead of passing a bunch of objects in our ray, there is going to do an array of numbers 12345 and then we're going to change the value of this two includes two.

We're just going to say items dot includes give it of this entire function and we just say to that is just going to check if whatever we pass in the includes method is inside of the array, so in our cases should be true because our array contains two.

But if instead we put seven in here, you'll see that this is false because our ray does not include seven.

This is really convenient when you just need to check if an array has a value of without doing a complex find, especially when you have such a simple array of just numbers, for example, and that's all eight of the incredibly useful JavaScript array methods that I want to cover.

Hopefully from this video, you guys were able to learn why these JavaScript array methods are so useful at not only cleaning up your code but allowing you to do complex logic in such small amount of code.

 So if you guys did enjoy this video, make sure check out my other job script related videos over here and subscribe to my channel for more videos just like this, Thank you guys very much for watching and have a good day. 