How to Use Array Filter in JavaScript: A Simple Guide

The filter method in JavaScript is a powerful tool that allows you to create a new array by filtering out elements from an existing array based on a specific condition. This method is especially useful when you want to work only with items that meet certain criteria. In this post, we’ll walk through how to use the filter() method with a simple example.

Syntax of filter()

The filter() method works by calling a provided function on every element of the array, and returns a new array containing only the elements for which the function returns true.

array.filter(callback(element, index, array), thisArg)

• callback: A function that is executed on each element of the array. It should return true or false.
• element: The current element being processed in the array.
• index (optional): The index of the current element.
• array (optional): The array filter() was called upon.
• thisArg (optional): Value to use as this when executing the callback.

Basic Example: Filtering Even Numbers

Let’s start with a simple example where we filter out even numbers from an array of numbers.

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0;
});

console.log(evenNumbers); // Output: [2, 4, 6]

Explanation:

• Original array: We have an array of numbers [1, 2, 3, 4, 5, 6].
• Callback function: Inside the filter() method, we pass a function that checks if a number is even using the condition num % 2 === 0. If the condition is true, the number is included in the new array.
• New array: The filter() method returns a new array [2, 4, 6] containing only the even numbers.

Simplified Example Using Arrow Functions

You can simplify the syntax of the filter() method by using arrow functions, which are shorter and more concise.

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // Output: [2, 4, 6]

Explanation:

• Arrow function: We replace the traditional function declaration with an arrow function num => num % 2 === 0. It’s a shorter way to write the same logic.

Example 2: Filtering an Array of Objects

Now let’s look at a more practical example where we filter an array of objects. Suppose we have a list of people and want to filter out those who are older than 18.

const people = [
  { name: 'John', age: 18 },
  { name: 'Jane', age: 22 },
  { name: 'Jim', age: 18 },
  { name: 'Jake', age: 25 }
];

const adults = people.filter(person => person.age > 18);

console.log(adults); 
// Output: [ { name: 'Jane', age: 22 }, { name: 'Jake', age: 25 } ]

Explanation:

• Original array: We have an array of objects where each object represents a person with a name and age.
• Filter condition: We use person.age > 18 as the condition. The filter() method returns only those objects where the person’s age is greater than 18.
• Resulting array: The new array adults contains only people who are older than 18: Jane and Jake.

Conclusion

The filter() method is a versatile tool in JavaScript for creating new arrays based on conditions. Whether you’re filtering numbers, strings, or objects, the process remains simple and straightforward. You can easily incorporate filter() into your code to work with data more efficiently.

• Use Case: It’s perfect when you need to exclude items that don’t meet certain criteria.
• Arrow Functions: Make the syntax even more concise and readable.

Happy coding!

Subscribe to Youtube Channel