JavaScript Filter: A Step-By-Step Guide

The JavaScript() filter method creates an array of elements from an existing array. The filter() method accepts a callback function as an argument. This function evaluates whether an element should be added to the new list from the existing one.

If you are new to JavaScript, you may not have heard of the filter() and reduce()Javascript functions. These functions can be useful when you are working with a list of objects, also known as an array.

If you have ever wanted to get only certain values from an array, you can use the JavaScript filter() function. In this tutorial, we will discuss, with reference to examples, how to use the filter() function.

Array Refresher

An JavaScript array stores zero or more items. Items can be numbers, other arrays, strings, or use another data type. They use numbered indices starting from “0” to access specific items.

Arrays let you store multiple values in the same variable. This can help you write better and cleaner because you don’t need to write multiple variables to store your values.

Here is an example of an array in JavaScript:

let names = ["Alex", "Bill", "Connor", "Daniel", "Edna"];

JavaScript Filter Array

The JavaScript array filter() method creates a new array based on the contents of an existing array. The filter() method evaluates a callback function on each item in an existing array. Any item that meets the condition in the callback function is added to a new list.

Using the filter method, we are able to retrieve values that meet certain criteria and add them to a new array.

Filter Array JavaScript Syntax

The filter method uses the following syntax:

var newArr = oldArr.filter(function(item) {
	return yourCondition;
});

This code defines an array called “newArr” based on the contents of the “oldArr” array. Our callback function returns a value to the new array if a condition is met. Example conditions include:

• item > 5
• item == “Jessie”
• item < 3

You could use JavaScript comparison operators to build your conditions. Or, you could use an if statement. Using an if statement lets you control which one of multiple values is added to a new list.

Filter JavaScript Examples

Filter a List of Numbers

Let’s start with a simple example. We have a list of purchases from a coffee shop. We want to create a new list which displays purchases over $10.

Our list of purchases looks like this:

var purchases = [2.50, 2.70, 10.50, 12.30, 9.60, 2.30, 3.40];

We can use the filter() method to retrieve the purchases worth more than $10:

var big_purchases = purchases.filter(function(purchase) {
	return purchase > 10;
});

Our program checks whether a purchase was worth more than $10.A purchase is added to our big_purchases list if it is worth more than $10. Otherwise, the purchase is left out.

The value of the big_purchases JavaScript variable is:

[10.5, 12.3]

The filter() method returns all the elements that pass the test we have defined. This test is “item > 10”. If we wanted to access every purchase, we could refer back to our original “purchases” list. Our filter() method returns an array of values greater than $10.

Filter an Array of Objects

We have an array that contains the names of everyone in a school:

var students = [
	{
		id: 1,
		name: "Alex",
		class: "First Grade",
		age: 5
	},
{
		id: 2,
		name: "Bill",
		class: "First Grade",
		age: 5
	},
{
		id: 3,
		name: "Connor",
		class: "Second Grade",
		age: 6
	}
];

What if we only want to retrieve the students who are in first grade? Filter() makes it easy to perform this operation. Let’s write a function that will return all first-graders from the “students” array:

var firstGradeStudents = students.filter(function (student) {
	return student.class === “First Grade”;
});

Filter() takes in one parameter. This is a function that determines what operation you run on your data.

The filter() function goes through every object in the “students” array. filter() returns students whose class is equal to “First Grade.” The “===” operator means equality.

The filter function will create a new array with these new values, accessible through the “firstGradeStudents” variable.

Conclusion

You can use the filter() array method to create a new array from the contents of an existing array. The clue is in the name with the filter() method. filter() filters out elements from an existing array.

And that’s it! Now you can use reduce() in JavaScript with even more confidence. To learn more about how to code in JavaScript, read our article on the best tutorials for JavaScript beginners.