JavaScript array.filter() in ES6 with example

JavaScript

In this post, we are going to learn about JavaScript array. filter() in ES6 with an example, of where and how to use it.

Why do we use array.filter()?

Suppose we have an array of 100 records, need to filter the data based on some conditions as well need to return a new array as a subset of the original array. The solution we were using is to run a loop over the array and filter the data. This approach is time-consuming.

But JavaScript provides an easy way to achieve this with cleaner and shorter code by using an array.filter() method.

What is array.filter()?

array. filter() is a standard built-in function of the array it returns a new array with all elements which passed the condition implemented by a callback function. The array. filter() runs a callback function for each array element. if the callback function returns true the array element includes in the return result array.

Syntax 

let arrayobj = arr.filter(callback(element, index, array), thisArg)

Parameters of array.filter()

  • callback function: This callback function pass as an argument to the array. filter() and is used to check every element of the array against a condition. Which array element matches the condition returns true or else false.The definition of the array.filter() callback function is this. element: The current element of the array on which the callback is executing.
  • index(optional): The index of the current element being executed in the array.
  • arrayOptional: The array object on which we are traversing filter().
  • thisArg(Optional): It represents the object in the code. We use this to represent the object

What is a callback function?

In javascript a function can be passed as an argument to the other function, call them inside the outer function is the callback function.

Example

const greet = function() {  
    console.log("Hi calling after 2 seconds");
}
 
setTimeout(greet, 2000);
//output:Hi calling after 2 seconds"

As we can see we have a function name greet(), We are passing this function as an argument to the setTimeout() function. This is an example of a callback function in JavaScript.

Important Point: The callback function does not call for the array’s index which does not have any values.

Filter out the Max values from an array

In this code example, we have a function name ‘filttermax’ is a callback function that is called for each element of the array and returns a new array with all the elements which pass the condition.

In the resulting output, an array’s two elements [ 60,70 ]which are passing the condition, 

//Callback function 
function filttermax(value) {
  return value >= 50
}

let fillterarry = [10,1, 60, 70].filter(filttermax)

console.log(fillterarry)

Output

[60, 70]

Filter out the higher salary employee using array.filter()

In this example, we are filtering out the employee whose salary >40000 from an array of objects.

In this code example, We are filtering the employees whose salary is greater than 40000 and passing an anonymous function(a function without a name) as a callback function.

So callback function is running each element of the array and returns a new result array of the elements which passed the condition implemented by a callback function

let Employee = [
    {Empname: 'John', salary: 40000},
    {Empname: 'jack', salary: 50000},
    {Empname: 'Racx', salary: 60000},
    {Empname: 'Max', salary: 70000},
    {Empname: 'Robin', salary: 80000}
];

let higherSalaryEmp = Employee.filter(function (e) {
 return e.salary > 40000;
})
console.log(higherSalaryEmp)

Output

[{
  Empname: "jack",
  salary: 50000
}, {
  Empname: "Racx",
  salary: 60000
}, {
  Empname: "Max",
  salary: 70000
}, {
  Empname: "Robin",
  salary: 80000
}]

Filter out Employee based on salary and dept

In this code example, We are filtering the employees whose salary is greater than 40000 and the department is IT, We are is passing an anonymous function(a function without a name) as a callback function.

So callback function is running each element of the array and returns a new result array of the elements which passed the condition implemented by a callback function.

let Employee = [
    {Empname: 'John', salary: 40000,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,Dep:'IT'},
    {Empname: 'Racx', salary: 60000,Dep:'IT'},
    {Empname: 'Max', salary: 70000,Dep:'IT'},
    {Empname: 'Robin', salary: 80000,Dep:'IT'}
];

let higherSalaryEmp = Employee.filter(function (e) {
 return (e.salary > 40000 && e.Dep ==='IT');

})
console.log(higherSalaryEmp)

Output

[{
  Dep: "IT",
  Empname: "jack",
  salary: 50000
}, {
  Dep: "IT",
  Empname: "Racx",
  salary: 60000
}, {
  Dep: "IT",
  Empname: "Max",
  salary: 70000
}, {
  Dep: "IT",
  Empname: "Robin",
  salary: 80000
}]

Related Posts