What is Array filter in JavaScript?

Array.filter is a powerful array method in JavaScript that creates a new array containing elements that pass a specific test. Whether you're searching for specific items, removing unwanted data, or creating subsets of arrays, filter is an essential tool in every JavaScript developer's toolkit. It's perfect for when you need to extract specific elements from an array based on certain conditions.

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

1Array.filter(function(currentValue, index, arr), thisValue)

1const numbers = [1, 2, 3, 4, 5];
2
3// Basic usage with just currentValue
4numbers.filter(num => num > 2);  // [3, 4, 5]
5
6// Using index parameter
7numbers.filter((num, index) => index % 2 === 0);  // [1, 3, 5]
8
9// Using all parameters
10numbers.filter((num, index, array) => {
11return num > array[index - 1];  // Keep numbers larger than previous
12});  // [2, 3, 4, 5]

Example 1 - Filter products by price range

1// Filter products within a specific price range
2const products = [
3{ name: 'Laptop', price: 999.99 },
4{ name: 'Headphones', price: 99.99 },
5{ name: 'Mouse', price: 29.99 },
6{ name: 'Keyboard', price: 59.99 }
7];
8
9const affordableProducts = products.filter(product => product.price < 100);
10console.log(affordableProducts);
11/* Output:
12[
13{ name: 'Headphones', price: 99.99 },
14{ name: 'Mouse', price: 29.99 },
15{ name: 'Keyboard', price: 59.99 }
16]
17*/

Let's break down what's happening in this example step by step:

Example 2 - Filter users by age

1// Filter users who are old enough to vote
2const users = [
3{ name: 'Alice', age: 25 },
4{ name: 'Bob', age: 17 },
5{ name: 'Charlie', age: 21 },
6{ name: 'David', age: 16 }
7];
8
9const canVote = users.filter(user => user.age >= 18);
10console.log(canVote);
11/* Output:
12[
13{ name: 'Alice', age: 25 },
14{ name: 'Charlie', age: 21 }
15]
16*/

Let's break down this example:

1. We start with an array of user objects:

1// Start with an array of user objects
2const users = [
3{ name: 'Alice', age: 25 },
4{ name: 'Bob', age: 17 },
5{ name: 'Charlie', age: 21 },
6{ name: 'David', age: 16 }
7];

1. We use filter to create a new array containing only users who are 18 or older:

1const canVote = users.filter(user => user.age >= 18);

1. The callback function returns:
   • true for Alice (25 >= 18)
   • false for Bob (17 >= 18)
   • true for Charlie (21 >= 18)
   • false for David (16 >= 18)

💡 Pro tip: When filtering objects, make sure to check if the property exists to avoid errors with undefined values.

Example 3 - Filter objects by multiple conditions

1// Filter active premium users
2const users = [
3{ name: 'Alice', isPremium: true, isActive: true },
4{ name: 'Bob', isPremium: false, isActive: true },
5{ name: 'Charlie', isPremium: true, isActive: false },
6{ name: 'David', isPremium: true, isActive: true }
7];
8
9const activePremiumUsers = users.filter(user => 
10user.isPremium && user.isActive
11);
12console.log(activePremiumUsers);
13/* Output:
14[
15{ name: 'Alice', isPremium: true, isActive: true },
16{ name: 'David', isPremium: true, isActive: true }
17]
18*/

Let's break down this example:

1. First, we have an array of user objects with multiple properties:

1// Array of users with premium and active status
2const users = [
3{ name: 'Alice', isPremium: true, isActive: true },
4{ name: 'Bob', isPremium: false, isActive: true },
5{ name: 'Charlie', isPremium: true, isActive: false },
6{ name: 'David', isPremium: true, isActive: true }
7];

1. We use filter with a callback that checks multiple conditions:

1const activePremiumUsers = users.filter(user => user.isPremium && user.isActive);

1. Let's see how each user is evaluated:
   • Alice: (true && true) = true (included)
   • Bob: (false && true) = false (excluded)
   • Charlie: (true && false) = false (excluded)
   • David: (true && true) = true (included)

💡 Pro tip: You can make complex conditions more readable by breaking them into separate variables or functions.

Example 4 - Filter unique values

1// Filter unique values from an array
2const numbers = [1, 2, 2, 3, 3, 3, 4, 4, 5];
3
4const unique = numbers.filter((value, index, array) => 
5array.indexOf(value) === index
6);
7console.log(unique); // [1, 2, 3, 4, 5]

Let's break down this example:

1. We start with an array containing duplicate values:

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

1. We use filter with all three parameters available to the callback:

1const unique = numbers.filter((value, index, array) => array.indexOf(value) === index);

1. Let's examine how it works for each element:
   • 1: indexOf(1) = 0, current index = 0 (true, keep it)
   • First 2: indexOf(2) = 1, current index = 1 (true, keep it)
   • Second 2: indexOf(2) = 1, current index = 2 (false, filter it out)
   • First 3: indexOf(3) = 2, current index = 3 (false, filter it out)
   • And so on...

💡 Pro tip: While this method works, consider using Set for better performance with large arrays: [...new Set(numbers)]

Example 5 - Filter falsy values

1// Remove falsy values from an array
2const mixed = [0, 1, false, true, '', 'hello', null, undefined, NaN];
3
4const truthyOnly = mixed.filter(Boolean);
5console.log(truthyOnly); // [1, true, 'hello']

Let's break down this example:

1. We start with an array containing various types of values:

1const mixed = [0, 1, false, true, '', 'hello', null, undefined, NaN];

1. We use the Boolean function as our filter callback:

1const truthyOnly = mixed.filter(Boolean);

1. Let's see how each value is evaluated:
   • 0: false (excluded)
   • 1: true (included)
   • false: false (excluded)
   • true: true (included)
   • '': false (excluded)
   • 'hello': true (included)
   • null: false (excluded)
   • undefined: false (excluded)
   • NaN: false (excluded)

💡 Pro tip: This is a concise way to remove all falsy values, but be careful as it might remove legitimate zero values that you want to keep.

This example shows how to use filter to remove all falsy values from an array. The Boolean function is used as the callback, which automatically converts values to true or false.

Practice Questions

Below are some practice coding challenges to help you master the filter method in JavaScript.

Additional Resources

• MDN Web Docs - Array.prototype.filter()
• JavaScript.info - Array methods
• React Documentation - Lists and Keys (for seeing filter in action with React)

Common Interview Questions

1. What's the difference between filter and map?
2. How would you implement filter using reduce?
3. When would you use filter instead of a for loop?

Keep practicing with filter - it's one of the most commonly used array methods in JavaScript!

Read related articles

How to use split() in JavaScript

Understand how to use split() in JavaScript to break strings into arrays fo...

Logan Ford

•February 6, 2025•6 min read

What is array.at() in JavaScript?

Discover how array.at() makes working with arrays in JavaScript more intuit...

Logan Ford

•February 6, 2025•6 min read

What is length in JavaScript?

Learn how to effectively use JavaScript's length property to work with stri...

Logan Ford

•February 6, 2025•6 min read