Higher-Order Function Patterns

What Are Higher-Order Functions?

Higher-order functions are functions that can take other functions as arguments and/or return functions as results. This concept is central to functional programming in JavaScript.

In simpler terms, higher-order functions treat functions as first-class citizens — they can be passed around and manipulated just like any other value (numbers, strings, objects, etc.).

graph TD A[Higher-Order Functions] --> B[Taking functions as arguments] A --> C[Returning functions as results] A --> D[Both of the above] B --> B1[Array.map, Array.filter, etc.] C --> C1[Function factories] C --> C2[Currying] D --> D1[Composition] D --> D2[Advanced decorators] style A fill:#f5f5f5,stroke:#333 style B fill:#e3f2fd,stroke:#1976d2 style C fill:#e8f5e9,stroke:#388e3c style D fill:#fff3e0,stroke:#e65100

Think of higher-order functions as "function managers" - they don't necessarily do the work themselves, but they coordinate how other functions are used.

Basic Examples

// Example 1: Function taking another function as an argument
function applyOperation(x, y, operation) {
    return operation(x, y);
}

// Define some operations
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;

console.log(applyOperation(5, 3, add));      // 8
console.log(applyOperation(5, 3, subtract)); // 2
console.log(applyOperation(5, 3, multiply)); // 15

// Example 2: Function returning another function
function createMultiplier(factor) {
    // Return a new function that multiplies its argument by factor
    return function(number) {
        return number * factor;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);
const quadruple = createMultiplier(4);

console.log(double(5));    // 10
console.log(triple(5));    // 15
console.log(quadruple(5)); // 20

Built-in Higher-Order Functions

JavaScript's array methods are some of the most widely used higher-order functions. These methods take a function as an argument and apply it to each element in the array.

Core Array Methods

const numbers = [1, 2, 3, 4, 5];

// map: Transform each element and return a new array
const squared = numbers.map(x => x * x);
console.log(squared); // [1, 4, 9, 16, 25]

// filter: Select elements that match a condition
const evens = numbers.filter(x => x % 2 === 0);
console.log(evens); // [2, 4]

// reduce: Accumulate values into a single result
const sum = numbers.reduce((acc, val) => acc + val, 0);
console.log(sum); // 15

// forEach: Execute a function for each element (no return value)
numbers.forEach(x => console.log(`Number: ${x}`));
// Number: 1
// Number: 2
// etc.

// find: Get the first element that satisfies a condition
const firstEven = numbers.find(x => x % 2 === 0);
console.log(firstEven); // 2

// some: Check if at least one element satisfies a condition
const hasEven = numbers.some(x => x % 2 === 0);
console.log(hasEven); // true

// every: Check if all elements satisfy a condition
const allPositive = numbers.every(x => x > 0);
console.log(allPositive); // true

These built-in methods demonstrate the power of higher-order functions to make code more concise, readable, and expressive. They abstract away the imperative details of iteration, allowing you to focus on what you want to do with the data.

Real-World Example: Data Processing

// A collection of user objects
const users = [
    { id: 1, name: 'Alice', age: 28, active: true, roles: ['user', 'admin'] },
    { id: 2, name: 'Bob', age: 35, active: false, roles: ['user'] },
    { id: 3, name: 'Charlie', age: 24, active: true, roles: ['user'] },
    { id: 4, name: 'Diana', age: 42, active: true, roles: ['user', 'moderator'] },
    { id: 5, name: 'Eve', age: 31, active: false, roles: ['user'] }
];

// Get names of active admin users over 25
const activeAdmins = users
    .filter(user => user.active)
    .filter(user => user.age > 25)
    .filter(user => user.roles.includes('admin'))
    .map(user => user.name);

console.log(activeAdmins); // ['Alice']

// Count users by active status
const countByStatus = users.reduce((counts, user) => {
    const status = user.active ? 'active' : 'inactive';
    counts[status] = (counts[status] || 0) + 1;
    return counts;
}, {});

console.log(countByStatus); // { active: 3, inactive: 2 }

// Group users by age range
const usersByAgeGroup = users.reduce((groups, user) => {
    const ageGroup = user.age < 30 ? 'under30' : user.age < 40 ? 'under40' : 'over40';
    if (!groups[ageGroup]) {
        groups[ageGroup] = [];
    }
    groups[ageGroup].push(user);
    return groups;
}, {});

console.log(usersByAgeGroup);
// {
//   under30: [{ id: 1, name: 'Alice', ... }, { id: 3, name: 'Charlie', ... }],
//   under40: [{ id: 2, name: 'Bob', ... }, { id: 5, name: 'Eve', ... }],
//   over40: [{ id: 4, name: 'Diana', ... }]
// }

Common Higher-Order Function Patterns

1. Function Composition

Function composition is a technique for combining multiple functions into a new function. The result of each function becomes the input to the next function.

// Implementing compose
function compose(...functions) {
    return function(x) {
        return functions.reduceRight((value, func) => func(value), x);
    };
}

// Some simple functions
const double = x => x * 2;
const increment = x => x + 1;
const square = x => x * x;

// Create a composed function
const doubleIncrementSquare = compose(square, increment, double);

// Use it
console.log(doubleIncrementSquare(3)); // 49
// Explanation: ((3 * 2) + 1)² = (6 + 1)² = 7² = 49

// Pipe is like compose but applies functions from left to right
function pipe(...functions) {
    return function(x) {
        return functions.reduce((value, func) => func(value), x);
    };
}

// Create a piped function
const doubleThenIncrementThenSquare = pipe(double, increment, square);

// Use it
console.log(doubleThenIncrementThenSquare(3)); // 49
// Explanation: square(increment(double(3))) = square(increment(6)) = square(7) = 49

2. Currying

Currying is the process of transforming a function that takes multiple arguments into a series of functions that each take a single argument.

// Implementing a curry function
function curry(fn) {
    return function curried(...args) {
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        } else {
            return function(...moreArgs) {
                return curried.apply(this, args.concat(moreArgs));
            };
        }
    };
}

