Filtering Arrays

The filter method creates a new array containing only the elements that pass a test. The callback function should return true to keep an element or false to exclude it.

Basic Usage

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evens = numbers.filter((n) => n % 2 === 0);
console.log(evens);  // [2, 4, 6, 8, 10]

const greaterThanFive = numbers.filter((n) => n > 5);
console.log(greaterThanFive);  // [6, 7, 8, 9, 10]

Filtering Objects

We often use filter to pick out the objects that match some condition:

const products = [
  { name: "Laptop", price: 999, inStock: true },
  { name: "Phone", price: 699, inStock: false },
  { name: "Tablet", price: 449, inStock: true },
  { name: "Watch", price: 299, inStock: true },
];

const available = products.filter((p) => p.inStock);
console.log(available);
// [
//   { name: 'Laptop', price: 999, inStock: true },
//   { name: 'Tablet', price: 449, inStock: true },
//   { name: 'Watch', price: 299, inStock: true }
// ]

const affordable = products.filter((p) => p.price < 500);
console.log(affordable);
// [
//   { name: 'Tablet', price: 449, inStock: true },
//   { name: 'Watch', price: 299, inStock: true }
// ]

Combining Multiple Conditions

You can combine conditions using logical operators:

const products = [
  { name: "Laptop", price: 999, inStock: true },
  { name: "Phone", price: 699, inStock: false },
  { name: "Tablet", price: 449, inStock: true },
  { name: "Watch", price: 299, inStock: true },
];

// Available AND affordable
const deals = products.filter((p) => p.inStock && p.price < 500);
console.log(deals);
// [
//   { name: 'Tablet', price: 449, inStock: true },
//   { name: 'Watch', price: 299, inStock: true }
// ]

Chaining filter and map

We often filter first and then transform what is left:

const users = [
  { name: "Alice", age: 28, active: true },
  { name: "Bob", age: 34, active: false },
  { name: "Charlie", age: 22, active: true },
];

const activeUserNames = users
  .filter((user) => user.active)
  .map((user) => user.name);

console.log(activeUserNames);  // ['Alice', 'Charlie']

Removing Falsy Values

We can also use filter to remove falsy values (null, undefined, empty strings, 0, false):

const values = [0, 1, "", "hello", null, undefined, false, true];

const truthy = values.filter(Boolean);
console.log(truthy);  // [1, 'hello', true]

This works because Boolean in JavaScript is also a function that converts any value to true or false. When you call Boolean(value), it returns true for truthy values and false for falsy ones. So values.filter(Boolean) is shorthand for values.filter((x) => Boolean(x)).

Note that this removes 0 as well, which may be surprising if 0 is a valid value in your data. If you only want to remove null and undefined, use .filter(x => x != null) instead.

Removing Duplicates (with Set)

This is not really what filter is for, but you can combine filter with indexOf to remove duplicates:

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

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

This relies on how indexOf works: it always returns the first index where a value appears. The callback receives both the current value (n) and its position (index). By comparing indexOf(n) to the current index, we can detect duplicates:

• If they are equal, this is the first occurrence of this value → keep it
• If they are different, we have seen this value before → filter it out

However, using Set is more idiomatic:

const unique = [...new Set(numbers)];
console.log(unique); // [1, 2, 3, 4]