Guide to the JavaScript Array Filter() Method

In JavaScript, the filter() method is an iterative method that calls a callback function once for each element in an array. If the callback function returns true, it includes that element in the return array. The filter() method is also called a copying method because it returns a shallow copy of an array that contains the same elements as the ones from the original array.

The JavaScript array filter() method allows you to filter an array to only see elements that meet a specified condition. It uses a callback function to iterate through each element in the array and only returns the ones that meet the specified condition.

The JavaScript filter()method looks like any other methods, except that it accepts parameters that provide more options for manipulating the data within an array.

The filter() method accepts two named arguments: a callback function and an optional object. The callback function takes three arguments:

The index of the array arguments are optional.

The filter() method creates a new array with all elements. There are three different ways to write the syntax of filter() method. The syntax is as follow:

callbackFn executes each element of an array. It returns a truthy value to keep the element in an array. The callbackFn is called with the following arguments:

More on JavaScript3 Ways to Use Array Slice in JavaScript

To use the filter() method in JavaScript, we need to follow four steps:

Here is an example that uses the filter() method to filter an array based on a search criteria for car brands that start with the letter “B.”

In this example, filter() method is called on the array cars to return only car brands that start with the letter “B.” The function filterItems takes two parameters arr and query that returns the new array with matching query value. Inside filterItemmethod filter() method is called on cars array that will filter the array based on the query.

The filter() method traverses the array and tests each element to determine if it matches with the query. It returns a new array with three brands: Bentley, BMW and Bertone.

The filter() method does not modify the original array, but instead returns a new array with only the elements that pass the test inside the function.

The following is the code that filters an array of numbers and creates a new array with only the even elements. The steps to use the filter() on array of numbers are:

Here is an example that demonstrates the program.

In the above code, we defined an array of numbers numbersArr. We used the filter() method on numbersArr and passed a function that determined if each element is even by using the modulo operator % to see if the number is divisible by two. If the number is even, the function returns true and the element is included in the new array evenNumbers. If the number is odd, the function returns false, and the number is excluded from the new array.

The following is the code that filters an array of objects and creates a new array with only the truthy elements. The steps to use the filter() on array of objects are:

Here is an example code snippet that demonstrate the program.

In the above code, we defined an array of objects freelancers. We used the filter() method on the freelancers array and passed a function that checks if each freelancer is skilled in JavaScript. If the skill matched the condition, the the object was included in the new array filter_freelancers. If the skill does not match, the function returns false, and the object is excluded from the new array. The result returns a new array with two freelancers, Harry and David, who are skilled in JavaScript.

The following is code that filters all the prime numbers from an array and creates a new array with only the prime numbers. The steps to use the filter() are:

Here is an example code snippet that demonstrates the example.

In the above code, we defined an array of numbers array. We used the filter() method on arrayand passed a function isPrime that checks if each element is prime. If the number is prime, the function returns true, and the element is included in a new array. If it doesn’t match, the function returns false, and the object is excluded from the new array. The search criteria surfaced a new array with the numbers [2, 3, 5, 7, 11, 13].

Here are some useful tips to use filter() method in JavaScript:

More on JavaScriptHow to Use the JavaScript Array FindIndex Method

Here are some common mistakes to avoid when using the filter() in Javascript: