JavaScript filter: Array Function and Method with Examples

Arrays are commonly used by developers and users in application development. Whether you’re building a simple website or a web application, you may find a situation where you have to select some specific items from an Array. That is the place where the JavaScript filter method comes in. The filter method in JavaScript allows users to create a new array by selecting some elements that meet a certain condition, all of this without changing the original array. In this blog, you will learn the basics of the filter method in JavaScript with examples and some common real-world use cases of the JavaScript filter method.

Table of Contents:

• JavaScript Array
• The filter() Method in JavaScript
  • Syntax
  • Parameter
  • Return Value
• JavaScript filter() Method Examples
  • Example 1: Filtering by Voting Age
  • Example 2: Filtering Positive Numbers
  • Example 3: Filtering Even Numbers
• Real-World Use Cases
• Browser Support
• Conclusion

JavaScript Array

An array in JavaScript is defined as a special variable that is used to store multiple values at once. Thus, instead of creating multiple variables for each item, like one for a name, one for an age, and one for a city, you can store all of them together in a single variable by declaring it as an array. Here’s the syntax to declare a JavaScript Array.

Syntax:

let count = [10, 20, 30, 40];
let learners = ["L1", "L2", "L3", "L4", "L5"];

Here, learners and count are two arrays that store multiple values at once. You can use multiple methods on these arrays, one of which is the filter method in JavaScript.

Launch Your Web Development Career

Join Today

Explore Program

The filter() Method in JavaScript

The filter method in JavaScript is defined as a method that helps you to work with arrays more efficiently. It iterates over each element of an array, applies a condition that is provided by a function, and returns a new array with some selective elements that match with the provided condition. The original array remains unchanged. You can use JavaScript filter() method with basic arrays, and even with complex data like an array of objects.

Syntax

array.filter(callbackFunction(currentValue, index, array), thisArg)

Parameter

In a function, parameters are the variables defined in the function definition. Here are the following parameters used with the JavaScript filter() method:

• Callback Function: This is an important function that holds your condition. It runs only once for every item present in the array and makes the decision whether that item should be included in the final result or not.
• Current Value: It refers to the current value that is being processed in the array.
• Index: It is the optional argument. This gives you the position of the current element in the array. It starts with 0, which means the first element is at index 0.
• Array: This refers to the entire array on which the JavaScript filter() method was called. It is also an optional argument.
• thisArg: This allows users and developers to pass a value that is used as “this” in the callback function. By default, undefined is used.

Return Value

The JavaScript filter method returns a new array with the elements that satisfy the condition written in the callback function. The important thing is that the original array remains unchanged.

JavaScript filter() Method Examples

Here are some more examples of the filter() method in JavaScript. These examples help you to understand more about the filter method:

Example 1: Filtering by Voting Age By Using the canVote() Function

In this example, you’re using the filter() method to get the list of persons who are eligible to vote.

Output:

Example 2: Filtering Positive Numbers By Using the isPositive() Function

In this example, you are using the filter method in JavaScript to get the positive numbers from the array, which contains a list of integers.

Output:

Example 3: Filtering Even Numbers By Using the isEven() Function

In this example, you can use the JavaScript filter method to get all the even numbers from the array that contains both even and odd numbers.

Output:

Real-World Use Cases

The filter method in JavaScript is one of the most important methods for working with data in real-world projects. Here are some important real-world use cases of the filter() method:

• You can use the JavaScript filter method to get the list of users who are above 18 years old and eligible to vote.
• You can use the filter method in JavaScript to display the items that are currently in stock.
• The JavaScript filter method is used to clean up arrays by removing null, undefined, and empty strings from the array.
• The filter method in JavaScript is used in building search and filtering features like user filters on blog posts, products, and movies.
• It allows you to filter an array of objects by some property.

Browser Support

The filter method in JavaScript is widely supported by all modern browsers. Here is the list of all the commonly used browsers that support the JavaScript filter method:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari
• Opera Mini

Conclusion

The filter method in JavaScript is considered one of the most important methods while working with arrays in JavaScript. Whether you’re cleaning data, filtering users, or building a search feature, this JavaScript filter method helps you write clean code and extract some selective elements from the original array without changing the original array. Thus, understanding the JavaScript filter() method helps in building real-world projects.

To learn more about JavaScript functions, check out this Web Development course and also explore JavaScript Interview Questions prepared by industry experts.

JavaScript Array filter() Method – FAQs