JavaScript Filter Method (2023)

The Javascript filter method is used to filter arrays based on the function provided as an argument. It creates a new array with filtered elements.This article will discuss the javascript filter method by providing its syntax, use cases and examples.

Syntax of Filter Method In Js

The syntax of the filter method in javascript is simple. It takes a function as an argument, which determines whether or not an element should be included in the new array. The syntax is as follows:

const newArray = array.filter(function(currentValue, index, arr), thisValue)

In this code snippet:

• newArray is the filtered array
• array is the array you want to filter.
• currentValue is the value of the current element being processed
• index is the index of the current element
• arr is the array that filter was called upon.
• thisValue argument is optional and sets the value of this within the function.

Examples of Filter Method In Javascript

Let's say you have an array of numbers and you want to create a new array that only contains even numbers. You could use the filter method like this:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers);
// [2, 4, 6]

In this example, the function we provided is applied each element on array and if the element being processed is even the function return true which means this element will contain in the new array returned by filter method.

Let's give anohter example, this example shows how to filter an array to obtain only numbers:

const inputArray = [1, 2, 'three', 4.5, 'five', 6];
const numbers = inputArray.filter((x) => typeof x === 'number');
console.log(numbers)
// [1, 2, 4.5, 6]

In this example, we checks the type of element being processed, if the type of element is number, the filter method adds it to the array called numbers.

Js Filter Method With Objects

You can use the filter method in javascript with data structures combined with arrays. 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 }
]

*/

Filter Method With Js Arrow Function

An arrow function is an anohter way of writing a function in JavaScript that was introduced in ES6 so you can simply use an arrow function as a callback in your filter method as in the following example:

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); 
// [2, 4]

As you can see, we have created the same example using the arrow function. This method reduces code complexity and increases readability.

Conclusion

If you develop a javascript application, you would probably use the filter method to filter arrays based on a function that tests whether the current element meets the condition.

So, In this article we have discussed the javascript filter method with examples.

Thank you for reading