// A regular function taking multiple arguments
function add(a, b, c) {
    return a + b + c;
}

// Curry it
const curriedAdd = curry(add);

// Different ways to call it
console.log(curriedAdd(1, 2, 3));   // 6
console.log(curriedAdd(1)(2, 3));   // 6
console.log(curriedAdd(1, 2)(3));   // 6
console.log(curriedAdd(1)(2)(3));   // 6

// Practical example: Filtering with different criteria
const filter = curry(function(predicate, array) {
    return array.filter(predicate);
});

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const isEven = x => x % 2 === 0;
const isOdd = x => x % 2 !== 0;
const isGreaterThan5 = x => x > 5;

// Create specialized filter functions
const filterEven = filter(isEven);
const filterOdd = filter(isOdd);
const filterGreaterThan5 = filter(isGreaterThan5);

// Use them with different arrays
console.log(filterEven(numbers));        // [2, 4, 6, 8, 10]
console.log(filterOdd(numbers));         // [1, 3, 5, 7, 9]
console.log(filterGreaterThan5(numbers)); // [6, 7, 8, 9, 10]

// We can also apply the curried function directly
console.log(filter(x => x % 3 === 0)(numbers)); // [3, 6, 9]

3. Partial Application

Partial application is a technique where you fix some arguments of a function, creating a new function with fewer parameters.

// Implementing partial application
function partial(fn, ...partialArgs) {
    return function(...args) {
        return fn(...partialArgs, ...args);
    };
}

// A regular function
function greet(greeting, name) {
    return `${greeting}, ${name}!`;
}

// Partially apply it with different first arguments
const sayHello = partial(greet, "Hello");
const sayHi = partial(greet, "Hi");
const sayGoodMorning = partial(greet, "Good morning");

// Use the specialized functions
console.log(sayHello("Alice"));       // "Hello, Alice!"
console.log(sayHi("Bob"));           // "Hi, Bob!"
console.log(sayGoodMorning("Charlie")); // "Good morning, Charlie!"

// Practical example: Configurable formatter
function formatNumber(format, number) {
    switch (format) {
        case 'currency':
            return `$${number.toFixed(2)}`;
        case 'percent':
            return `${(number * 100).toFixed(1)}%`;
        case 'fixed':
            return number.toFixed(2);
        default:
            return number.toString();
    }
}

const toCurrency = partial(formatNumber, 'currency');
const toPercent = partial(formatNumber, 'percent');
const toFixed = partial(formatNumber, 'fixed');

console.log(toCurrency(123.456)); // "$123.46"
console.log(toPercent(0.7835));   // "78.4%"
console.log(toFixed(9.999));      // "10.00"

