totn JavaScript

JavaScript: Array filter() method

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

Description

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

Syntax

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

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

Parameters or Arguments

callback
A callback function to test each element of the array.
element
The current element of the array.
index
Optional. The index of the current element within the array.
array
Optional. A reference to the original array.
thisParameter
Optional. A parameter that will be used as this within the callback function.

Returns

The filter() method returns a new array with only those elements that satisfy the criteria provided. In the event that none of the elements satisfy the criteria, the filter() method will return an empty array.

Note

  • The filter() method does not modify the original array.

Example

Let's take a look at an example of how to use the filter() method in JavaScript.

For example:

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

function greater_than_zero(totn_element) {
   return totn_element > 0;
}

window.console.log(totn_array.filter(greater_than_zero));

In this example, we have declared an array object called totn_array that has 5 elements. We have then invoked the filter() method of the totn_array variable to test each element value using the callback function greater_than_zero.

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

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

[1, 10]

In this example, the filter() method will return an array with only 2 elements - 1 and 10. These are the elements that satisfied the crtieria of being greater than zero.

Using the thisParameter

When you use the optional parameter called thisParameter, the filter() method will provide the value 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 provide the following string value 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 3 elements - "tech", "the", "net" (since the indexOf method will test each element to see if it contains the "e" character).

Share on: