DEV Community

Kurapati Mahesh
Kurapati Mahesh

Posted on

5

Javascript: Higher-order functions

A function can take a function as an argument or can return a function as a value is called an higher-order function.

  1. A function that returns a function
const higherOrderFunc = function() {
    return function() {
        return 12;
    }
}

// which returns below function hence it is higher order function.
higherOrderFunc(); 
> ƒ () {
        return 12;
    }

higherOrderFunc()();
> 12
Enter fullscreen mode Exit fullscreen mode
  1. A function that takes a function as an argument
const testFunc = function(x) {
    return x + 12;
}

//which takes function as an argument.
const higherOrderFunc = function(testFunc) {
    return testFunc(8);
}

higherOrderFunc(testFunc);
> 20
Enter fullscreen mode Exit fullscreen mode

Example: 1

function calculate(operation, numbers) {
    return operation(numbers);
}

function addition(numbers) {
    let sum = 0;
    for (const number of numbers) {
        sum+=number;
    }
    return sum;
}

function multiply(numbers) {
    let sum = 1;
    for (const number of numbers) {
        sum*=number;
    }
    return sum;
}

const numbers = [1,2,3,4,5];
console.log(calculate(addition, numbers));
> 15

console.log(calculate(multiply, numbers));
> 120
Enter fullscreen mode Exit fullscreen mode

calculate(multiply, numbers) - Don't append parenthesis while sending function as an argument.

Benefits of higher-order functions:

  1. Reduces code duplication
  2. Single responsibility

In Javascript, functions can take arguments as primitives or objects and return the same called first-order functions.

JS built-in higher order functions are:

arr.reduce(), arr.forEach(), arr.filter(), arr.map()

Thanks.

You can follow me here: https://twitter.com/urstrulyvishwak

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay