JavaScript Filter() Method
Mar 03 2024
Javascript filter()
is an array method that allows us to create a new array from an existing one by filtering out elements that meet conditions provided by a callback function.
It is especially very useful when we want to obtain a new array by removing unwanted elements.
Let's see how it works.
How Does the Javascript filter Method Work?
The Javascript filter method iterates through an array, and if the callback function returns true for the element being processed in the iteration, that element is added to the filtered array.
Here's a basic example:
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4]
In this example, the filter method is used to obtain even numbers. The callback function checks if each number is even (divisible by 2). If it is, the number is added to the evenNumbers
array.
Callback Function
The callback function passed to the filter method as a parameter is where you define the condition for filtering elements.
It receives three arguments:
- element: The current element being processed in the array.
- index (optional): The index of the current element.
- array (optional): The array on which filter was called.
And, a callback function can be defined in different ways:
Using Named Function
function isEven(number,index) {
return number % 2 === 0;
}
const numbers = [1, 2, 3, 4, 5, 6];
const filteredNumbers = numbers.filter(isEven);
Using Arrow Function
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4, 6]
Filter Method With Array of Objects
You can use the filter method in javascript with array of objects. For example, let's say you have an array including some objects representing people and you want to create a new array containing only people who are over the age of 18. You could use the filter method like this:
const people = [
{ name: 'John', age: 20 },
{ name: 'Jane', age: 17 },
{ name: 'Bob', age: 25 },
{ name: 'Mary', age: 16 }
];
const adults = people.filter(function(person) {
return person.age >= 18;
});
console.log(adults);
/*
[
{ name: 'John', age: 20 },
{ name: 'Bob', age: 25 }
]
*/
Conclusion
In this article we have discussed the js filter method with examples. If you want to learn more about array methods in javascript you can check the following articles:
- Javascript Sort Method
- JavaScript Every Method: Check All Elements In Array Equal
- JavaScript Join Array Method
- JavaScript Map Method
- JavaScript Slice Method Explained With Examples
- Javascript indexOf
Thank you for reading