Skip to content
Search

DEV Community

Mavis
Mavis

Posted on

 

Higher Order Function in JavaScript

#javascript

Higher Order Function (HOF) is a function that can take a function as an argument or a function that return another function.

Array.map is HOF, in below case, map receive an arrow function as an argument.

['cat', 'dog', 'bird'].map(animal => `Hi, ${animal}`)
Enter fullscreen mode Exit fullscreen mode
Let's have a look another example

This function take num1 as an argument, then return a function function (num2) {return num1 * num2}. So it's HOF.

const multiplyBy = function (num1){
        return function (num2) {
            return num1 * num2
        }
}
const multiplyByTwo = multiplyBy(2)
const multiplyByFive = multiplyBy(5)
multiplyByTwo(5) // 10
multiplyByFive(5) // 25
Enter fullscreen mode Exit fullscreen mode

Let's convert above method.

const multiplyBy = num1 => num2 =>  num1 * num2
multiplyBy(2)(5) // 10
Enter fullscreen mode Exit fullscreen mode

Top comments (7)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ •

A simpler way to write 'multiplyBy' would just be:

const multiplyBy = num1 => num2 => num1 * num2
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mavis_chen profile image
Mavis •

Thank you for correcting, I forgot to add return or remove {}.

Collapse
 
lico profile image
SeongKuk Han • • Edited

According to Wikipedia, there is a description about HOF.

In mathematics and computer science, a higher-order function is a function that does at least one of the following: takes one or more functions as arguments, returns a function as its result.

Your examples are about closure.

Below one is able to be one of examples of HOF.

const greeting = (funcA) => {
  return (name) => {
    funcA();
    console.log(`My name is ${name}.`);
  }
}

const welcome = () => console.log('Welcome!');

greeting(welcome)('Mavis');

const hello = greeting(welcome);
hello('Mavis');
Enter fullscreen mode Exit fullscreen mode

In developer.mozilla.org/en-US/docs/W..., there is this example.

function makeAdder(x) {
  return function (y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(2)); // 7
console.log(add10(2)); // 12
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

The OP's example is a perfectly good example of a HOF, and is all but identical to the example from MDN - which is also a good example of a HOF. The fact that a closure is involved in the creation of the HOF is irrelevant.

Your own example also makes use of a closure, and actually does both of the things that the definition of a HOF requires at least one of: it takes a function as input, and also returns a function. Both things are not necessary for it to be a higher order function.

Collapse
 
lico profile image
SeongKuk Han •

Yes, I used a closure to implement a HOF. I just wanted to show that HOF takes a funtion as input.

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

That isn't correct, even by the definition you provided:

In mathematics and computer science, a higher-order function is a function that does at least one of the following: takes one or more functions as arguments, returns a function as its result.

It only needs take take a function as input, or return a function as output to be a HOF. It can do both too, but that's not necessary.

Thread Thread
 
lico profile image
SeongKuk Han •

Oh, return a function as output. I've written wrong information. Thank you for correcting me :)

DEV Community

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.

Read next

catherineisonline profile image

📚 34 JavaScript String Methods Cheatsheet

Ekaterine Mitagvaria -

ezilemdodana profile image

Animated Spinner - React Native

Ezile Mdodana -

brihoum profile image

Solving FreeCodeCamp JavaScript Algorithms and Data Structures projects

Abdjalil Brihoum -

guillaumeduhan profile image

Emails templates with Supabase

CodewithGuillaume -