Array Methods for Iteration in JavaScript
Tags: javascript
Published: 2020-10-13 01:48:04

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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort).

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce). Let's look at a simple example below.

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array).