An Introduction to JavaScript Array Filters() Method

In this article, we are going to see what is filter() in JavaScript. Arrays are one of the most used data structures in JavaScript and performing various operations on it with the help of different methods is done by developers while working with arrays. And the Filter() is one of the methods which is used on arrays. Be ready to learn something new from this article And don’t forget to visit codedamn for interactive coding learning paths.

What is a JavaScript array filter?

A JavaScript array filter is a higher-order function, a method, an array method in JavaScript which takes a callback function. It is based on that block of the callback function, the filter function returns a new array containing the result of the filter method. It was introduced after the ES6 version update of ECMAScript and is now used by every developer.
— We can use the filter function only on the array-type data structure. Before the introduction of the filter function, we used to work with loops for filtering out a specific element from an array, Array Filters() now made it easy to do the tasks.

Parameters of JavaScript array filter

The JavaScript filter() is a higher-order function so it takes some parameters, so let’s look into it.

Callback

As the filter() is a function it takes a callback function to return the result depending on that block of function it returns a new array containing the filtered values.

let numArray = [10, 8, 6, 5, 4, 2, 1, 18, 12];
let numLessThanTen = numArray.filter(num => num < 10);
console.log(numLessThanTen);
// the output [ 8, 6, 5, 4, 2, 1 ]
Code language: JavaScript (javascript)

As you can see in the above code example, I created an numArray array with some random numbers and on the next line I filtered that numArray with the help of the filter(). As a first parameter, I added an arrow function to the filter().

Element

Arrays can be empty or with elements, one can perform operations on the arrays which contain different elements and the filter method also works the same. The filter method loops through every element and returns the result.

let numArray = [10, 8, 6, 5];
let numLessThanTen = numArray.filter((element) => {
  console.log(element);
}));
/* The output 
10
8
6
5 */
Code language: JavaScript (javascript)

Index

Array elements can be counted with the length property, on which position a specific element is present can be found with the help of the index parameter. The index parameter starts the count from 0, so the index of the first element will always be 0, as shown in the example below.

let numArray = [10, 8, 6, 5];
let numLessThanTen = numArray.filter((element, index) => {
   console.log(element, index);
}));
/* The output 
10 0
8 1
6 2
5 3
*/
Code language: JavaScript (javascript)

Arr

The arr parameter is the current array on which the Filter() is being called. The arr parameter encounters the current array on every iteration and returns it. As shown in the example below.

let numArray = [10, 8, 6, 5];
let numLessThanTen = numArray.filter((element, index, arr) => {
   console.log(element, index, arr);
}));
/* The output 
10 0 [10, 8, 6, 5]
8 1  [10, 8, 6, 5]
6 2  [10, 8, 6, 5]
5 3  [10, 8, 6, 5]
*/
Code language: JavaScript (javascript)

thisArg

This is an optional parameter that the filter method takes if we don’t use a callback function.

Return Value

As we discussed above, the JavaScript filter function loop over an existing array and returns a new array based on the specific filtered condition. As shown in the example below.

let numArray = [10, 8, 6, 5, 4, 2, 1, 18, 12];
let numLessThanTen = numArray.filter(num => num < 10);
console.log(numLessThanTen);
// the output [ 8, 6, 5, 4, 2, 1 ]
Code language: JavaScript (javascript)

As you can see in the above example, we used the filter function on the numArray for filtering out the numbers which are less than 10 and as a result of this filtering we got a new array containing the filtered elements.

Examples showing the JavaScript Array filter use

JavaScript Array filter is one of the tasks that every developer does while working with a different type of data in JavaScript. A good example will be an array of customers who are doing online payments, so we want to give them a special discount and what we can do here is we can use the filter method. By using the filter method we will filter out the users who are paying payment online and give them a special discount, Let’s see this in practice.

You can find the code example here on codedamn playground.

Browsers that support JavaScript Arrays

Following browsers support the JavaScript arrays.

• Chrome
• Firefox
• Edge
• Safari
• Opera
• Chrome for android
• Firefox for android

Conclusion

In this article, we saw what is JavaScript array filters(), the parameters of JavaScript array filters() with examples, and also the use case of the filter method in a real-life situation. I hope this article clears all your doubts and if not then visit codedamn for interactive coding courses and learning paths. Create playgrounds and practice coding skills and get software development jobs 🥳.

FAQs

How to filter through an array in JavaScript?

There are different ways to filter out arrays in JavaScript but after the update of version ES6, the filter method was introduced which makes filtering arrays very easy.

What is an array filter in JavaScript?

Array filter is a higher-order function and array method in JavaScript. Which loops over an array and returns a new array based on the specified conditions in the callback function.

 How do you apply an array filter?

We just call the array.filter() method on the existing array or an array from which we want to filter out some elements. As shown in the example below.

const ages = [1, 2, 6, 6, 7, 8, 9, 18, 17];
const ageLessThanTen = ages.filter(age => age < 10);
console.log(ageLessThanTen);
Code language: JavaScript (javascript)

How to use an array filter in ES6? 

The best and easiest way of performing filtering is by using the filter in ES6. It just makes code even easy to read, we can use an array filter in ES6 like this. We can just call the filter method directly on the existing array and the filter will return the new array.

//ES6 syntax
const numbers = [1, 2, 3, 4, 5, 6,7, 8];
numbers.filter((value, index, arr) => {
 console.log(value, index);
});
Code language: JavaScript (javascript)

What is the JavaScript syntax for filtering an array?

The syntax for filtering an array in JavaScript is as follows:

let customers = [
  {
    name: "Naruto",
    address: "Konohagakure",
    payIsOnline: true,
  },
  {
    name: "Sasuke",
    address: "KonohaGakure",
    payIsOnline: false,
  },
  {
    name: "Sakura",
    address: "KonohaGakure",
    payIsOnline: false,
  },
  {
    name: "Hinata",
    address: "KonohaGakure",
    payIsOnline: true,
  },
];

const specialDiscountUsers = customers.filter(
  (customer) => customer.payIsOnline
);

const specialDiscountUsers2 = customers.filter(function (customer) {
  return customer.payIsOnline;
});

console.log(specialDiscountUsers);
Code language: JavaScript (javascript)