Useful JS Array Methods PT:1
Tags: javascript, beginners, tutorial, fundamentals
Published: 2021-01-08 00:52:28

In today's article, we will be going through some common useful *Javascript Array Methods*. Most likely you will be using these *array* methods more often than you think. We are going to assume that you have some basic **Javascript** knowledge before getting ahead of this article for instance like the lexical environment, functions, variables, callbacks.  

## Table Of Contents Array Methods

1. filter method
2. map method
3. reduce method
4. forEach method

### Filter Method

The filter method helps us retrieve specific data from an array object. We pass this method an array object and it returns a **new** array object with the certain data that we conditionally asked for in our _callback function_. It might seem a bit complex at first when reading but let’s take a look at some code and break it down to have a better understanding. 

So we start off our code with some simple hard coded data stored in a variable like so: 

`const words = ['dog', 'cat', 'apple', 'cheetah', 'whale']`

Now that we have an array with some data we can use the filter method on our *words* variable now like so:

`const result = words.filter(word => word.length > 3);`

we store our results of the *filter* method inside our **result** variable to make it easy for us to access.

What is the **filter** method doing? 
In order to use a filter method we add it to the end of the array we want to iterate over through

`words.filter()`

Then after we add our method, inside our method, we add a *callback* function to return what we want, for this example, we will simply check the length of each word and return any string that is greater than 3 letters. 


e.g.

```
const words = ['dog', 'cat', 'apple', 'cheetah', 'whale']

const result = words.filter(word => word.length > 3);

console.log(result);
// expected output: array: ['apple', 'cheetah', 'whale']
```

Once we *console.log* our **result** variable we get a New Array object with the outputs we expected from our callback function. 

### Map Method

The map method can be very tricky for newcomers when trying to play around with a variety of array methods. It looks very similar to the *filter* method since it also takes in a callback, but it just works a bit differently with each element instead. 

Let’s look at some code and get started on understanding what the *map* method does when we want to manipulate an array. 

We first start off storing some data into an array and store it with a variable. 

`const prices = [2, 10, 15, 20]`

Next, we will map through our prices, our map method takes in a callback argument that will be called on every element in the array. 

`const mapPrices = prices.map( price => {
    price * 2
}`

As you can see, the price will be acting as each element when mapping through our array, here we will multiply each price by 2 and should expect the output below. 

```
console.log(mapPrices)
// newArray : [4, 20, 30, 40]
```

> Since map builds a new array, using it when you aren't using the returned array is an anti-pattern; use forEach or for...of instead.

### Reduce Method

The reduce method can be a tough method to get into at the start but very powerful once we know how to use it since it can return any type (i.e., object, array, string, integer).

Like any other array method, we will need to have an array of data. Let's use the previous one. 

```
const arrayList = [1, 2, 3, 4];
```

The *reducer* method takes in a *callback* argument that will keep track of our array elements and accumulate the array. We can make it easier for us by storing the callback function inside a variable so we can just pass the variable inside the *reduce* method. 

```
const reducer = (accumulator, currentValue) => accumulator + currentValue
```

Now we can test our *reducer* variable inside our *reduce* method parameters like so. 

```
console.log(arrayList.reduce(reducer));
// expected output: 10
// 1 + 2 + 3 + 4 
```

As we iterate through each element, the *accumulator* will act as the value previously returned in the last invocation of the callback, *currentValue* will return the element being process in the array. 

The *reducer* function/variable can take in four arguments if we ever need to get more in-depth into our array. If you would like to learn more about how the *reduce* method works in complex code, check out [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)

>The reduce() method executes the callback once for each assigned value present in the array, taking four arguments:
1. accumulator
2. currentValue
3. currentIndex
4. array

### ForEach Method

The *forEach* method works a bit different on arrays than the other methods we just played with. With the *forEach* method we are invoking a *callback* function on each element of the array. 

We will simply start off with our *array* data of course. 

`const arrayList = ['a', 'b', 'c']`

Now we will use our *forEach* method to iterate over each element in our array. 

`arrayList.forEach(element => console.log(element))`

Now if we were to check in our console in our browser or our terminal we will see an output of the following. 

```
'a'
'b'
'c'
```

Each element is logged out and does not return a new array as the other methods do so. Managing to learn how to manipulate data, filter, search, etc. will help you out in so many problems when coming across other people's code. 

## Conclusion 

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far!