JavaScript Array Filter

In this tutorial, we learn how to use the JavaScript array filter method to filter an array in JavaScript based on some conditions.

JavaScript Array Filter

Introduction to JavaScript Array filter

This is a very common situation as a developer you have come across to manipulate array items.  Based on the condition you have to fetch and create a new array from the original array elements.

So how to do that?

JavaScript has one filter() method that filters the items from an array and return the new array of elements based on the filter condition–

Note: filter() method doesn’t change the original array it always returns the new array.

JavaScript Array filter Example –

Suppose you have an array of the element which contains some items and each item have two fields – name and its price like below –

const items =[
{ name : "PS4", price: 200},
{ name : "iPhone" , price: 450},
{ name : "iPod" , price : 80},
{ name : "Watch" , price : 150},
{ name : "MacBook", price : 900 },
{ name : "TV" , price : 600},
{ name : "Keyboard", price : 50 },
{ name : "iPad" , price : 300}
]

Now, we have to get all the items where price greater than and equal to 200 dollars. Use the filter method of JavaScript –

const filterItems =  items.filter((item) => {
  return item.price >= 200;
})
console.log(filterItems);

Output –

It returns all the items where the price is greater than equal to 200 dollars.

0: {name: "PS4", price: 200}
1: {name: "iPhone", price: 450}
2: {name: "MacBook", price: 900}
3: {name: "TV", price: 600}
4: {name: "iPad", price: 300}

JavaScript Array filter

Note: The arrow function only works with modern browsers like chrome and edge that support ES6. It didn’t work on IE.

Here I have used the ES6 arrow function to reduce the number of code lines and make the program cleaner. If you are not familiar with to arrow function then the same can be achieved without the arrow function as well like below –

const filterItems =  items.filter(function (item) {
  return item.price >= 200;
})
console.log(filterItems);

Example 2 –

I want to fetch array element based on name than instead of price use name field like below –

const filterItems =  items.filter((item) => {
  return item.name == 'TV';
})
console.log(filterItems);

it filters the array and returns the array element where the name equals “TV”.

As I said earlier, it doesn’t change the original array of you print the “items” array it returns all eight items.

The desired output can be achieved using many different ways means you can filter the items without the filter method as well in that case you have to iterate each element of an array in a loop and check the price if it satisfied the condition.

How JavaScript Array filter Method worked –

Below is the syntax of the JavaScript Array filter method –

array.filter(callback, object);

The filter method accepts two arguments one is the mandatory callback method and the other is an optional object.

In the background, the filter method internally iterates each element of the array and if the callback method returns true it includes the element in the return array otherwise rejects the element.

As the filter method returns an array the other methods such as sort, map, join, unshift can be used with the filter method to manipulate the array elements.

Typescript Array filter

ES6 standards are supported in typescript and typescript code complied into JavaScript hence same filter method with arrow functions used in the above example can be used in typescript code as well.

Conclusion

This is how you can filter the elements from an array in JavaScript and create a new array of filtered items. I hope now you have some insights into the JavaScript array filter method and how it works.