JavaScript Arrays: Properties, Methods, and Manipulation (Part 5 of 7)

Key Takeaways

so what the filter method does is it runs every element in your array through a specified function and that function will look at every element and it will run it through a condition and if that condition returns true then that element gets added to a return array so filter returns an array of elements that met every condition in your function the best way to show you this is just to show you an example so for example here I have a an array with a bunch of random integers and then here I'm printing this array out to the screen so if we write a function called num over now this callback here is going to have access to the same parameters that we've seen before in the other callbacks it's going to have the element of the array the current index of the array and then it's going to have the original array that we're doing the operations on so for this example let's just return whether the element is greater than 20. and then down here where we have this VAR filtered array let's set this equal to the array dot filter and then let's pass in this num over function here and then let's print this filtered array out to the screen let me save that now you can see down here in this filter array every element is over 20. if I came up here to this num over function and said less than 20 and save that now if we come down here to the filtered array we can see it only pulled out the elements that were less than 20. so you can do any check within this function that you want and it will return a new array of all the elements that meet whatever condition it is that you specify so that is a simple example using some integers let's try an example using an object here and pretty much with the object you're just going to do the same thing that you did for the array of integers you see that our array here is an array of objects and each one of these objects has a name and an age so if we wanted to code if we wanted to filter out let's say ages over the age of 30 then I could say function filter age and like I said before you don't have to pass in all those parameters here I'm just going to pass in the element and then I'm going to return any element that is greater actually that's going to be element.age because this is now an object so we wanted to turn element.age over 30. and let's uncomment out this variable here and let's set this equal to array let's see this is array 14. 14 dot filter and pass in filter age and let's print this out to the screen save that and now we can see down in our filtered array we only have John and Steve because both of those are over the age of 30. so that is how the filter method works now let's go down here and take a look at the method every the every method is a little similar to the filter method but instead of it returning an array of all the element elements that meet the criteria it checks to see if every element meets the criteria and it returns a Boolean that is true or false saying whether all those elements met the criteria in the function so for example if I write a function is every and I'm just going to pass in the element here but it could also have access to the index and the original array and let's just return if every element is greater than 10. and then I will uncomment out this variable passed here and I'll set this equal to array 15 dot every and then I'm going to pass in this is every function and then I'm going to uncomment out this line here to print it out to the screen and you can see my every result is false because if we look at the array we have this value 4 here so every element in the array is not greater than 10 and as soon as it hits this 4 value it'll just return false immediately because it knows from that point on that not every value in the array is over 10. if I would change this 4 to a 14 and save that now you can see down here where I'm printing this out every result is equal to true because every value in this array is greater than 10. so that is a short example using an array of integers now let's take a look at an example that is using an array of objects and this is just the same array of objects I used last time with three elements here each having a name and an age so this time I'm going to write a function called all under and pass in the element and we will check if all of these elements are under the age of uh 50. so I will do element actually that'll be return element dot age is under 50. and let me uncomment out this variable here set array 15. every and we'll pass in this all under function and then let me output this to the screen I'll put that so we have the every result is false because every one of these elements does not have an age that is under the age of 50. if I would check if all of these ages are under the age of 60 and save that now you can see down here that my every result is true so that's a few examples of how the every method works let me comment that out and now let's take a look at the sum method now we'll just take a quick look at this one because it is so similar to the every method what sum does uh whenever we looked at every it would return false as soon as one of the elements didn't meet the criteria in the sum method it will return true as soon as one of the elements do meet the criteria so for example if I have a function here and I'm going to call this sum odd and I'm going to pass in the element now for some odd I'm just going to return whether the element mod 2 equals equals one and that will let us know whether this element is an odd number so then the uncomment out this variable here I'll set this equal to array 16. oh that sun and we will pass in the some odd function save that and let me output that to the screen and you can see that my sum result is false if we look at the array here every single one of these elements is even so it's saying that there are not there are not some of these some of these elements that are odd if I made one of these odd and I put this at 21 and save that now you can see that my sum result is true because it says are some of these odd looks at the array as soon as it hits this 21 it returns true because that's all it needs it just needs the one so that is our example with an array of integers really quick we will take a look at an array of objects it's the same array of objects that we've been using before with the name and the age and I'm just going to write a function here called sum age pass in the element and I will return whether the element dot age we will check if there are some people over 50. so let's do far past equals array 16 dot sum and then sum H save that let's output this to the screen save and you can see that our sum result is true because there is one person in here that has an age over 50 if I said are there some people in here that have an age over 60 and you can see down here that the sum result is now false so that is a quick look at the sum method now let's take a look at produce and reduce right