4. Function Decorators

A decorator is a higher-order function that takes a function and returns a new function with enhanced behavior, while preserving the original function's core purpose.

// Implementing a simple logging decorator
function withLogging(fn) {
    return function(...args) {
        console.log(`Calling ${fn.name} with arguments: ${args}`);
        const result = fn(...args);
        console.log(`Call to ${fn.name} returned: ${result}`);
        return result;
    };
}

// A simple function to decorate
function add(a, b) {
    return a + b;
}

// Create a decorated version of the function
const loggingAdd = withLogging(add);

// Use it
console.log(loggingAdd(2, 3));
// Calling add with arguments: 2,3
// Call to add returned: 5
// 5

// More useful decorator: timing
function withTiming(fn) {
    return function(...args) {
        const start = performance.now();
        const result = fn(...args);
        const end = performance.now();
        console.log(`${fn.name} took ${end - start} ms to execute`);
        return result;
    };
}

// A function that might take time
function expensiveOperation(n) {
    let result = 0;
    for (let i = 0; i < n; i++) {
        result += Math.sin(i);
    }
    return result;
}

// Create a timed version
const timedOperation = withTiming(expensiveOperation);

// Use it
timedOperation(1000000);
// expensiveOperation took 15.2 ms to execute

5. Memoization

Memoization is a technique used to speed up function calls by caching the results of expensive function calls.

// Implementing a memoize decorator
function memoize(fn) {
    const cache = new Map();
    
    return function(...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            console.log(`Cache hit for ${key}`);
            return cache.get(key);
        }
        
        console.log(`Computing result for ${key}`);
        const result = fn(...args);
        cache.set(key, result);
        return result;
    };
}

// A recursive function that would benefit from memoization
function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

// Without memoization, this would be very slow for large n
// fibonacci(40) would make over a billion recursive calls

// Create a memoized version
const memoizedFibonacci = memoize(function fib(n) {
    if (n <= 1) return n;
    return memoizedFibonacci(n - 1) + memoizedFibonacci(n - 2);
});

// Use it
console.log(memoizedFibonacci(40)); // Fast computation
// Computing result for [40]
// Computing result for [39]
// Computing result for [38]
// ... (many more)
// Cache hit for [2]
// Cache hit for [1]
// Cache hit for [0]
// 102334155

Advanced Higher-Order Function Patterns

1. The Command Pattern

The command pattern encapsulates actions as objects, allowing for parameterization, queueing, logging, and undoing of operations.

// Implementing a simple command system
function createCommandSystem() {
    const history = [];
    const undone = [];
    
    return {
        execute(command) {
            const result = command.execute();
            history.push(command);
            
            // Clear the redo stack
            undone.length = 0;
            
            return result;
        },
        
        undo() {
            if (history.length === 0) {
                return "Nothing to undo";
            }
            
            const command = history.pop();
            const result = command.undo();
            undone.push(command);
            
            return result;
        },
        
        redo() {
            if (undone.length === 0) {
                return "Nothing to redo";
            }
            
            const command = undone.pop();
            const result = command.execute();
            history.push(command);
            
            return result;
        }
    };
}

// Example: Text editing commands
function createTextEditor() {
    let text = "";
    const commandSystem = createCommandSystem();
    
    // Command to add text
    function createAddTextCommand(textToAdd) {
        return {
            execute() {
                const oldText = text;
                text += textToAdd;
                return `Added: "${textToAdd}"`;
            },
            undo() {
                text = text.slice(0, -textToAdd.length);
                return `Removed: "${textToAdd}"`;
            }
        };
    }
    
    // Command to clear text
    function createClearCommand() {
        return {
            execute() {
                const oldText = text;
                text = "";
                this.oldText = oldText; // Store for undo
                return "Cleared text";
            },
            undo() {
                text = this.oldText;
                return `Restored: "${this.oldText}"`;
            }
        };
    }
    
    return {
        addText(textToAdd) {
            return commandSystem.execute(createAddTextCommand(textToAdd));
        },
        
        clear() {
            return commandSystem.execute(createClearCommand());
        },
        
        undo() {
            return commandSystem.undo();
        },
        
        redo() {
            return commandSystem.redo();
        },
        
        getText() {
            return text;
        }
    };
}

