Learnitweb

What is a higher order function?

A higher-order function in JavaScript is a function that either:

  • Takes another function as an argument, or
  • Returns a function as its result, or both.

Higher-order functions are a core concept in functional programming and are widely used in JavaScript for tasks like iteration, transformations, and handling asynchronous operations.

Characteristics of Higher-Order Functions

  • Accept Functions as Parameters:
    • A higher-order function can take one or more functions as arguments to process logic dynamically.
  • Return Functions:
    • A higher-order function can return another function, allowing dynamic creation of functions during runtime.
  • Enables Abstraction:
    • Higher-order functions abstract operations on data or behavior, making code reusable and modular.

Examples of Higher-Order Functions

Taking Functions as Arguments

The classic example is the array methods like map, filter, and reduce:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const numbers = [1, 2, 3, 4];
// map takes a function as an argument
const squares = numbers.map((num) => num * num);
console.log(squares); // Output: [1, 4, 9, 16]
const numbers = [1, 2, 3, 4]; // map takes a function as an argument const squares = numbers.map((num) => num * num); console.log(squares); // Output: [1, 4, 9, 16]
const numbers = [1, 2, 3, 4];

// map takes a function as an argument
const squares = numbers.map((num) => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

map is a higher-order function because it takes a callback function (num => num * num) as an argument.

Returning a Function

Higher-order functions can return other functions:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function multiplier(factor) {
return function(number) {
return number * factor;
};
}
const double = multiplier(2);
console.log(double(5)); // Output: 10
function multiplier(factor) { return function(number) { return number * factor; }; } const double = multiplier(2); console.log(double(5)); // Output: 10
function multiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = multiplier(2);
console.log(double(5)); // Output: 10

multiplier is a higher-order function because it returns a new function.

Combining Both

A function that takes a function as an argument and returns another function:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function createGreeter(greeting) {
return function(name) {
return `${greeting}, ${name}!`;
};
}
const sayHello = createGreeter('Hello');
console.log(sayHello('Alice')); // Output: Hello, Alice!
function createGreeter(greeting) { return function(name) { return `${greeting}, ${name}!`; }; } const sayHello = createGreeter('Hello'); console.log(sayHello('Alice')); // Output: Hello, Alice!
function createGreeter(greeting) {
    return function(name) {
        return `${greeting}, ${name}!`;
    };
}

const sayHello = createGreeter('Hello');
console.log(sayHello('Alice')); // Output: Hello, Alice!

Built-in Higher-Order Functions in JavaScript

  • Array.map: Transforms each element in an array.
  • Array.filter: Filters elements based on a condition.
  • Array.reduce: Reduces an array to a single value.
  • setTimeout and setInterval: Take callback functions to execute after a delay.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
setTimeout(() => {
console.log('This runs after 1 second');
}, 1000);
setTimeout(() => { console.log('This runs after 1 second'); }, 1000);
setTimeout(() => {
    console.log('This runs after 1 second');
}, 1000);

Why Use Higher-Order Functions?

  • Reusability: Encapsulate common behaviors and reuse them with different logic.
  • Readability: Abstract logic into smaller, focused functions for better clarity.
  • Functional Programming: Emphasize immutability and stateless programming.