How to use filter method in arrays in javascript

Javascript filter function is applied to arrays and is used to get an array of only those elements which satisfy a particular requirement or condition.
filter does not modify the array on which it is called but creates and returns a new array having only those elements which fulfill the filter condition.
Rest elements are removed or filtered out from the result array.

Syntax
filter accepts a function as argument. This function is also called a callback function and has the below syntax.

Here,

• element: Current array element for which the callback function is invoked. This argument is mandatory.
• index: The index of current array element. This argument is optional.
• array: Array for which filter was called. This argument is optional.

The callback function should return true or false. If it returns true, the current element is added to the result array otherwise it is not added or filtered out.
Thus, the complete syntax of filter function is

Note that filter does not modify the original array, it creates a new one.

Examples
Following examples will clarify the purpose and usage of filter method for javascript arrays.
Filter array of numbers
Suppose you have an array of numbers and you want only those numbers that are lesser than 5. One approach is to iterate over the array and compare each element with 5.
If it is lesser then push the element to a new array. With filter, the same task can be done in a concise way as shown below.

 // callback function for filter
function compare(element) {
     // compare element with 5
     return element < 5;
  }

  // declare array
  let numbers = [2,4,5,1,20];
  let filtered = numbers.filter(compare);
  document.write(filtered);  // prints 2,4,1

Notice that only the name of callback function is supplied to filter. Arguments of callback function are supplied implicitly.

Filter array of objects
Suppose you have a product inventory in the form of an array of product objects and you want to shortlist the products which have less stock remaining.
filter function can be used for this purpose as below.

// callback function
   function filter(product) {
      // product with stock lesser than 1000
      return product.stock < 1000;
   }
 
   // declare array of objects
   let products = [{stock: 100, price: 20}, 
                   {stock: 50, price: 180}, 
                   {stock: 1000, price: 250}];
   // filter array
   let shortlistedProducts = products.filter(filter);
   console.log(shortlistedProducts);

Above example declares an array of product objects where each object consists of stock and price fields. The callback function accepts a product object and checks if its quantity is lesser than 1000 which means that it is going to be out of stock.
This callback function is supplied to filter which returns an array of those products whose quantity is lesser than 1000. Below output is printed on the browser console.
It shows that the product with adequate quantity as been filtered out.
filter method javascript ES6
With ES6, it is not necessary to declare the callback function separately. It can be supplied inline to filter as an arrow function.
With arrow function syntax, the code looks cleaner and more concise as compared to the traditional approach. Above examples can be modified to use arrow functions as below.
Filter array of numbers ES6

// declare array
  let numbers = [2,4,5,1,20];
  // get array elements lesser than 5
  let filtered = numbers.filter(number => number < 5);
  document.write(filtered );  // prints 2,4,1

Look, it takes only a single line of code to filter out the required numbers.
Filter array of objects ES6

// declare array of objects
   let products = [{stock: 100, price: 20},
                   {stock: 50, price: 180},
                   {stock: 1000, price: 250}];
   // get products with stock lesser than 1000
   let shortlistedProducts = products.filter(
                                 product => product.stock < 1000);
   console.log(shortlistedProducts);

This code produces the same result as the earlier example. It can be clearly seen that the code is much shorter than the one without arrow function.
Click the clap icon if the article was useful in explaining the concept, purpose and usage of filter function in javascript arrays.