Javascript Array Filter with examples

JavaScript Array Filter Method

In this article, we will learn about what is Javascript Array and how to use it in a proper way. After reading this article, you will be confident enough to use the Javascript Array Filter method in your daily programming. So without wasting much time, let’s dive in.

Also Read: Convert Array to String in Javascript using Array.join() Method

What is Javascript Array Filter Method

The Array filter() method which was introduced in ECMAScript 5, creates a new array with all elements that pass a test by a provided function.

In other words, Array.filter() is used to create a different array from the originally given array consisting of the only items which satisfy the given condition in function.

How do Javascript Filter Method works

The filter() method creates an array with all array items that go through the supplied function. Although it must be noted that the filter() function does not execute the function for array elements without any values.

It must also be noted that the filter() method is a pure function and does not change the original array instead it will return a new array that satisfies the requirement of the provided function in the argument.

Syntax of the Javascript Array Filter()

Here is the syntax of Javascript Array Filter() Method.

let newArray = originalArray.filter(function (item) { return condition; }); 

Here, newArray is the newly generated array after applying the filter method on the original array i.e original array. The item argument is a reference to the current element in the array as filter() checks it against the condition.

The items which passed the condition sent to the new array. Along with item arguments, you can also pass the index of the current element being processed by the Array filter function.

Also Read: Javascript Interview Questions related to Arrays

Examples of Javascript Array Filter() Method

The following are some of the most common examples in which you can see how to use the Javascript Array filter() method in the best possible way.

Example 1 – Filtering an array of numbers in Javascript

Array filter method can  be easily used to filter array of numbers. Below code will show you how.

// index.js
const numbers = [1, 3, 4, 6, 8, 9];
const newArray = () => {
  return numbers.filter(number => number % 2 === 0);

Run this code using node index.js

Javascript Array.filter() Method

We can see that, we get the filtered array as newArray containing all the elements which matched the given condition. Filter function just only filter the original array based on the condition given without changing the value of the array elements, hence it is also called as Pure Function.

Example 2 – Filtering an array of objects in Javascript

Array.filter() can also be used to filter an array of objects using its properties. One such example is shown below.

var heroes = [
	{name: “Batman”, franchise: “DC”},
	{name: “Ironman”, franchise: “Marvel”},
	{name: “Thor”, franchise: “Marvel”},
	{name: “Superman”, franchise: “DC”}

var marvelHeroes =  heroes.filter(function(hero) {
	return hero.franchise == “Marvel”;

// [ {name: “Ironman”, franchise: “Marvel”}, {name: “Thor”, franchise: “Marvel”} ]

Here we have filtered the array of objects using the price property of each object in the array.

Example 3 – Accessing the index of an array using Array.filter() in Javascript

Sometimes, we need to access the index of an array in the code. We can easily do this using the filter method.

const students = [
  { name: 'Aman' },
  { name: 'rahul' },
  { name: 'Sidharth' }
const filteredArray = students.filter(function (item, index) {
  console.log('This is the current index', index);
// Console Output
/* This is the current index 0
This is the current index 1
This is the current index 2 */

So, this is all about Javascript Array.filter() Method. Thanks for reading and please feel free to share.

Leave a Comment