DEV Community

Higher-order functions in Javascript

Damien Cosset on February 16, 2019

Introduction In Javascript, functions are values ( first-class citizens ). This means that they can be assigned to a variable and/or pas...
Collapse
 
aditya81070 profile image
Aditya Agarwal

You should also tell about the closures when talking about the higher order functions. This is the concept most of the javascript developer use but never heard of it.

Collapse
 
damcosset profile image
Damien Cosset

I am working on a separate article about closures ;)

I thought it would be too long of an article if I tried to explain both things in the same post

Collapse
 
captrespect profile image
Jonathon Roberts

Wow, Thanks for the nice simple explanation. Turns out I've been using this for years without giving it a name. Also been reading the term HoF for a while without bothering to lookup what it really was.

Collapse
 
jsonpoindexter profile image
Jason Poindexter • Edited

Excellent post. This helped a lot. I was wondering, what does the zero do here?:

let average = grades => (
    grades.reduce((acc, curr) => (
        acc + curr.grade
    ), 0) / grades.length
)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
damcosset profile image
Damien Cosset

The reduce function takes an optional second parameter that indicates the initial value. If I wanted to start counting from 10,that second parameter would have been 10. Here, I wanted to start counting from 0.

Collapse
 
renatolazaroch profile image
Renato Lazaro • Edited

I believe you have set the variable n by mistake inside the for.

let array = [1, 2, 3, 4];
let newArray = [];
for (let i = 0; i < array.length; i++) {
newArray[i] = array[i] * 2;
}
console.log(newArray);
// 2, 4, 6, 8

=============================
High Order Functions

let numbers = [1, 2, 3, 4];
const result = numbers.map((n) => n * 2);
console.log(result);
// 2, 4, 6, 8

Collapse
 
renatolazaroch profile image
Renato Lazaro

I believe you have set the variable n by mistake inside the for.

let array = [1, 2, 3, 4];
let newArray = [];
for (let i = 0; i < array.length; i++) {
newArray[i] = array[i] * 2;
}
console.log(newArray);
// 2, 4, 6, 8

=============================
High Order Functions

let numbers = [1, 2, 3, 4];
const result = numbers.map((n) => n * 2);
console.log(result);
// 2, 4, 6, 8

Collapse
 
yuriifediv profile image
Yurii Fediv • Edited

Higher-order functions are functions that take other functions as arguments or return functions as their results.
One of the great advantages of using higher order functions when we can is composition.

Sorry, but higher order functions and your example(I mean your example with grades, not first part with map) aren't linked at all. None of the functions from your example takes other functions as arguments or returns function as a result.
Of course, you use functions inside other functions and you pass results of other functions as arguments to other functions, but it is not a higher order function if we look at your definition above.

Collapse
 
dumdumme profile image
Shreenath

Good catch.

Collapse
 
renatolazaroch profile image
Renato Lazaro

I believe you have set the variable n by mistake inside the for.

let array = [1, 2, 3, 4];
let newArray = [];

for (let i = 0; i < array.length; i++) {
newArray[i] = array[i] * 2;
}

console.log(newArray);

Collapse
 
kumarvinoth123 profile image
kumarvinoth123

wow really awesome..this i learn clearly....

Collapse
 
johnson76096186 profile image
Johnson Jay

1.
Save a variable, time2p2. Assign as its value the result of invoking the timeFuncRuntime() function with the checkThatTwoPlusTwoEqualsFourAMillionTimes() function.

timeFuncRuntime() takes a function as an argument. The argument for timeFuncRuntime() is a callback function: timeFuncRuntime() has to actually call the callback function to see how long it takes to execute. Pass the checkThatTwoPlusTwoEqualsFourAMillionTimes() function as the argument for the timeFuncRuntime() function. Make sure to pass in the function without invoking it... What next to do?

Collapse
 
nazg00l profile image
Nazg00l

Thank you so much, you really made it simple, easy, and full of great explanation and examples.....

Collapse
 
vsonmez profile image
Volkan Sönmez

You described it so plainly and simply that I found it very successful according to many articles I read on this subject. Thank you.

Collapse
 
wshirzay profile image
Waheed Shirzay

Very useful article
Thanks

Collapse
 
mjan123 profile image
Muhammad Jaan

So any function that Accept a function as an argument or return a function is an higher-order-function. Am I right?

Collapse
 
raghavsharma profile image
Raghav Sharma

Thank you!