What is the filter() method?
In JavaScript, filter() is an array method used to filter out elements that meet certain conditions from the array and return a new array.
This method accepts a callback function as a parameter, this callback function will be applied to each element of the array. The callback function can return true or false, if true then the element will be included in the new array, otherwise not. This method does not mutate the original array, but returns a new array containing the elements that meet the criteria.
Syntax of the filter() method
The syntax of the filter() method is as follows:
array.filter(callback[, thisArg])
Among them, array is the array to be filtered, callback is a callback function, and thisArg is an optional parameter, which is used to set the value of this in the callback function.
The callback function of the filter() method
The callback function of the filter() method accepts three parameters: the current element, the index of the current element, and the array itself. Among them, the current element is required, while index and array are optional.
The callback function must return a boolean value. If true is returned, the current element will be included in the new array, otherwise not.
Filter an array using the filter() method
Now, let us see how to filter an array using the filter() method. Suppose we have an array of numbers from which we want to filter out all even numbers. We can do this using the filter() method and an arrow function as follows:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]
In the above code, we first define a numeric array numbers. Then, we use the filter() method with an arrow function to filter out all even numbers. The logic of the arrow function is to return true if a number is divisible by 2, otherwise return false. Finally, we store all the even numbers filtered out in a new array evenNumbers and print it to the console.
Filter an array of objects using the filter() method
In addition to numeric arrays, we can also filter object arrays using the filter() method. Suppose we have an array of objects, each object has name and age properties, and we want to filter out all objects whose age is greater than or equal to 18 years old. We can do this using the filter() method and an arrow function as follows:
const people = [
{
name: 'Alice', age: 25 },
{
name: 'Bob', age: 17 },
{
name: 'Charlie', age: 30 },
{
name: 'David', age: 16 },
{
name: 'Eva', age: 18 }
];
const adults = people.filter(person => person.age >= 18);
console.log(adults); // [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 }, { name: 'Eva', age: 18 }]
In the above code, we first define an object array people. Then, we use the filter() method with an arrow function to filter out all objects with an age greater than or equal to 18. The logic of the arrow function is to return true if a person's age is greater than or equal to 18, otherwise return false. Finally, we store all filtered adults in a new array adults and print it to the console.
Filter an array of strings using the filter() method
Apart from arrays of numbers and arrays of objects, we can also filter arrays of strings using the filter() method. Suppose we have an array of strings and we want to filter out all strings with length greater than or equal to 5. We can do this using the filter() method and an arrow function as follows:
const words = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig'];
const longWords = words.filter(word => word.length >= 5);
console.log(longWords); // ['apple', 'banana', 'cherry', 'elderberry']
In the above code, we first define a string array words. Then, we use the filter() method with an arrow function to filter out all strings with a length greater than or equal to 5. The logic of the arrow function is to return true if the length of a string is greater than or equal to 5, otherwise return false. Finally, we store all filtered long strings in a new array longWords and print it to the console.
in conclusion
By using the filter() method in JavaScript, we can quickly and easily filter and process elements in an array. Whether it is an array of numbers, an array of objects, or an array of strings, we can use the filter() method to filter out elements that meet certain criteria and store them in a new array.