JavaScript Array Filter Method

The JavaScript Array Filter Method: Explained & Made Easy!

After we have covered the JavaScript Array Find Method in the last article, allowing us to return one single element of an Object by searching for a string value, it is time to move forward and learn how to return multiple values from an Array by searching for a string or number using the JavaScript Array Filter Method.

As always, we are going to break the code down and go through it step-by-step, so you will be able to fully understand each of its components.

In today’s example, we are going to use an array of objects consisting of car brands and models.

const cars = [
  {
    brand: "Audi",
    model: "A4"
  },
  {
    brand: "Audi",
    model: "100"
  },
  {
    brand: "BMW",
    model: "318i"
  },
  {
    brand: "BMW",
    model: "i8"
  },
  {
    brand: "Tesla",
    model: "P100D"
  }
];

Our task? Pulling out each model of a certain brand from this array of objects using the JavaScript Array Filter Method. Let’s get our hands dirty!

The JavaScript Array Filter Method

Let’s start to create the JavaScript Array Filter Method.

let findBrands = cars.filter(function(item) {
  const carBrand = item.brand === "Audi";
  return carBrand;
});

console.log(findBrands);

This is the bare filter() method. Let’s break it down.

let findBrands = cars.filter(function(item)

We create the variable findBrands and make it equal to the cars.filter(function(item)). Cars stands for the name of our array, meaning we call the method on our cars array.

The filter() method calls a callback function one time for every element in the array and then constructs a completely new array of all elements that returned a truthy value. Our item argument reflects those values, this is why we compare if our item.brand is equal to our search string.

const carBrand = item.brand === "Audi";

Now we create a variable called carBrand. As mentioned above, we use this variable to store the values that are true according to our comparison to item.brand and return them later on.

Finally, we console.log our find.Brands variable. The output is the following:

[ { brand: 'Audi', model: 'A4' },
  { brand: 'Audi', model: '100' } ]

If we would go ahead and change our search string from “Audi” to “BMW“:

let findBrands = cars.filter(function(item) {
  const carBrand = item.brand === "BMW";
  return carBrand;
});

console.log(findBrands);

the output is the following:

[ { brand: 'BMW', model: '318i' },
  { brand: 'BMW', model: 'i8' } ]

Now keep in mind that the input of our search string is case-sensitive. If we would write “bmw” instead of “BMW“, the output would be:

[]

To fix this, we can make use of the toLowerCase() method.

let findBrands = cars.filter(function(item) {
  const carBrand = item.brand.toLowerCase() === "bmw";
  return carBrand;
});

This transforms all input to lowercase characters, getting rid of case-sensitivity.

Creating a JavaScript Array Find Function

To make this code a little bit more convenient for later use, let’s wrap everything in a function and refactor our code a bit, so we will be able to pass the array and our search strings as arguments instead of manipulating our find() method each time.

const findBrand = function(array, brand) {
  return array.filter(function(item) {
    const carBrand = item.brand.toLowerCase() === brand.toLowerCase();
    return carBrand;
  });
};

console.log(findBrand(cars, "Audi"));

What we did here was, we created a new function called findBrand with two arguments: an array and the brand we search for. Then we removed the let findBrands variable and replaced it with return array.filter(function(item)).

Next, we replaced our actual search string “bmw” with the brand argument of our findBrand() function. To still be able to do case-insensitive searches, we also need to transform the brand variable toLowerCase().

Finally, we console.log(findBrands(cars, “Audi”)); where cars are the name of our array and “Audi” is our search string. Now we are able to conveniently use this function to search for whatever we want. let’s give it a final test:

console.log(findBrand(cars, "tesla"));

Note that “tesla” is written with lower case, whereas in the original array it is written with capitalized letters “Tesla“, the output nevertheless is:

[ { brand: 'Tesla', model: 'P100D' } ]

Conclusion

This JavaScript Array Filter method really is useful in so many different cases. Look up the MDN documentation for further details. Make sure to keep it in the back of your head, or bookmark this article for later reference. I hope I was able to break it down so you are able to fully understand how it works. Let me know in the comments below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: