8 Must Know JavaScript Array Methods

arrays are one of the most common things that you're going to use as a programmer so today I'm going to be covering eight JavaScript array methods that are 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 we're 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 a hundred dollars of price all we would need to use is the filter method to filter out everything that's not under a hundred dollars so let's just say that we have here a variable which is going to be filtered items we want to set that equal to items dot filter which is the filter method on the array and this filter 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 need to return a true or false statement on whether or not we want to include that in the new array so we can just say return item dot price is less than or equal to 100 this was saying all the items that are less than $100 in price are going to be in our new filtered items array and to test that we could just console that long that filtered items array and if you save that you see we get an array over here for items all of them with a price less than or equal to $100 and that's perfect this filtered array method is super easy to use all you do is return true or false for each item and if it's true it's in the new array 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 arrays 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 this items array still has all of our different items all seven of them while our filtered array has our four filtered items so it got rid of the three expensive items over a hundred dollars and that's super convenient because we don't have to worry about changing the old array when we use these new array methods to create new arrays so now let's cover in the next array method which is going to be map and map allows you to take one over eight and convert it into a new array so all the items in the array 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 newer in our case we just want the item name and now if we print out these item names and we save you see we get a new array that is just full of all the different names of the items and if we wanted prices instead of names all we do is change just a price and now we have an array of all the different prices there's 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 convert it into another array it has billions of different uses and you'll find yourself using this all the time over for example a normal for 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 we'll just say we want our file and item we can do items dot find again it takes the exact same single function with item as the parameter and all we do is we have a true or false statement here and it's going to return the item for the first one 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 well with the make sure he counts a lot log of the correct thing and if you save 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 can just say for each and this is going to work very similarly to a for loop but it's going to take a function here instead and we have our first parameter or not function which is item just like before and we could just print out the item 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 could print whatever we want we could be priced for example and it prints out the price or anything else that you need to do for every single element inside of the array this just makes working with arrays where you need to loop over them so much easier since you don't have to write out the clunky long for loop syntax like you'd normally have to the 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 so we can say in expensive items we'll say has an expensive item since we want to see if this array has any inexpensive items and all we do is say items to 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 returns true it's going to return true for the entire thing so we can just say item dot price is less than or equal to $100 so if anything is less than or equal to $100 we'll say that this array has inexpensive items in it and we can then log this as an expensive items and if you say that you see it says true because it does have items less than or equal to $100 you can kind of think of this as any it just checks the array 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 or equal to zero and you'll see it returns false because nothing in the array returns true for this statement the next array 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 if every item in the array is less than $100 and if you save that you see that we get false returned over here because there are items more than $100 if we change this to be a thousand though and ran it you'll see that we get true because there are all the items in this array are less than $1000 so everything returns true for this so the entire thing is going to return true 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 array normally what you would do is you would just do a four Loup and add the price of your single time and at the end of the for loop you would print out the price but you can use the reduce method to do this instead and the syntax for the reduced 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 the 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 and we add it to whatever the current total is and now if we print out that total you'll see that we get an error and that's because this current total actually is going to be the first method in our parameter and the second method is the actual item that we're going to be generating over and now if we say that you'll see that we get the total to be 1840 which is the total if we add all these numbers together and this method is a bit more confusing the rest so I'm going to 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 array the first method of that function is going to be whatever the previous iteration of this array returned and the second 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 parameter so in our case 0 so the first time this reduced runs we get 0 and our bike item so it just does 100 plus 0 and returns that which is a hundred the second time this gets ran that return value of 100 gets put in here as the current total and our next item TV is the item value so it does 200 plus our current total of 100 which is 300 and puts that back in for the current total and it does that until we get all the way to the very last item in our array 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 we're 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 to 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 too because it doesn't actually take a function it's just going to take a single argument so instead of passing a bunch of objects in our array we're just going to do an array of numbers 1 2 3 4 5 and then we're going to change the value of this to include 2 and we're just gonna say items dot includes get rid of this entire function and we just say 2 and this is just going to check if whatever we pass in the includes method is inside of the array so in our case this should be true because our array contains 2 but if instead we put 7 in here you'll see that this is false because our array does not include 7 this is really convenient when you just need to check if an array has a value 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 and not only cleaning up your code but allowing you to do complex logic in such a small amount of code so if you guys did enjoy this video make sure to check out my other JavaScript 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

Channel: Web Dev Simplified

Views: 589,761

Rating: 4.9641805 out of 5

Keywords: webdevsimplified, javascript array methods, javascript higher order array methods, javascript map function, javascript filter function, javascript top 8, javascript reduce method, javascript find method, javscript every function, javscript some function, javascript array tutorial, javascript array methods tutorial, javascript array methods exaplained, javsacript array functions, best array methods, must know array methods, javascript, javscript array functions tutorial, array

Id: R8rmfD9Y5-c

Length: 10min 5sec (605 seconds)

Published: Sat Feb 02 2019

Reddit Comments

[u/badbrownie]

Excellent Video. I'm learning JS in my own weird order and hadn't got to array methods yet. This was great.

[u/Jerfinator]

Great video with simple examples. I love kyle's style of teaching :)

[u/craigaryhart]

I found that the best way to practice Array methods is by using codewars. It really helps.