Higher-order functions are a fundamental concept in both JavaScript (JS) and TypeScript (TS). A higher-order function is a function that takes one or more functions as arguments or returns a function as its result. These functions enable more flexible and expressive code by allowing you to treat functions as first-class citizens.

Here’s an explanation of higher-order functions with suitable examples in both JS and TS:

Higher-Order Functions in JavaScript:

In JavaScript, functions are first-class citizens, which means they can be treated like any other data type, such as numbers or strings. Higher-order functions leverage this feature by either accepting functions as arguments or returning functions.

Example 1: Functions as Arguments

// Higher-order function that takes a function as an argument
function operateOnNumbers(x, y, operation) {
    return operation(x, y);
}

function add(x, y) {
    return x + y;
}

function multiply(x, y) {
    return x * y;
}

console.log(operateOnNumbers(5, 3, add));       // Output: 8
console.log(operateOnNumbers(5, 3, multiply));  // Output: 15

In this example, operateOnNumbers is a higher-order function that accepts two numbers and a binary operation function as arguments. Depending on the operation function passed, it performs addition or multiplication.

Example 2: Functions as Return Values

// Higher-order function that returns a function
function greetingGenerator(greeting) {
    return function (name) {
        return `${greeting}, ${name}!`;
    };
}

const greetHello = greetingGenerator("Hello");
const greetHi = greetingGenerator("Hi");

console.log(greetHello("Alice"));  // Output: Hello, Alice!
console.log(greetHi("Bob"));       // Output: Hi, Bob!

In this example, greetingGenerator is a higher-order function that returns a function. Depending on the greeting passed, it generates a personalized greeting function.

Higher-Order Functions in TypeScript:

TypeScript builds upon JavaScript’s capabilities and allows you to define types for functions and function parameters, making it easier to work with higher-order functions.

Example: Using TypeScript for Type Safety

// Higher-order function with type annotations
function operateOnNumbers(x: number, y: number, operation: (a: number, b: number) => number): number {
    return operation(x, y);
}

function add(x: number, y: number): number {
    return x + y;
}

function multiply(x: number, y: number): number {
    return x * y;
}

console.log(operateOnNumbers(5, 3, add));       // Output: 8
console.log(operateOnNumbers(5, 3, multiply));  // Output: 15

In TypeScript, you can specify the types of function parameters and return values. This provides type safety and code documentation.

Higher-order functions are incredibly useful in functional programming and enable you to write more modular, reusable, and expressive code. They are commonly used with array methods like map, filter, and reduce, as well as in libraries and frameworks that leverage callbacks, promises, and event handling.