If you have worked with Arrays in JavaScript before, you know that you will often have to loop through or iterate over the data in the Array. This can be done relatively simply with a for loop or a for...of loop, but outside of relatively simple operations this can get quite messy. Having to keep track of counter variables and making sure the increments are correct can quickly bog down your code and make things unnecessarily complicated. Luckily JavaScript has a bunch of built in methods that automatically loop over every element in an Array, and many of them are custom tailored to a specific frequently used operation. This week, I'd like to create a quick reference guide for some of the most commonly used built in Array methods for iteration.
forEach
The forEach() method is the most general built in method. It takes a callback function as an argument and executes it on each element in the array. There are a few optional arguments for this method, but we're going to keep it simple for now.
For this method and all of the ones we will be talking about, arrow functions allow us to define the callback directly in the argument. The callback should take an array element as an argument. If this sounds confusing, take a look at the example below.
const array1 = [1, 6, 8, 10];
array1.forEach(number => console.log(number));
map
The map() method is useful when you would like to modify all of the items in an Array in some way. Like forEach() it takes a callback as an argument. It will return a new array with the results of executing the function on every item in the Array. Take a look at the example below.
const array1 = [1, 3, 5, 7];
const doubleArray = array1.map( num => num * 2);
console.log(doubleArray); // [2, 6, 10, 14]
includes
The includes() method is useful when you would like to find out if a specific value exists among the entries in an Array. It takes the query value as an argument and returns either true or false depending on whether the value is found or not.
const array1 = [1, 3, 5, 7];
array1.includes(3); // true
array1.includes(2); // false
indexOf
Great, so we can find out if a value exists within our Array, but what if you need to find out where it is for some reason? That's where indexOf() comes in. Like includes(), it takes in a specific value as an argument, but will return the first index where it finds the value. It will return -1 if the value is not present. You can also optionally provide an index from which to start the search. Take a look at the example below.
const array1 = [1, 8, 7, 4, 8, 10]
array1.indexOf(8); // 1
array1.indexOf(8, 2); // 4
find
The find() method does exactly what the name implies. It finds the first value in an Array that satisfies the passed in testing function and returns it. Say for example that we would like to find the first element in our array with a value less than 5. The find() method is the perfect method to do so. Keep in mind that find() will only return the first value in the array that satisfies the test. We will talk a little later about how to get multiple values.
const array1 = [1, 3, 5, 7];
const result = array1.find(num => num < 5);
console.log(result); // 1
filter
The filter() method is basically the "full" version of find. What I mean is that filter() works the same find except that it will return a new Array containing the values of all of the elements that match the passed in testing function.
const array1 = [1, 3, 5, 7];
const result = array1.filter(num => num < 5);
console.log(result); // [1, 3]
sort
The sort() method is a bit more complicated than the previous methods we talked about. The default use is simple enough - it sorts the elements of an Array in place and returns the sorted array with the order defaulting to ascending. Optionally you can supply a compare function that defines a specific sort order. This is the complicated bit, and could probably have its own blog post. If you want to learn more about custom compare functions check out the documentation.
const days = ["Mon", "Tues", "Weds", "Thurs"];
days.sort(); // ["Mon", "Thurs", "Tues", "Weds"]
reduce
The reduce() method is in my opinion the hardest of these built in methods to grasp. It takes in a reducer function and executes it on every element, returning a single value. A good example of when this method would be appropriate is if you wanted to add all of the numbers in an array together.
The reducer method takes an accumulator and current value as an argument, and optionally takes in a starting index (default is 0) and the array reduce() was called on. If you would like to get a more in depth understanding, take a look at the docs. Let's look at a simple example below.
const array1 = [1, 5, 8, 10]
const reducer = (accum, current) => accum + current;
array1.reduce(reducer); // 24
Conclusion
These are the most commonly used methods for iterating over arrays. I hope you found this little cheat sheet/ guide useful. If you would like to learn more about built in Array methods, check out the documentation here.
Top comments (0)