Filtering Arrays in JavaScript using the filter() Method

In this article, we will explore how to use the filter() method to filter arrays in JavaScript. which allows you to create a new array containing elements that meet specific criteria.

JavaScript provides powerful array methods that make it easier to manipulate and transform arrays. The arrays are powerful data structures that allow us to store and manipulate collections of elements.

Understanding the filter() Method:

The filter() method in JavaScript allows you to filter an existing array based on a specific condition by passing a callback function as an argument. The callback function tests each element against a given condition and returns true or false. If the element satisfies the condition (returns true), it is included in the new array; otherwise, it is excluded.

The filtered array will only include the elements that meet the specified condition.

The filter() method does not execute the function for empty elements and does not change the original array.

Syntax:

array.filter(function(currentValue, index, arr), thisValue)

The parameters:

• callback(required): This is a callback method that holds the function to be called for each element of the array.
• element(required): This is a value of the elements being processed currently.
• index(optional): This param is used for the index of the current element in the array starting from 0.
• arr(optional): It contains the complete array on which Array.every is called.
• thisValue(optional):: it holds the context to be passed as this is to be used while executing the callback function.

Filtering array in Javascript

Let’s demonstrate some examples of filter arrays. I am creating the below script to select only the even numbers from an array of numbers:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const even_numbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);

in the above code :

• We have initialized the array.
• Applied filter() methods, that create a new array called “even_numbers” by testing each element in the “numbers” array using the callback function that checks whether the number is even.
• The result is a new array containing only the even numbers.

Output:

[2, 4, 6, 8, 10]

Filtering Objects with Javascript:

The filter() method can also be used to filter arrays of objects based on specific criteria. we want to filter out users who are greater than 30 years old:

const users = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 32 },
  { name: 'Adam', age: 28 },
  { name: 'Emily', age: 19 },
];

const filterUsers = users.filter((user) => user.age > 30);
console.log(filterUsers);

Output:

[
   { name: 'John', age: 25 },
   { name: 'Adam', age: 28 },
   { name: 'Emily', age: 19 }
]

In this example, the callback function (user) => user.age > 30 checks the age property of each user object. If the age is greater than 30, the function returns true, and the user object is included in the filterUsers array.

Filtering with Complex Conditions

Let’s consider an example where we want to filter out strings from an array that contain more than five characters:

const fruits = ["apple", "banana", "orange", "kiwi", "pear"];
const shortFruits = fruits.filter(fruit => fruit.length < 5);
console.log(shortFruits);

in the above code, the callback function checks whether the length of the string is less than 5. The result is a new array containing only the fruits with a length less than 5.

Output:

["kiwi", "pear"]

Chaining Multiple Filters:

You can also apply filter() with chained with other array methods, allowing you to apply multiple filters to an array. Let’s filter an array of numbers to include only even numbers greater than 5:

const numbers = [2, 5, 8, 10, 3, 6];

const filteredNumbers = numbers.filter((number) => number > 5).filter((number) => number % 2 === 0);

console.log(filteredNumbers)

Output:

[8, 10, 6]

The filter() method filters out numbers greater than 5, and the second filter() method filters out odd numbers.

Conclusions:

The filter() method is a powerful tool in JavaScript for selecting elements from an array based on certain criteria. It allows you to create new arrays that contain only the elements that meet specific criteria, while excluding others.