← Back to Concepts

Array Filter

Keep Even Numbers

The filter() method creates a new array containing only the elements that pass a test. The callback function runs for each element and must return true to keep the element or false to exclude it.
In this example, we create a new array called evens that contains only the even numbers from the original array. The callback function is arrow function with explicit return. 

const numbers = [8, 10, 5, 1, 7, 2];
const evens = numbers.filter((num) => {
  return num % 2 === 0;
});

Key Points:

  • filter() creates a new array — the original array stays unchanged
  • The callback must return true to keep an element, false to exclude it
  • The modulo operator % returns the remainder — if num % 2 === 0, the number is even
  • Arrow function with explicit return must have return keyword and curly braces

Filter Words by Length

We use filter() to keep only words that are longer than 3 characters. This is useful when you need to search or narrow down a list based on some criteria. 

const words = ["hi", "hello", "hey", "welcome"];
const longWords = words.filter((word) => {
  return word.length > 3;
});

Key Points:

  • You can access properties like .length inside the callback to make decisions
  • Comparison operators (>, <, >=, <=) return true or false
  • Filter is great for searching or narrowing down lists based on criteria

Filter Adults (Implicit Return)

We filter an array of person objects to find only adults (age 18 or older). This example uses implicit return — a shorter syntax where we skip the curly braces and return keyword. 

const people = [
  { name: "Alice", age: 17 },
  { name: "Bob", age: 21 },
  { name: "Charlie", age: 15 }
];
const adults = people.filter(person => person.age >= 18);

Key Points:

  • filter() works with arrays of objects, not just simple values
  • Use dot notation (e.g., person.age) to access object properties
  • Implicit return: skip curly braces and return keyword when the callback is a single expression

Remove Empty Values

Arrays sometimes contain empty or missing values like "" (empty string) or null. We can use filter() to clean up an array by removing these "falsy" values. 

const data = ["apple", "", "banana", null, "cherry"];
const cleaned = data.filter((item) => {
  return item;
});

Key Points:

  • Falsy values in JavaScript: "", null, undefined, 0, false, NaN
  • Truthy values: everything else (non-empty strings, non-zero numbers, objects, arrays)
  • This pattern is commonly used to clean up arrays with missing or empty data

Filter with Multiple Conditions

Sometimes you need to check multiple conditions at once. We use the && (AND) operator to require that all conditions must be true for an element to be kept. 

const products = [
  { name: "Laptop", price: 999, inStock: true },
  { name: "Phone", price: 699, inStock: false },
  { name: "Tablet", price: 299, inStock: true }
];
const deals = products.filter((product) => {
  return product.inStock && product.price < 500;
});

Key Points:

  • Use && (AND) to combine conditions — all must be true to keep the element
  • Use || (OR) when any one condition being true is enough
  • Real-world filtering often requires checking multiple properties at once