// Using the text editor
const editor = createTextEditor();

console.log(editor.addText("Hello"));          // Added: "Hello"
console.log(editor.addText(" world!"));        // Added: " world!"
console.log(editor.getText());                 // Hello world!
console.log(editor.undo());                    // Removed: " world!"
console.log(editor.getText());                 // Hello
console.log(editor.redo());                    // Added: " world!"
console.log(editor.getText());                 // Hello world!
console.log(editor.clear());                   // Cleared text
console.log(editor.getText());                 // ""
console.log(editor.undo());                    // Restored: "Hello world!"
console.log(editor.getText());                 // Hello world!

2. The Observer Pattern

The observer pattern creates a subscription system where multiple observers are notified of state changes in the subject.

// Implementing an event emitter
function createEventEmitter() {
    const events = {};
    
    return {
        on(event, listener) {
            if (!events[event]) {
                events[event] = [];
            }
            
            events[event].push(listener);
            return this;
        },
        
        off(event, listener) {
            if (!events[event]) return this;
            
            events[event] = events[event].filter(l => l !== listener);
            return this;
        },
        
        emit(event, ...args) {
            if (!events[event]) return false;
            
            events[event].forEach(listener => {
                listener(...args);
            });
            
            return true;
        },
        
        once(event, listener) {
            const onceWrapper = (...args) => {
                listener(...args);
                this.off(event, onceWrapper);
            };
            
            return this.on(event, onceWrapper);
        }
    };
}

// Example: Weather station
function createWeatherStation() {
    const emitter = createEventEmitter();
    let temperature = 0;
    let humidity = 0;
    
    return {
        setMeasurements(newTemperature, newHumidity) {
            let hasChanged = false;
            
            if (temperature !== newTemperature) {
                temperature = newTemperature;
                emitter.emit('temperatureChange', temperature);
                hasChanged = true;
            }
            
            if (humidity !== newHumidity) {
                humidity = newHumidity;
                emitter.emit('humidityChange', humidity);
                hasChanged = true;
            }
            
            if (hasChanged) {
                emitter.emit('measurementsChanged', temperature, humidity);
            }
            
            return this;
        },
        
        on: emitter.on.bind(emitter),
        off: emitter.off.bind(emitter),
        once: emitter.once.bind(emitter)
    };
}

// Create display modules that observe the weather station
function createTemperatureDisplay(name) {
    return {
        update(temperature) {
            console.log(`${name} Temperature Display: ${temperature}°C`);
        }
    };
}

function createHumidityDisplay(name) {
    return {
        update(humidity) {
            console.log(`${name} Humidity Display: ${humidity}%`);
        }
    };
}

function createWeatherStatistics() {
    let minTemp = Infinity;
    let maxTemp = -Infinity;
    let tempSum = 0;
    let tempCount = 0;
    
    return {
        updateTemperature(temperature) {
            minTemp = Math.min(minTemp, temperature);
            maxTemp = Math.max(maxTemp, temperature);
            tempSum += temperature;
            tempCount++;
            
            console.log("Weather Statistics:");
            console.log(`- Min Temperature: ${minTemp}°C`);
            console.log(`- Max Temperature: ${maxTemp}°C`);
            console.log(`- Average Temperature: ${(tempSum / tempCount).toFixed(1)}°C`);
        }
    };
}

// Using the weather station and displays
const weatherStation = createWeatherStation();
const mainDisplay = createTemperatureDisplay("Main");
const remoteDisplay = createTemperatureDisplay("Remote");
const statistics = createWeatherStatistics();

// Register observers
weatherStation.on('temperatureChange', temperature => {
    mainDisplay.update(temperature);
    remoteDisplay.update(temperature);
    statistics.updateTemperature(temperature);
});

weatherStation.on('humidityChange', humidity => {
    createHumidityDisplay("Main").update(humidity);
});

// Set measurements
weatherStation.setMeasurements(25, 60);
// Main Temperature Display: 25°C
// Remote Temperature Display: 25°C
// Weather Statistics:
// - Min Temperature: 25°C
// - Max Temperature: 25°C
// - Average Temperature: 25.0°C
// Main Humidity Display: 60%

weatherStation.setMeasurements(26, 65);
// Main Temperature Display: 26°C
// Remote Temperature Display: 26°C
// Weather Statistics:
// - Min Temperature: 25°C
// - Max Temperature: 26°C
// - Average Temperature: 25.5°C
// Main Humidity Display: 65%

