Array.prototype.filter() Made Easy

The filter() method is an immutable JavaScript array iteration method that creates a new array filled with all the original array elements that pass the test provided by the callback function without changing the original array.

It does not execute the function for array elements without values. Also, it does not mutate the original array.

// WWE superstars array
let wweSuperstars = [
   {
      'id': 001,
      'first_name': 'Brock',
      'last_name': 'Lesnar',
      'ring_name': 'Brock Lesnar',
      'gender': 'M',
      'Nationality': 'Portugal',
      'Height': '6.3ft',
      'weight': '286 lbs',
      'age': 32,
      'achivement': [WWE, smackdown,]     
   },
   {
      'id': 002,
      'first_name': 'Franklin',
      'last_name': 'Lashley',
      'ring_name': 'Bobby Lashley',
      'gender': 'M',
      'Nationality': 'Portugal',
      'Height': '6.3ft',
      'weight': '273 lbs',
      'age': 30,
      'achivement': [WWE, smackdown,]     
   },
{
      'id': 003,
      'first_name': 'Randal',
      'last_name': 'Orton',
      'ring_name': 'Randy Orton',
      'gender': 'M',
      'Nationality': 'Germany',
      'Height': '6.5ft',
      'weight': '245 lbs',
      'age': 29,
      'achivement': [WWE, smackdown,]     
   },
{
      'id': 004,
      'first_name': 'Oscar',
      'last_name': 'Gutierrez,
      'ring_name': 'Rey Misterio',
      'gender': 'M',
      'Nationality': 'France',
      'Height': '5.6ft',
      'weight': '347 lbs',
      'age': 32,
      'achivement': [WWE, smackdown,]     
   }
];

We will make reference to the code snippet above as we progress.

Syntax

originalArray.filter(callbackFunction,thisArg ); 

Callback Function

Syntax

callbackFunction(element, index, array);

This is the function that houses the conditions to be executed over each element of the array. It returns true to keep the element, returns false otherwise.

The callback function receives 3 parameters which include:

• array: This is the array that is currently being processed by the filter() method. It is optional.
• index: This is the index of the current item in the array. It is optional.
• element: this is the element currently being executed. It is usually required.

thisArg

This represents the parameter that is used as the ‘this’ value in the callback function. It is optional.

The Return value

This method usually returns a new array containing the results of executing the callback function on every element in the original array. If no elements pass the test, an empty array will be returned.

The Array.prototype.filter() method in action

Here, we will examine some use case for the filter() method.

Case 1:

To search and filter specific properties of objects into an array.

 // Add the variable wweSuperstars from the first code snippet
 /* Here */

 const getRingName = () => wweSuperstars.filter((superstar) => {
    return superstar.ring_name === 'Brock Lesnar'} );
 getRingName();

 // Output

 [{id: 1, first_name: "Brock", last_name: "Lesnar", ring_name: "Brock Lesnar", gender: "M", Nationality: "Portugal", Height: "6.3ft", weight: "286 lbs", age: 32}]

In the code snippet above we searched for a superstar by ring name Brock Lesnar and we received an array containing its object.

Case 2:

To search and filter array content based on search criteria (query). This is a unique implementation of a modern web app search feature where users do not need to complete the search keyword.

// Add the variable wweSuperstars from the first code snippet
/* Here */

// Filter array items based on search criteria (query)

filterItems = (wweSuperstars, query) => {
  return wweSuperstars.filter(superstar => {
      return superstar.ring_name.toLowerCase().indexOf(query.toLowerCase()) !== -1
  })
}

console.log(filterItems(wweSuperstars, 'bo'));
console.log(filterItems(wweSuperstars, 'rey'));

// Output

[{Height: "6.3ft", Nationality: "Portugal", age: 30, first_name: "Franklin", gender: "M", id: 2, last_name: "Lashley", ring_name: "Bobby Lashley", weight: "273 lbs"}]

[{Height: "5.6ft", Nationality: "France", age: 32, first_name: "Oscar", gender: "M", id: 4, last_name: "Gutierrez", ring_name: "Rey Misterio", weight: "347 lbs"}]

In the code snippet above, we filter the wweSuperstars array for all the superstars ring_name that contains rey. The filter() method found an array item that passed the test and returned an array containing the array item.

Conclusion

In this article, we have seen that the filter() method returns a new array filled with all the original array elements that pass the test provided by the callback function without mutation of the original array. Finally, we considered two use cases of the filter() method.