5 Badass Array Methods With Real Use Cases
Let’s talk about 5 Badass Array Methods that will make your life a hell of a lot easier when programming. I’ll even do you another solid and give you a real use case with each method. If you’re a veteran JS developer you’ve already used these methods and the only benefit you may get from this article is a use case. But I hope you stick around and read either way :)
#1 .forEach()
The .forEach() method comes in handy when you want to manipulate some data but you don’t need to return any data. All this method does is executes a function (that you provide) once for each element in an array.
Use Case
We have four buttons on a page. We need to attach an event listener to all of the buttons to make some jazz happen when one is clicked.
We will need to grab those buttons on the page and send them through .forEach() to solve our problem. Using the .querySelectorAll() method returns us a NodeList which we will treat just like an array. We store that NodeList into a variable so we can send it through the .forEach() method.
We cycle over each button in the array and add an event listener to each button that logs the button at a particular index when clicked. That was pretty easy and of course you’ll want to do something cooler than logging the index to the console.
#2 .reduce()
The .reduce() method is helpful when we want to reduce data down to a single value. This method simply applies a function against an accumulator (gathers the values) and each element in the array to reduce it to a single value.
Use Case
We are dealing with a shopping cart with multiple line items and we need to give the customer a single total value for checkout. We have an array of the line items purchase prices. We will need to write a function to provide to the .reduce() method that will handle two arguments accumulator and currentValue.
Once we have written that function to give the .reduce() method all we have to do is call the reduce method on our array and pass the newly created function to the method.
#3 .map()
The .map() method is useful if we need to make changes to data and return that data in a new array. A good rule of thumb is to never manipulate your core data. Simply make a copy of that data with any changes. The .map() method creates a new array with the results of calling a provided function on every element in the array.
Use Case
We have an array of objects for users. Without corrupting the original data we would like to add a new group property to this set of users. We could achieve this with less code and much easier with the .forEach() method we mentioned earlier, but that would not return us a new array. We should create a new variable to store the array of objects in. That new variable should map over the users array and return a new object with the current properties and one new property for the group rights.
#4 .filter()
The .filter() method is super helpful when you need to filter through a data set and return only the data you need. This method creates a new array with all elements that pass the user implemented function.
Use Case
We need to return data to a user based on search terms. Those search terms are tracked through an input in the UI. We filter our data based on the search terms and return only the data the user is requesting.
#5 .some()
The .some() method is helpful when you are looking for a truthy value in data. A great thing about this method is it will exit immediately once an element in your data returns true. The .some() method executes a function once for each element in an array until it finds one with a truthy value.
Use Case
We will reference our use case for the .map() method. We need to do a quick check on our data to see if a particular user group has a certain property.
Thanks for reading! If you’d like to hear more of my rambles about code, consider giving me a follow on Twitter!
Byteconf React is a free React/JavaScript conference, streamed on Twitch. Join us on August 31, 2018, to hear from the best React developers and teachers from around the world. Join our mailing list and follow us on Twitter to stay up to date!