3. The Pipeline Pattern

The pipeline pattern processes data through a series of transformations, with each stage's output becoming the input to the next stage.

// Implementing a data processing pipeline
function createPipeline(...processors) {
    return {
        process(data) {
            return processors.reduce((result, processor) => processor(result), data);
        }
    };
}

// Example: Text processing pipeline
// Processors: Functions that transform data
const removeWhitespace = text => text.replace(/\s+/g, ' ').trim();
const lowercase = text => text.toLowerCase();
const removeSpecialChars = text => text.replace(/[^\w\s]/g, '');
const tokenize = text => text.split(' ').filter(token => token.length > 0);
const removeStopWords = tokens => {
    const stopWords = new Set(['the', 'a', 'an', 'and', 'or', 'but', 'in', 'on', 'at', 'with', 'to', 'for']);
    return tokens.filter(token => !stopWords.has(token));
};
const stemWords = tokens => {
    // Simple stemming (just an example, not a real stemmer)
    return tokens.map(token => {
        if (token.endsWith('ing')) return token.slice(0, -3);
        if (token.endsWith('ed')) return token.slice(0, -2);
        if (token.endsWith('s') && token.length > 2) return token.slice(0, -1);
        return token;
    });
};

// Create a text processing pipeline
const textProcessor = createPipeline(
    removeWhitespace,
    lowercase,
    removeSpecialChars,
    tokenize,
    removeStopWords,
    stemWords
);

// Process some text
const text = "The quick brown fox jumps over the lazy dog. It's amazing!";
const processed = textProcessor.process(text);
console.log(processed);
// ['quick', 'brown', 'fox', 'jump', 'over', 'lazy', 'dog', 'it', 'amaz']

Real-World Applications

1. React Hooks

// Custom hook example - useFetch
function useFetch(url, options = {}) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    
    useEffect(() => {
        let isMounted = true;
        setLoading(true);
        
        fetch(url, options)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error: ${response.status}`);
                }
                return response.json();
            })
            .then(json => {
                if (isMounted) {
                    setData(json);
                    setLoading(false);
                }
            })
            .catch(err => {
                if (isMounted) {
                    setError(err.message);
                    setLoading(false);
                }
            });
            
        return () => {
            isMounted = false;
        };
    }, [url, options]);
    
    return { data, loading, error };
}

// Usage in a component
function UserProfile({ userId }) {
    const { data, loading, error } = useFetch(`https://api.example.com/users/${userId}`);
    
    if (loading) return `<div>Loading...</div>`;
    if (error) return `<div>Error: {error}</div>`;
    
    return (
        `<div>
            <h1>{data.name}</h1>
            <p>Email: {data.email}</p>
            <p>Role: {data.role}</p>
        </div>`
    );
}

2. Redux Middleware

// Simple logger middleware for Redux
const logger = store => next => action => {
    console.log('Dispatching:', action);
    const result = next(action);
    console.log('Next state:', store.getState());
    return result;
};

// Thunk middleware for async actions
const thunk = store => next => action => {
    if (typeof action === 'function') {
        return action(store.dispatch, store.getState);
    }
    
    return next(action);
};

// Usage example
// In a Redux setup:
// const store = createStore(
//     rootReducer,
//     applyMiddleware(thunk, logger)
// );

// Now you can dispatch both normal actions and thunks
// store.dispatch({ type: 'INCREMENT' });
// store.dispatch(function fetchUserThunk(dispatch, getState) {
//     dispatch({ type: 'FETCH_USER_REQUEST' });
//     
//     return fetch('/api/user')
//         .then(response => response.json())
//         .then(user => dispatch({ type: 'FETCH_USER_SUCCESS', payload: user }))
//         .catch(error => dispatch({ type: 'FETCH_USER_FAILURE', error }));
// });

3. Error Handling with Try/Catch Decorators

// Error handling decorator
function withErrorHandling(fn, errorHandler) {
    return function(...args) {
        try {
            return fn(...args);
        } catch (error) {
            return errorHandler(error, ...args);
        }
    };
}

// Function that might throw an error
function fetchUserData(userId) {
    if (!userId) {
        throw new Error("User ID is required");
    }
    
    // Simulate an API call
    if (userId === "invalid") {
        throw new Error("User not found");
    }
    
    return {
        id: userId,
        name: "John Doe",
        email: "john@example.com"
    };
}

// Error handler function
function handleFetchError(error, userId) {
    console.error(`Error fetching user ${userId}:`, error.message);
    return { error: error.message, id: userId };
}

// Create a safe version of the function
const safeFetchUserData = withErrorHandling(fetchUserData, handleFetchError);

// Use it
console.log(safeFetchUserData("123"));
// { id: "123", name: "John Doe", email: "john@example.com" }

console.log(safeFetchUserData()); 
// Error fetching user undefined: User ID is required
// { error: "User ID is required", id: undefined }

console.log(safeFetchUserData("invalid"));
// Error fetching user invalid: User not found
// { error: "User not found", id: "invalid" }

Testing Higher-Order Functions

Testing higher-order functions requires a different approach than testing regular functions:

// Function to test: a memoize decorator
function memoize(fn) {
    const cache = new Map();
    
    return function(...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            return cache.get(key);
        }
        
        const result = fn(...args);
        cache.set(key, result);
        return result;
    };
}

