Modify Functions with Higher Order Functions in JavaScript

Share this video with your friends

Send Tweet

This lesson teaches the concept of higher order functions (HOF) in JavaScript, a necessary building block of functional programming in any language.

A higher order function does at least one of the following things, often both:

  1. Accepts a function as an argument
  2. Returns a new function

To demonstrate this, we will build a higher order function, withCount(), that modifies any function passed to it so that it logs out how many times it has been called.

ludwig
ludwig
~ 5 years ago
console.log(countedAdd(1, 2));
// Call count : 1
console.log(countedAdd(2, 2));
// Call count : 2
console.log(countedAdd(3, 2));
// Call count : 3

it's can be interested to talk about clojure here

Henri d'Orgeval
Henri d'Orgeval
~ 5 years ago

It would have been even greater if you had explained how to retrieve the count value within the higher order function. I was expected something like that: countedAdd.count

Kyle Shevlin
Kyle Shevlin(instructor)
~ 5 years ago

@hdorgeval this is a lesson on higher order functions, not on closures. A lesson on closures could show you how to expose the count value.

Also what you're asking is to add a property to the incoming function, which is possible, but could potentially be unsafe. Adding properties to functions and objects could overwrite functionality already stored at that property key. It is possible that the passed in function has a count property already, and thus if we added it, we'd be breaking the API of the function.

Karol Mazur
Karol Mazur
~ 5 years ago

@Kyle I'm confused by this lesson. To me intuitively functions are stateless: you put a value in, you get a value out. Using withCount you've hidden state inside of a function. So now calling that function multiple times (even with the same input) causes a side effect. I think I get it... it's just not intuitive at all. Any help appreciated.

Kyle Shevlin
Kyle Shevlin(instructor)
~ 5 years ago

Hi Karol,

Your intuition is only accurate if the function doesn't create a closure. Our higher order component, while a pure function (because it always returns the same function when given the same inputs), creates a closure that holds the count in state, Every time you use withCount to modify a function, you create a new closure holding a new count in that state. Then when you call the modified function, the side effect reads and updates that state held in closure.

This isn't a lesson on closures, but understanding them would help you understand how this higher order function works.

Hope that helps!

Karol Mazur
Karol Mazur
~ 5 years ago

@Kyle thanks for the quick response! I understand closures, but what's throwing me off here is that a function is keeping a reference to a closure. Hmm, I think coming from an Objective-C and Swift background I'm still very affected by thinking in an OO-way.

Kyle Shevlin
Kyle Shevlin(instructor)
~ 5 years ago

At least in JavaScript, this is exactly the point of the closure, to hold some bit of state in memory that's still accessible by the exposed function or object. I have never written any Objective-C or Swift, so I can't really speak to the similarities or differences.

Karol Mazur
Karol Mazur
~ 5 years ago

Thank you @Kyle. :)