How to filter array elements in JavaScript

JavaScript provides various functions and methods that may be used to perform some operations on array elements. JavaScript’s filter() method allows you to filter array elements based on some condition. The condition is defined inside the callback function. The callback function comprises a set of code lines and this callback function is passed to the filter() method as an argument.

This post provides the working of the filter() method and a set of examples that shows how the fitter () method filters out the array elements.

How to filter array elements in JavaScript

As discussed earlier, the filter() method is practiced by filtering the array elements in JavaScript. This section presents the working and usage of the filter() method in JavaScript.

How to use filter() method in JavaScript

Before getting into applying the filter() method, let’s have a look at the syntax to get the basic concept of the filter() method.

array.filter(callback-function(Val, index, array), this-val)

The above syntax illustrates that an array is being

The filter() method accepts two parameters callback-function() and this-val

the callback-function() is the key stakeholder which takes three parameters Val, Index, and Array
the Val represents the array value being passed
the Index shows the index of the element that is being passed
Array parameter in callback-function() denotes the array of the element

The return value of the filter() method

Note: The Val parameter of the callback-function() is necessary to be used. However, the other parameters are optional and need not be used every time.

Example 1

The following JavaScript code makes use of the filter() method to filter specific elements of an array.

var a = [2, 7, 11, 15, 18, 22]
function even(num){
return num%2 == 0;
}
console.log(a.filter(even));

In the above code, an array of numbers is created on which the filter() method would be applied. After that, a function is created that filters the even numbers only and this function is passed to the filter() method as an argument.

Output

The output shows that only the even numbers from the array are printed on the console.

Example 2

The example explained here would filter out the positive numbers from the array.

var arr = [-2, 5, -10, -12, 7, 15]
function pos(num){
return num >= 0;
}
console.log(arr.filter(pos));

The above code creates an array of numbers and then a callback function is executed which filters returns the numbers that are greater than or equal to zero.

Output

The output shows that the filter method has returned only those numbers that have values greater than or equal to zero.

Note: One can update the content of the array by keeping only those values that are returned by the filter() method.

Example 3

The following code practices the use of the filter() method on an array of strings.

var str = ["Linux OS", "Windows OS", "macOS"]
function len(num){
return num.length > 5;
}
console.log(str.filter(len));

The above code creates an array of strings and then the callback function is applied to it that would get the length of each element. After that, the callback function would return only those string elements that have a length greater than 5.

Output

The output shows that only those string elements are returned that have lengths greater than 5.

Conclusion

In JS, the array elements can be filtered out by using the filter() method. The main ingredient of the filter() method is the callback function. The filter() method is necessary to be executed with the callback function. This callback function contains a few lines of code that set the condition which would be used to filter array elements. By going through this post, you would have learned to filter array elements in JavaScript using the filter() method along with a set of examples.

How to filter array elements in JavaScript