// Testing approach (using Jest-like syntax for clarity)
describe('memoize', () => {
    // Test 1: The memoized function returns correct results
    test('should return correct results', () => {
        // Create a spy/mock function
        const originalFn = jest.fn((a, b) => a + b);
        const memoizedFn = memoize(originalFn);
        
        // First call: should compute result
        expect(memoizedFn(2, 3)).toBe(5);
        expect(originalFn).toHaveBeenCalledTimes(1);
        
        // Second call with same args: should use cache
        expect(memoizedFn(2, 3)).toBe(5);
        expect(originalFn).toHaveBeenCalledTimes(1); // Still 1
        
        // Call with different args: should compute new result
        expect(memoizedFn(3, 4)).toBe(7);
        expect(originalFn).toHaveBeenCalledTimes(2);
        
        // Verify all calls
        expect(originalFn.mock.calls).toEqual([[2, 3], [3, 4]]);
    });
});

When testing higher-order functions, it's important to test both the behavior of the higher-order function itself and the behavior of the functions it creates or enhances.

Performance Considerations

When working with higher-order functions, keep in mind:

Function creation overhead: Creating new functions repeatedly can impact performance
Closure size: Large closures can consume more memory
Stack depth: Deep function composition or recursion can lead to stack overflow
Debugging complexity: Higher-order functions can make stack traces harder to read

// Memory leak example
function leakyFunction() {
    const largeData = new Array(1000000).fill('some data');
    
    return function useData(index) {
        return largeData[index];
    };
}

// Each call to leakyFunction creates a new closure 
// that holds a reference to largeData
const dataAccessor1 = leakyFunction(); // Holds 1M item array in memory
const dataAccessor2 = leakyFunction(); // Holds another 1M item array

// Better approach
const betterFunction = (function() {
    const largeData = new Array(1000000).fill('some data');
    
    return function createAccessor() {
        return function useData(index) {
            return largeData[index];
        };
    };
})();

// Now both functions share the same largeData reference
const betterAccessor1 = betterFunction();
const betterAccessor2 = betterFunction();

Practice Activities

Activity 1: Create Your Own Utility Library

Build a utility library with higher-order functions like compose, curry, and partial application. Use these to create specialized functions for string and array manipulation.

Activity 2: Implement a Custom Map/Reduce Framework

Develop a simplified version of a MapReduce framework that can process large amounts of data using mapper and reducer functions.

Activity 3: Design a Middleware System

Create a middleware system similar to Express.js middleware that can process requests through a series of functions, each able to modify the request, response, or control flow.

Summary

In this lecture, we've explored:

What higher-order functions are and their fundamental role in JavaScript
Built-in higher-order functions like map, filter, and reduce
Common patterns including function composition, currying, and partial application
Function decorators and how they enhance existing functions
Advanced patterns like commands, observers, and pipelines
Real-world applications in frameworks and libraries
Testing strategies and performance considerations

Higher-order functions are a cornerstone of functional programming in JavaScript. They allow you to write more declarative, reusable, and composable code. By mastering these patterns, you'll be able to create more elegant and maintainable applications, and better understand many modern JavaScript libraries and frameworks that use these techniques extensively.