Array Methods Part II

What else can JavaScript do for you and your array’s?

Welcome back to part II of our JavaScript array methods review. As promised in part I, this is where we will be tackling the big 4; filter, for each, map, and reduce. I like to think of them as the big 4 because no developer should be without these methods when faced with array/s of data. If you have already become somewhat familiar with these methods, for each may seem like the odd one out of the bunch. If this is all new to you do not worry as we will be fulling covering this method as well as for comparison. So let’s get right into it!

forEach()

This method gives us the ability to create a loop, a for loop specifically, that executes the given function ‘for’ each of the array’s elements. In simple, we can use this method instead of creating a for loop and having to create the logic to do so. This saves us time by having to write less code to achieve the same means. Take for example we have an array of numbers ranging from zero to 10. We are tasked with creating a function that adds five to each number in the array. Let’s first take a look at how we can use a for loop to add five to each element.

Returns

As you can see, we have used a for loop that loops through each of the indices of the array. We create a variable equal to the first index, as long as the length of our array is greater than the index, index will increase by one, and finally we will push the arrays current index plus five into our new array. Rinse and repeat. Now let’s take a look at how we can use for each to achieve the same goal while writing less code and making it more readable.

Returns

Look we got the same answer, but how did we exactly? Well, for each breaks down each element into a temporary variable. In this logic we have decided to call it num, naturally as we are dealing with numbers. Then we will push that number plus five into our new array. As the name suggests this will repeat for each element in the array. Taking a look at both examples they are definitely readable and understandable as to what is going on, but you have to agree that for each does clean things up quite a bit.

map()

We can use this method to do everything that for each can do and some. Not only does it allow us to loop through every element of our array and execute our functions upon them, but also returns a new array with those items. Let’s take a quick look while using our for each example.

Returns

As you can see, we did not have to create a new array to hold our new values. We simply just need to return our mapped array as well as our function because we need to be explicit about what we are returning, which in this case is the number plus five. Let’s take a quick look at another example where we will be multiplying an array of odd numbers by two.

Returns

Again, we are returning our mapped array. As it ‘maps’ through each element in the original array, it is multiplied by two and then returned the mapped array. Then once completed, the mapped array is returned from the function.

filter()

This method gives us the ability to create a test for each of our array elements. Then, like map, will loop through and return a new array of elements, unlike map though, those elements will need to have passed the test we have implemented. Take for example you are a professor and have an array of test grades. You create a function that will return an array of all passing grades, a 65 or higher. Lets take a look at how we would achieve that.

Returns

To break this down a little further, we are looping through each of the grades. If the grade is a 65 or greater it will be returned to the filtered array. Should it not, do not worry it’s not gone forever but will not be a part of the returned filtered array. We can also get our failing grades, or grades lower than 65 by simply changing some of our logic.

Returns

By changing the name of our function as well as a little fiddling with our test, and we now have a function that will return us with the array of failing grades in the class.

reduce()

We can use this method to, you guessed it, reduce our array into a single value based upon our provided function. It is worth to not that there are two parameters reduce needs, unlike for each, map, and filter. We are required to first have our total or initial value, depending on where the function is at, and second our current value, which is what our for each, map, and filter have been taking in each time. Let’s take for example we want to create a function for one of our children or younger siblings to add up their allowance for five weeks. Although it is still in their piggy bank, they have kept very detailed notes in their journal and are able to provide us with how much they got each week.

Returns

To break this down in pieces, we are reducing our allowance array. Our total/initial value defaults to zero and we have aptly named it count. Our current value, again aptly named num, represents the current number we are at in the array. Then we simply need to reset our count each time to count plus the next number. This then does not give us an array, but the total value that the array contains.

I would like to thank you for reading along and hope that you have learned something new! Keep an eye out for more articles the future!

If you would like to view a copy of these examples to play around with for yourself or just for reference, you can find the link for the GitHub Repo here.