Using Array filter() method to coding in Javascript/JS

This JavaScript tutorial explains how to use the Array technique called filter() with syntax and examples.


In JavaScript, filter() is an Array method that is used to return a new array with only those factors that meet a particular criteria. Because the filter() technique is a approach of the Array object, it have to be invoked through a specific occasion of the Array class.


In JavaScript, the syntax for the filter() technique is:

array.filter(callback(element [, index [, array]]) [,thisParameter]);

Parameters or Arguments

callback A callback function to check every aspect of the array. element The modern element of the array. index Optional. The index of the modern issue within the array. array Optional. A reference to the original array. thisParameter Optional. A parameter that will be used as this inside the callback function.


The filter() technique returns a new array with solely these elements that satisfy the criteria provided. In the tournament that none of the elements satisfy the criteria, the filter() approach will return an empty array.


The filter() approach does now not adjust the authentic array.


Let’s take a seem at an example of how to use the filter() approach in JavaScript.

For example:

var totn_array = [ 1, -5, 10, -15, 0 ];

function greater_than_zero(totn_element) {
   return totn_element > 0;


In this example, we have declared an array object known as totn_array that has 5 elements. We have then invoked the filter() approach of the totn_array variable to check each component price the usage of the callback feature greater_than_zero.

We have written the output of the filter() approach to the web browser console log, for demonstration purposes, to exhibit what the filter() method returns.

The following will be output to the web browser console log:

[1, 10]

In this example, the filter() approach will return an array with only two elements – 1 and 10. These are the elements that comfy the crtieria of being greater than zero.

Using the thisParameter

When you use the non-obligatory parameter referred to as thisParameter, the filter() method will provide the fee of thisParameter as this within the callback function.

For example:

var totn_array = [ "tech", "on", "the", "net" ];
var msg = "The element being tested is: ";

function contains_e_char(totn_element) {
   window.console.log(this + totn_element);
   return totn_element.indexOf('e') !== -1;

window.console.log(totn_array.filter(contains_e_char, msg));

In this example, we have used thisParameter to furnish the following string cost as this in the callback function:

"The element being tested is: "

The following will be output to the web browser console log:

The element being tested is: tech
The element being tested is: on
The element being tested is: the
The element being tested is: net
["tech", "the", "net"]

In this case, the filter() method will return a new array with three factors – “tech”, “the”, “net” (since the indexOf approach will check every component to see if it includes the “e” character).