JavaScript Array Methods Filter, Map and Reduce

Arrays are Objects

Arrays in JavaScript are based created from the prototype object. With that, Arrays in JavaScript come with their own sets of base methods. I wanted to cover some of these filter, map and reduce. I will cover each of these functions and give a couple of use cases for each. These built-in functions can help you to handle your work with arrays in a more elegant way. In the past, I have been known to write my own custom function to do something that I could have easily done with a built-in array method.

Filter

This first method I am going to cover is just as it sounds like. It is a way to filter out results from an array object. for example:


const foods = ["bananas", "apples", "orange", "grape", "pizza", "coffee", "soup"];
const longFoods = foods.filter(food => food.length > 5); //["bananas", "apples", "orange", "coffee"]

Note that here we are taking advantage of the primitive string type and the length property to filter out words and create a filtered array that meets our requirement of the length being greater than 5. We basically have passed in an ES6 arrow function. The parameter to be passed into our filter method is a function. This means we can do all sorts of things. Let’s take a closer look.

We could also do something using a function which checks our strings and only returns based on object type as well as our string length. For example:

function isString(obj) {
  if( typeof(obj) === 'string' && obj.length > 5){
    return obj;
  }
}

const foods = ["bananas", "apples", "orange", "grape", "pizza", "coffee", "soup", 10, NaN];

const trueStringFoods = foods.filter(isString); //["bananas", "apples", "orange", "coffee"]

console.log(trueStringFoods);

I hope this helps to make clear the power and usage of the filter method on arrays.

Map

This is another useful and powerful built-in method that we can use on our JavaScript Arrays. map() is used when we want to perform an operation on each item in our array. This is similar to our filter method in that the method accepts callback functions as well as some more basic parameters.

const foods = ["bananas", "apples", "orange", "grape", "pizza", "coffee", "soup"];

const upperFoods = foods.map(food => food.toUpperCase()); //notice the ES6 arrow function
console.log(upperFoods); //["BANANAS", "APPLES", "ORANGE", "GRAPE", "PIZZA", "COFFEE", "SOUP"]

As well as the above ES6 arrow function, we can pass in more complex functions to perform on our JavaScript array.

Reduce

Reduce is one that is very similar as well to our above Map and Filter methods. The reduce method will reduce the values of your array into a single value. For example, what if we wanted to concatenate a string of values together? Reduce would fit the bill. Let me demonstrate again with a snippet and then explain further.

const authors = ["Lewis", "Wilson", "Verne", "Tolstoy", "Twain"]
var result = authors.reduce((prev, curr) => prev +', '+ curr )

console.log(result) //"Lewis, Wilson, Verne, Tolstoy, Twain"

Now isn’t that nice? I found that once I understood the power of the above methods it made my life easier when working with JavaScript arrays. Another thing to note is that you can chain them together. For example, if your collection was not consistent in type you would want to filter first using typeof and then you could use a math operation. I think I will cover this in another post as it’s getting late and I need to get some rest. Thanks for checking this post out!

Next On FoC

Webpack with Babel 7 Project Setup

Webpack with Babel 7 Project Setup
Previously On FoC

JavaScript Functions and First Class Objects

JavaScript Functions and First Class Objects