for loop or a
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() 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() 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
false depending on whether the value is found or not.
const array1 = [1, 3, 5, 7]; array1.includes(3); // true array1.includes(2); // false
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() 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() 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() 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() 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
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.