JavaScript Array Methods

Some important Array Methods to familiarize yourself with to make life easier as a programmer:

Photo by Isabella and Louisa Fischer on Unsplash

Arrays are one of the most common things that are used by programmers. This article will cover some of the common yet essential array methods such as: filter, map, find, forEach, some, every, reduce.

Let’s get started!!

We are going to use this list of items for all the different array methods

Filter:

To get every item that are less than or equal to $100 of price we can use this method to filter out everything that’s not under $100

We can just set the variable filteredItems equal to items.filter which is the filter method on the array and this filter method will take 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 say return item.price is less than or equal to $100 (item.price < = 100). Now if you save that, you’ll get all the items that are less than or equal to $100.

Map:

Now, let’s look at the next array method which is going to be map. Map allows us to take one array and convert into a new array, so all the items in the array is going to look slightly different.

In this case, we can get all the names out of the array by using .map over the list of items from the array. And return item.name is only going to print out the list of names in the array. This is really great when we just need a single key out of an array, or take one array and convert it to another array.

Find:

Find method allows us to find a single object in an array.

So, here we set the variable to foundItems equal to items.find, and again it takes the exact same single function with item as the parameter and then in the next line we have a true or false statement and it’s going to return the item for the first one where it’s true. Here, we want the item with the name of “Ipod”.

But try out different names of items, e.g “Car”.

forEach:

Next we’re going to look at the forEach method which, unlike these other methods does not actually return anything. It is going to work very similarly to a for loop.

It’s going to take a function and we have our first parameter in that function which is item. And we can just print out item.name which is going to return all the names in the array list. Same way, console.log(item.price) is going to print out the price of each item. Pretty awesome!!

Some:

Next, we are going to talk about the some function, which is a bit different than the other ones, since instead of returning a brand new array, it’s going to return true or false so for example we can check if some of the items in the array has a price less than a $100.

This will return true.

If anything in the array returns true, the entire thing will return true for this. By setting item.price < = 0 should return false.

Every:

The next array method every is very similar to some except for, instead of checking for one one item, it checks to make sure every single item falls under that condition. So, let’s say we’re checking for less than or equal to $100. This is going to check if every item is less than a $100.

This will return false.

But if we change to $1000, (item.price < = 1000) it will return true since all the items are less than or equal to $1000.

Reduce:

Reduce is a bit different than others, since it actually does some operations on the array and returns a combination of all those different operations. So if we wanted to get the total price of all the items in the array, we will do something like the following example:

Reduce method runs a function on every single item in the array. The first method of that function is going to be whatever the previous iteration of this array returned and the second item is actually the item in the array. The currentTotal is going to start at the very first iteration with whatever we pass in as the second parameter, which in this case is 0. So the first time the iteration runs we get zero and our chair item which 30 plus 0 and returns that which is 30. The second time it runs, that return value gets put in here as the currentTotal and our next item shoes is the item value so it does 20 plus our currentTotal of 30 which is 50. And it goes so on and so so forth until we get all the way to the very last item of the array and add that number to the previous total and that would output as the total in the our total variable.