In this article, I will be teaching you 4 high order array methods in JavaScript. These include: forEach, filter, reduce and map, and are all very useful when building applications in JavaScript.
The Methods
The methods we will cover in this article are forEach, map, filter and reduce. They all have their specific use cases and are extremely handy when it comes to handling arrays in JavaScript. Lets get right into it!
The forEach() Method
The forEach array method allows us to easily loop through an array. To utilize this method, you will first need to have an array that contains data. This function works on all arrays whether they consist of numbers, strings or objects. The array used to demonstrate this, shown below, contains various animals.
const animals = ["Cats", "Dogs", "Lions", "Fish", "Birds", "Bears"];
With the array defined, we can now call the forEach function using .forEach().
const animals = ["Cats", "Dogs", "Lions", "Fish", "Birds", "Bears"];
animals.forEach((animal, index) => {
console.log(animal);
});
This method takes in a function as a parameter that has access to the current iteration's animal and the index. Within the function body, you can do whatever you want. In this case we're just logging the animal to the console. This function has various use cases that make it a useful method that can be used in your next project. For instance, this function can replace a traditional for loop when you want to iterate over an array. Rather than selecting the item you are on using the index (from the regular for loop), you simply have access to it through the parameter.
Lets move on to the map method.
The map() Method
The map method returns a new array with the returned values of the function called on each element in the array. This might sound confusing however an example will make it much clearer. For the example, we will use an array of numbers from 1–5 and return a new array of their squares. The following code generates the new array with the map() function.
const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map((num) => num * num);
The map() method takes in a function that has access to the current value and the value returned from this function is placed in the new array. The method is a useful method that has a variety of use cases that make generating new arrays from old ones extremely easy. For example, in the popular React Library, the map function is used to output JSX for each item in an array.
Lets move on to the filter method.
The filter() Method
The next method we'll cover is the filter() method. It returns a new array that only contains values that match a specific condition. As an example we will use an array of numbers 1–10 and return a new array of only even numbers.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter((number) => number % 2 == 0);
Note: The remainder operator (%) returns the remainder left over when one number is divided by a second.
Similarly to the map() and forEach() methods, it takes in a function that has access to the current value. However it uses a condition shown in the equation as number % 2 == 0 that a value must meet to be placed in the new array. To sum up, the filter() method iterates over an array, checks if the current value meets a condition and if it does, it will be placed in the new array that is returned from the function.
Lets move on to the reduce method.
The reduce() Method
The final method we'll discuss is the reduce() method. As the name suggests, it reduces an array down to a single value. A common use case of the reduce method is a to find the sum of all values in an array. The code below demonstrated this.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = numbers.reduce((total, num) => total + num);
The reduce() method takes in a function that has access to the total (value returned from reduce method) as well as the current value, equivalent to num in this case. This method has many interesting use cases including reversing a string and totaling up numbers.
What Have You Learned?
Throughout this article, I've discussed 4 high order array methods that will improve your ability to deal with arrays in JavaScript. I hope you utilize these methods in your future JavaScript applications. They differ in many ways but can all be useful to achieve various goals.
👌 Thanks for reading this article!
If you like what I do and would love to see more related content, follow me on my other social platforms:
GitHub: Blake-K-Yeboah
LinkedIn: Blake-K-Yeboah
You can also show your support by buying me a coffee 😃
