Using JavaScript Filter to Match Values and Create New Arrays

How the JavaScript array filter works

Developers create arrays to orderly store multiple elements in containers. There are various functions for sorting arrays (for example, changing the order of elements). However, the JS filter() method lets you filter elements according to specified conditions.

This code example illustrates how you can filter an array called fruits and create a new one, consisting only of names that have more than 6 characters.

var fruits = ["Apple", "Blackcurrant", "Blueberries", "Banana", "Blackberries", "Plums"];
document.getElementById("test").innerHTML = fruits;
 
function myFunction() {
   var result = fruits.filter(word => word.length > 6);
   document.getElementById("test").innerHTML = result;

The next code example presents an array called prices. We are going to apply JavaScript filter() to create a new array with values that are less than 100:

var prices = [15, 45, 1234, 65, 122, 555];
document.getElementById("test").innerHTML = prices;
 
function myFunction() {
   var result = prices.filter(price => price < 100);
   document.getElementById("test").innerHTML = result;
}

In the following example, we use JS filter() on an array of participants and filter them by their age. The name appears in the new array if the age is more than 18.

var participants = [{ name: 'Anna', age: 19 },
{ name: 'Josh', age: 17 },
{ name: 'Mary', age: 15 },
{ name: 'Emily', age: 14 },
{ name: 'Caroline', age: 24 },
{ name: 'Sam', age: 16 }];
document.getElementById("test").innerHTML = participants.map(e => e.name + " -> " + e.age).join(', ');


function myFunction() {
    var result = participants.filter(participant => participant.age > 18);
    document.getElementById("test").innerHTML = result.map(e => e.name + " -> " + e.age).join(', ');
}

Syntax of JS filter()

The JavaScript filter() method has several components to its syntax.

newArray = initialArr.filter(callback);

• newArray: you name the array that will consist of the filtered elements.
• initialArr: the name of the original array.
• callback: the method applied to the initialArr.

The callback can have three arguments as well:

• element: the current element of the array.
• index: the index number of the currently handled value.
• array: the original array.

Therefore, the full syntax of the JavaScript array filter function would look like this:

newArray = initialArr.filter(callback(element, index, array));

Note: the JavaScript filter() does not affect the initial array. It applies the callback function to every element to create a new collection with filtered elements.

JavaScript filter: useful tips

• jQuery library also has a filter() function for filtering values according to specified conditions. It offers a not() method which returns values that do not match the condition.
• The JavaScript array filter function is closely related to map, push and length methods. These functions will give you more control over your arrays and contribute to the production of shorter code.