← 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 →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Higher-Order Functions

🎯 What are Higher-Order Functions?

Why Use Higher-Order Functions?

📚 Common Built-in HOFs:

🔧 Examples

💪 Practice Exercise

💡 Tips:

📖 Key Takeaways

Function Composition

Code Reuse

Abstraction

Follow Us

Our Tools

Our Company

Special 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

Follow Us

Our Tools

Our Company

Special Tools