DEV Community

Cover image for Understanding `filter()` as a Higher-Order Function in JavaScript
WebTechnology Tutorials
WebTechnology Tutorials

Posted on • Originally published at webcodingwithankur.blogspot.com

Understanding `filter()` as a Higher-Order Function in JavaScript

#javascript #webdev #beginners #functional

JavaScript treats functions as first-class citizens, allowing us to pass them around, return them, and even compose them. This flexibility gives birth to higher-order functions, a concept that powers much of modern JavaScript — especially array methods like filter().

🔍 What is a Higher-Order Function?

A higher-order function is one that either:

  • Accepts another function as an argument, or
  • Returns a function as its output. 
function greetUser(greetingFn) {
  greetingFn();
}

function sayHello() {
  console.log("Hello, Developer!");
}

greetUser(sayHello); // Output: Hello, Developer!
Enter fullscreen mode Exit fullscreen mode

Here, greetUser is a higher-order function because it takes a function as a parameter.

☕ Real-World Analogy: Filter Coffee
Imagine you’re brewing coffee through a filter. Only the finest particles pass through, giving you the perfect brew. Similarly, JavaScript’s filter() method passes only the elements that meet a condition — defined via a callback function.

💡 What is filter() in JavaScript?
The filter() method creates a new array with elements that pass a specific test (provided by a callback).
Syntax:

array.filter(callbackFunction(element, index, array), thisArg)
Enter fullscreen mode Exit fullscreen mode

🔧 Why is filter() a Higher-Order Function?
Because filter() accepts a callback function, it is by definition a higher-order function.

You define the logic; filter() applies it dynamically to each array element — making it modular, reusable, and clean.

✅ Practical Examples
1. Filter Even Numbers

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]
Enter fullscreen mode Exit fullscreen mode

2. Filter Adults from User List

const users = [
  { name: "Ankur", age: 28 },
  { name: "Rahul", age: 17 },
  { name: "Priya", age: 21 }
];

const adults = users.filter(user => user.age >= 18);
console.log(adults);
Enter fullscreen mode Exit fullscreen mode

3. Modular Filtering with Named Functions

function isAdult(user) {
  return user.age >= 18;
}

const adultUsers = users.filter(isAdult);
Enter fullscreen mode Exit fullscreen mode

🔄 Chaining with Other Array Methods
You can chain filter() with map() and reduce() for powerful data transformations:

const prices = [100, 200, 300, 400];

const discounted = prices
  .filter(price => price > 200)
  .map(price => price * 0.9);

console.log(discounted); // [270, 360]
Enter fullscreen mode Exit fullscreen mode

❓ Common Questions
Q: Does filter() mutate the original array?
A: No. filter() returns a new array.

Q: Can I filter based on multiple conditions?
A: Yes, just use logical operators in the callback:

const filtered = numbers.filter(num => num > 10 && num < 50);
Enter fullscreen mode Exit fullscreen mode

Q: Can I use filter() with objects?
A: Use Object.entries() + filter():

const obj = { a: 1, b: 2, c: 3 };
const filtered = Object.entries(obj)
  .filter(([key, value]) => value > 1);

console.log(Object.fromEntries(filtered)); // { b: 2, c: 3 }
Enter fullscreen mode Exit fullscreen mode

✅ Final Thoughts
Understanding filter() as a higher-order function is essential for writing clean, functional, and maintainable JavaScript. It’s not just about filtering — it’s about mastering function composition and code reusability.

🔗 Original Blog Link
📖 https://webcodingwithankur.blogspot.com/2025/07/javascript-filter-higher-order-function.html

Top comments (0)