Array Methods

JavaScript filter() Method

Filter array elements based on conditions and create a new array containing only the elements that meet your criteria.

What is filter()?

The filter() method creates a new array containing only the elements that pass a test provided by a function. It returns elements for which the callback returns true.

filter() Method Example

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

Using filter() to create a new array with only even numbers

Run Code

Syntax

filter() Syntax

array.filter((element, index, array) => {
  // Return true to keep element, false to remove
  return condition;
});

The syntax for the filter() method with callback function

Run Code

Practical Examples

Filter by Number Range

const scores = [45, 78, 92, 34, 88, 56, 100];
const passed = scores.filter(score => score >= 60);
console.log(passed); // [78, 92, 88, 100]

Filtering scores to show only those above 60

Run Code

Filter Objects in Array

const users = [
  { name: 'Alice', active: true },
  { name: 'Bob', active: false },
  { name: 'Charlie', active: true }
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers); 
// [{name: 'Alice', active: true}, {name: 'Charlie', active: true}]

Filtering an array of objects to get only active users

Run Code

Remove Duplicates

const numbers = [1, 2, 2, 3, 3, 3, 4];
const unique = numbers.filter((num, index, arr) => 
  arr.indexOf(num) === index
);
console.log(unique); // [1, 2, 3, 4]

Using filter() to remove duplicate values from an array

Run Code

Chaining filter with map()

const products = [
  { name: 'Laptop', price: 1000, inStock: true },
  { name: 'Mouse', price: 25, inStock: false },
  { name: 'Keyboard', price: 75, inStock: true }
];

const result = products
  .filter(p => p.inStock)
  .map(p => `${p.name}: $${p.price}`);
console.log(result); // ['Laptop: $1000', 'Keyboard: $75']

Chaining filter() and map() methods together

Run Code

Common Mistakes

❌ Using ! (not) Instead of Returning Boolean

Using ! (not) Instead of Returning Boolean

// Wrong - modifying the condition
const numbers = [1, 2, 3, 4, 5];
const odd = numbers.filter(n => !n % 2); // Don't do this!

// Correct
const odd = numbers.filter(n => n % 2 !== 0);

Incorrect use of logical NOT operator in filter condition

Run Code

❌ Forgetting to Return a Value

Forgetting to Return a Value

const numbers = [1, 2, 3, 4];
const result = numbers.filter(n => {
  n > 2; // No return!
});
console.log(result); // [] - nothing returned

// Correct
const result = numbers.filter(n => n > 2);

Forgetting to return a value from the filter callback function

Run Code

FAQs

Does filter() modify the original array?

No, filter() creates a new array and leaves the original unchanged.

When would the result be empty?

Empty Result Array

const numbers = [1, 2, 3];
const result = numbers.filter(n => n > 10);
console.log(result); // [] - no elements match the condition

When filter() returns an empty array because no elements match

Run Code

← Back to Arrays Overview