← Async & Await (Under the Hood)Functional Programming Concepts →

Higher-Order Functions

Higher-order functions are functions that either take other functions as arguments, return functions as results, or both. They are a fundamental concept in functional programming.

🎯 What are Higher-Order Functions?

In JavaScript, functions are first-class citizens, meaning they can be:

Assigned to variables
Passed as arguments to other functions
Returned from other functions
Stored in data structures

Why Use Higher-Order Functions?

Abstraction - Hide implementation details
Reusability - Write more generic, reusable code
Composition - Build complex behavior from simple functions
Declarative code - Focus on "what" not "how"

📚 Common Built-in HOFs:

Array.map(), Array.filter(), Array.reduce(),
Array.forEach(), Array.sort(), Array.some(),
Array.every(), setTimeout(), addEventListener()

🔧 Examples

JavaScript Editor

// Common array methods that accept functions

let students = [
  { name: "Alice", grade: 85, age: 20 },
  { name: "Bob", grade: 92, age: 22 },
  { name: "Charlie", grade: 78, age: 19 },
  { name: "Diana", grade: 95, age: 21 }
];

// 1. map() - Transform each element
let studentNames = students.map(function(student) {
  return student.name;
});
console.log("Student names:", studentNames);

// With arrow function (shorter syntax)
let grades = students.map(student => student.grade);
console.log("Grades:", grades);

// 2. filter() - Select elements that match condition
let topStudents = students.filter(function(student) {
  return student.grade >= 90;
});
console.log("Top students:", topStudents);

// 3. reduce() - Accumulate values
let totalGrade = students.reduce(function(sum, student) {
  return sum + student.grade;
}, 0);
let averageGrade = totalGrade / students.length;
console.log("Average grade:", averageGrade);

// 4. forEach() - Execute function for each element
console.log("\nStudent details:");
students.forEach(function(student) {
  console.log(student.name + " - Grade: " + student.grade);
});

JavaScript Editor

// Creating our own higher-order functions

// Function that logs execution time
function withTimer(fn) {
  return function(...args) {
    console.time("Execution Time");
    const result = fn(...args);
    console.timeEnd("Execution Time");
    return result;
  };
}

// Function that retries on failure
function withRetry(fn, maxRetries = 3) {
  return async function(...args) {
    let lastError;
    
    for (let attempt = 1; attempt <= maxRetries; attempt++) {
      try {
        console.log(`Attempt ${attempt} of ${maxRetries}`);
        return await fn(...args);
      } catch (error) {
        lastError = error;
        console.log(`Attempt ${attempt} failed: ${error.message}`);
        
        if (attempt < maxRetries) {
          await new Promise(resolve => setTimeout(resolve, 1000)); // Wait 1 second
        }
      }
    }
    
    throw lastError;
  };
}

// Example usage
function calculateComplex(value) {
  // Simulating complex calculation
  return value * value + Math.sqrt(value);
}

let timedCalculate = withTimer(calculateComplex);
console.log("Result with timer:", timedCalculate(100));

// Mock async function that sometimes fails
async function mockApiCall() {
  const shouldFail = Math.random() > 0.5;
  if (shouldFail) {
    throw new Error("API call failed");
  }
  return "Success!";
}

let reliableApiCall = withRetry(mockApiCall, 3);

💪 Practice Exercise

JavaScript Editor

// Practice Exercise: Create a Higher-Order Function

// Task 1: Create a function "createValidator" that returns a validator function
// The validator should check if a value meets certain criteria

function createValidator(minValue, maxValue) {
  // Return a function that validates if a number is within range
  // Your code here
}

// Task 2: Create a function "transformArray" that applies multiple transformations
function transformArray(arr, ...transformers) {
  // Apply all transformer functions to the array
  // Your code here
}

// Task 3: Create a memoization higher-order function
function memoize(fn) {
  // Cache results of function calls
  // Your code here
}

// Example tests (uncomment to test)
// let validateAge = createValidator(18, 100);
// console.log(validateAge(25)); // true
// console.log(validateAge(15)); // false

// let numbers = [1, 2, 3, 4, 5];
// let addOne = x => x + 1;
// let square = x => x * x;
// let result = transformArray(numbers, addOne, square);
// console.log(result); // [4, 9, 16, 25, 36]

// Test your implementations above!

💡 Tips:

For Task 1, return a function that takes a value and checks if it's between min and max
For Task 2, use Array.reduce() to apply transformations sequentially
For Task 3, create a cache object and check it before calling the function

📖 Key Takeaways

Function Composition

Combine simple functions to build complex behavior

Code Reuse

Write generic functions that work with different behaviors

Abstraction

Hide implementation details behind function interfaces

← Async & Await (Under the Hood)Functional Programming Concepts →

Explore Related Tools

Hand-picked utilities and calculators related to this tool.

Related Tools

JavaScript Tutorial

Higher-Order Functions

🎯 What are Higher-Order Functions?

Why Use Higher-Order Functions?

📚 Common Built-in HOFs:

🔧 Examples

Example 1: Functions as Arguments

Example 2: Functions Returning Functions

Example 3: Array Higher-Order Functions

Example 4: Custom Higher-Order Functions

💪 Practice Exercise

💡 Tips:

📖 Key Takeaways

Function Composition

Code Reuse

Abstraction

Explore Related Tools

Advanced JavaScript Projects

JavaScript Advanced Tutorial

Advanced Array Methods

Async Javascript

JavaScript Design Patterns

Es Modules Advanced

Follow Us

Our Tools

Our Company

Special Tools