What is a Higher-Order Function (HOF)?
A higher-order function is a function that:
Takes one or more functions as arguments.
Returns a function as its result.
This concept allows us to write modular and reusable code.
Examples include map(),filter(), and reduce().
Example 1: Basic Higher-Order Function
function callbackFunction() {
console.log('I am a callback function');
}
function higherOrderFunction(func) {
console.log('I am a higher-order function');
func();
}
higherOrderFunction(callbackFunction);
Output:
Here, higherOrderFunction() is a HOF because it accepts callbackFunction() as an argument.
Benefits of Higher-Order Functions
HOFs make code:
Concise: Avoid repetitive logic.
Reusable: Write logic once, use it multiple times.
Modular: Keep different functionalities separate.
Example 2: Using HOFs to Avoid Repetition
Without HOFs.
const radius = [1, 2, 3];
function calculateArea(radius) {
return radius.map(r => Math.PI * r * r);
}
function calculateDiameter(radius) {
return radius.map(r => 2 * r);
}
console.log(calculateArea(radius));
console.log(calculateDiameter(radius));
Output:
With HOFs:
const radius = [1, 2, 3];
const area = r => Math.PI * r * r;
const diameter = r => 2 * r;
function calculate(radius, logic) {
return radius.map(logic);
}
console.log(calculate(radius, area));
console.log(calculate(radius, diameter));
Output:
Using a HOF (calculate()), we’ve generalized the computation. Adding new operations, like circumference, becomes straightforward.
Key Built-In Higher-Order Functions
1.map()
Transforms elements of an array based on a callback function.
Example 1: Adding 10 to each element.
const arr = [1, 2, 3, 4];
const output = arr.map(num => num + 10);
console.log(output); // [11, 12, 13, 14]
Example 2: Extracting user names
const users = [
{ firstName: 'John', lastName: 'Doe' },
{ firstName: 'Jane', lastName: 'Doe' }
];
const names = users.map(user => `${user.firstName} ${user.lastName}`);
console.log(names); // ['John Doe', 'Jane Doe']
2. filter()
Filters elements of an array based on a condition.
Example 1: Filtering odd numbers.
const arr = [1, 2, 3, 4];
const oddNumbers = arr.filter(num => num % 2 !== 0);
console.log(oddNumbers); // [1, 3]
Example 2: Users older than 30
const users = [
{ firstName: 'John', age: 25 },
{ firstName: 'Jane', age: 35 }
];
const adults = users.filter(user => user.age > 30);
console.log(adults); // [{ firstName: 'Jane', age: 35 }]
3. reduce()
Reduces an array to a single value using a callback function.
Example 1: Summing numbers.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10
Example 2: Finding the maximum value
const numbers = [1, 20, 3, 4];
const max = numbers.reduce((max, curr) => (curr > max ? curr : max));
console.log(max); // 20
Example 3: Merging objects
const objArray = [{ a: 1 }, { b: 2 }, { c: 3 }];
const merged = objArray.reduce((acc, obj) => ({ ...acc, ...obj }), {});
console.log(merged); // { a: 1, b: 2, c: 3 }
Use Cases.
- Data Transformation: Use map() for transforming data.
- Filtering Data: Use filter() for conditional selection.
- Aggregations: Use reduce() for operations like summing, grouping, or merging data.
Top comments (0)