JavaScript Array Methods

When working with JavaScript, there are several “must know” methods that we can use on arrays to find specific values. For starters, an array in JavaScript is a type of global object used to store data. We can access its elements by referring to its index number through square brackets but what if we wanted to filter out values or return true or false statements based on conditions that we set? Let’s dive in for a closer look!

We’re going to use a default array of items and work our method magic for each example below. Keep in mind that none of these methods listed are destructive of our original array so no arrays were hurt in the making of this blog!

Original Array

filter Method: This method is just like what the name implies! It filters out elements in our original array and returns the values in a new array provided that they pass the condition in the function.

As you can see, this method takes in a parameter of one item in the given array. The return line is essentially returning a true/false statement if the item needs to be returned in the new array. Our original array can be called again and show the original untouched elements.

map Method: To reduce repetition in our code, we can utilize the map method which loops through an existing array and performs a specific function on all items in that array. In layman’s terms, map allows a programmer to take one array and convert it to a new array but it will look just a little bit different!

Our new array will return the item names only.

find Method: This simple method allows you to find a single object in an array. It returns the value of the first element that satisfies the condition provided in the function and it does not check any of the remaining values once doing so. If this method cannot locate the value, it will return undefined.

forEach Method: Unlike our other methods listed previously, this method does not actually return anything even though it does iterate through our array just like map method. forEach returns undefined while map returns an array with the same number of altered elements. It can get a little confusing but depending on the result that you want to get, these two methods work well in their own way. If you’re not trying to change the data in your original array but just want to do something to it, i.e. display the data or save it to a database, this method is your best bet.

In the example above, we printed out each individual item from our array only as its name — no returned array, hash, or string for this particular output of items.

some Method: Rather than returning a brand new array of elements, this method tests our array to see if at least one element passes the condition provided in our function and return a boolean value of either true or false.

In our example above, we are looking for ANY item price that is more than or equal to 500. If our array contains ANY value that matches that condition, then our array does contain expensive items, hence why it’s returning true.

every Method: The difference in using the every method versus the some method is instead of checking for at least one item in our array that meets the condition, it checks to ensure that EVERY single item falls under that condition/statement.

hasInexpensiveItems is returning false because not EVERY single item on our list is under $100.

reduce Method: This method “reduces” our array to a single value after performing the provided function on each element.The return value is stored in an accumulator. This method does not execute the function over any array elements that contain no value. It can take a total of four arguments although, two are optional. If we just wanted to get the total price of all the items in our array, we could just use a for loop and add the price every single time we iterate over each item. At the end of the loop, we could print out the total or we can simply use the reduce method!

In our first parameter(), we are taking in a property for what we want to reduce everything into(currentTotal) and also taking in an item. The zero on line 3 is our method taking in a second parameter which is what we want to start off on for our currentTotal price.

includes Method: This method does NOT take in a function, only a single argument. Provided below is a new array example to show how it works! This method works best if you just need to find a value without doing a complex find.

I hope these methods will prove useful to you on your coding journey! Below, you’ll find resources and references used to create this blog.

4 big differences between forEach and map in Javascript - Debug Everything

Array.prototype.reduce()

JavaScript Array reduce() Method