JavaScript : How to filter an array using filter() method

Let’s understand the basic need for JavaScript array filter() method. If you have got an array, and you want to filter it based on condition to get a new array with just some of the values of the original array. In development we come across such scenarios, we might use a simple way of achieving this using for loop and if condition or using JavaScript array filter() method.

Say we have an array of color data with color name and value in hex code. And you want to filter out data with red color or whichever color you choose, simply apply conditions to get that. This you can think of filtering data in real life examples and just present a user is that interest in the front-end.

Another real life example, we apply filters on shopping website/e-commerce apps based on our choice and we get a list of products based on our choice. Isn’t it interesting!

JavaScript array filter() method

The filter() method creates a new array of elements which passes all the conditions implemented in the function. If the condition returns false, the element does not get pushed to the new array. You can also use find() to find in an object.

Syntax:

array.filter(function(item) {
  return condition;
});

So filter() method is applied on arrays, and callback inside filter() is where you write condition and return it.

The item argument is the element in the array, and goes through checks against the condition. If the current item clears the condition, it becomes part of the new array.

Note: filter() does not change the original array.

How to filter an array using filter() method

Let’s understand how to filter an array using filter() method.

First, as mentioned above there is a simple way using for-loop and if condition to achieve that as shown below.

Filter data using for loop

code:

var colorCodeData = [
	{color: "red", value: "#f00"},
	{color: "green", value: "#0f0"},
	{color: "blue", value: "#00f"},
	{color: "cyan", value: "#0ff"},
	{color: "magenta", value: "#f0f"},
	{color: "yellow", value: "#ff0"},
	{color: "black", value: "#000"}
]
let colorInfo = [];
for (let i = 0; i < colorCodeData.length; i++) {
    if (colorCodeData[i].color == 'red') {
        colorInfo.push(colorCodeData[i]);
    }
}

console.log("Details of red color :", colorInfo);

Output:

Details of red color : [ { color: 'red', value: '#f00' } ]

Filter data using JavaScript array filter() method

You can achieve the above task using JavaScript array filter() method in shorter and cleaner way.

var colorCodeData = [
	{color: "red", value: "#f00"},
	{color: "green", value: "#0f0"},
	{color: "blue", value: "#00f"},
	{color: "cyan", value: "#0ff"},
	{color: "magenta", value: "#f0f"},
	{color: "yellow", value: "#ff0"},
	{color: "black", value: "#000"}
]

var codeInfo = colorCodeData.filter(function(colorVal) {
    return colorVal.color == "red"
});
console.log("Details of red color :", codeInfo);

filter() method even cleaner when you use the arrow function (=>).

var codeInfo = colorCodeData.filter(colorVal => colorVal.color == "red");

Output:

Details of red color : [ { color: 'red', value: '#f00' } ]

Above code is available here.

So you have learned how to use the JavaScript array filter() method to filter elements in an array based on a test provided by a callback function. Learn how to add/remove an element from an array here.

I hope you enjoyed this post. If you have any question/suggestion, feel free to leave your comments below.

For more details on filter() see MDN Reference.
Image Source : https://www.google.com/

Dear reader, a sincere review from you would encourage me to write even more 😉

Stay tuned. Happy Learning.