JavaScript

Array filter() method in JavaScript | Explained

JavaScript provides a variety of built-in functions to perform different functionalities on arrays such as array.splice(), array.includes(), array.filter(), etc. All these array methods are used to achieve different functionalities. For instance, the filter() method returns an array of filtered elements based on some condition, and it doesn’t affect the original/given array.

This post will present a thorough understanding of the below-listed aspects related to array.filter() method:

So, let’s get started!

What is array.filter() in JavaScript?

It is a built-in array function that creates a new array of filtered elements based on particular criteria. The array.filter() method returns the array of only those elements that satisfy the condition of the argument function.

Syntax of array.filter()

The below snippet will assist you to understand the basic syntax of the array.filter() method:

array.filter(function(current_Element, index, arr), thisValue)

The array.filter() function can take multiple parameters, some of them are mandatory and others are optional:

  • function() parameter is mandatory and it will be invoked for every single element of the array.
  • current_Element is a mandatory parameter that keeps the value of the current item.
  • index is an optional parameter that keeps the index of the currentElement.
  • arr is an optional parameter that keeps the current array.
  • thisValue is also an optional parameter whose default value is undefined and it utilizes the value passed to the function as “this” value.

How does array.filter() method work in JavaScript?

Now, we will understand the working of array.filter() method using some relevant examples.

How to use array.filter() method to get an array of negative numbers only?

The below snippet will explain the working of filter() method in JavaScript:

var numberArray = [12, -26, 32, 14, 27, -31, -17, 0, -1, 10];

var result = numberArray.filter(testFunction);

function testFunction(values){

return values < 0;

}

console.log("Array of Negative Numbers: " , result);

The above program performed the following functionalities:

  • Firstly, we created an array named “numberArray” that consists of different positive as well as negative values.
  • Next, we utilized the array.filter() method to get an array of negative elements.
  • To do so, we created a function named “testFunction()” which will return only those values that are less than 0.
  • Finally, we utilized the console() method to print the array of negative values:

The output authenticates the working of array.filter() method as it returns only negative values.

How to use array.filter() method to get an array of employees older than 24?

In this program, we have an array of employee object where each object has a couple of properties i.e. empName, and empAge as shown in the below code snippet:

let empDetails = [

{empName: 'Alex', age: 25},

{empName: 'Ambrose', age: 23},

{empName: 'Joe', age: 32},

{empName: 'John', age: 22},

{empName: 'Seth', age: 26}

];

let older = empDetails.filter(function (a) {

return a.age > 24;

});

console.log(older);

The task is to filter the array based on employees age i.e., age > 24:

The output shows that there are three employees in the array whose age is greater than 25 and the array.filter() method filters them successfully.

Conclusion

In JavaScript, array.filter() is a built-in array function that creates a new array of filtered elements based on some particular criteria. It returns the array of only those elements that satisfy the condition of the argument function. The array.filter() method doesn’t affect the original/given array. This write-up described what exactly array filter() method is? and how it works in JavaScript using some relevant examples.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.