Useful JS Array Methods PT:1

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

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!