Filter array with filter() and includes() in JavaScript

In this article, using the filter() and includes() methods in JavaScript, we can filter an array based on the elements presence in another array or specific conditions.

For example, if we have two arrays as array1 and array2, we want to filter array1 to include only the elements that are present in array2.

To have a clear idea about the filter() and includes() methods in JavaScript, let's discuss them individually.

JavaScript filter() and includes() Methods

filter(): Creates a new array that includes only the elements that satisfy the condition provided by the callback function.

includes(): Checks if a specific element exists in an array, returning true if found and false otherwise.

In JavaScript, a callback function is a function that is passed as an argument to another function and executed after some operation has been performed.

Basic Syntax

// filter() syntax
array.filter(callback(element, index, array))

// includes() syntax  
array.includes(searchElement)

Method 1: Using filter() Only

In this program, we filter out names from an array that have a length greater than 4 using the filter() method.

const array1 = ['John', 'David', 'Mike', 'Sam', 'Carol', 'Bob'];
const filteredNames = array1.filter(name => name.length > 4);
console.log(filteredNames); 

['David', 'Carol']

Method 2: Using includes() Only

This program checks if a specific name is included in an array using the includes() method.

const array1 = ['John', 'David', 'Mike', 'Sam', 'Carol', 'Bob'];
const nameToCheck = 'Sam';
const isIncluded = array1.includes(nameToCheck);
console.log(`Is ${nameToCheck} in the array?`, isIncluded); 

Is Sam in the array? true

Method 3: Combining filter() and includes()

In the following program, we use both methods together to filter array1 and include only the elements that are present in array2.

const array1 = ['John', 'David', 'Mike', 'Sam', 'Carol', 'Bob'];
const array2 = ['David', 'Sam', 'Bob', 'Indu'];
const filteredArray = array1.filter(element => array2.includes(element));
console.log('Common elements:', filteredArray); 

Common elements: ['David', 'Sam', 'Bob']

Practical Example: Filtering Products

Here's a more practical example filtering products based on categories:

const products = ['laptop', 'phone', 'tablet', 'camera', 'headphones'];
const electronicCategories = ['laptop', 'phone', 'camera', 'speaker'];
const availableElectronics = products.filter(product => 
    electronicCategories.includes(product)
);
console.log('Available electronics:', availableElectronics);

Available electronics: ['laptop', 'phone', 'camera']

Comparison

Conclusion

Combining filter() and includes() provides a powerful way to filter arrays based on membership in other arrays. This technique is commonly used for data filtering, search functionality, and array intersection operations in JavaScript applications.