Functional and Object Oriented Programming with Higher Order Functions

A higher order function is a function whose argument list or return value includes a function. Knowledge about higher order functions is essential when writing programs both in functional and in object oriented style.

Why is functional programming good?

When writing programs in a functional style, you have to treat your data as immutable. Operations on data are not allowed to mutate any arguments outside the function. In case a reference type is passed to a function (object, array), the value of this reference type cannot be mutated.

If you write code in a functional style, all your functions are side effect free.

A program without side effects is more easily testable. Functions are your building blocks. As functions do not mutate values outside their scope, all your building blocks can be tested in isolation.

Examples for functional programming utilities

The map function is applied on arrays. It accepts one function argument. This function is applied on each element of the array.

For instance, suppose that you have a shopping basket containing arrays of objects.

Suppose that a coupon code is applied on the basket, giving you 20% discount on the price of the items. How can we adjust the price of the items in the basket?

The above implementation is flawed, because it mutates the original basket. Although the value of the original basket is not used anywhere, in functional programming, we are supposed to treat data as immutable. Therefore, it is advised to create the mapping like this:

Another option is to clone the item on the first line of the mapper function.

In the second example, we will search for items that are not more expensive than 5 units.

Calculating the total basket value can be done using a simple for loop or using the reduce function.

Higher order functions are quite common. They are not limited to the typical functions you would learn at a functional programming course. Just think about the jQuery deferred object, promises in general, or AJAX requests.

Why is Object Oriented Programming good?

Object oriented programming often lets you model the real world more closely than functional programming. The concept of internal state is used and supported by JavaScript. In general, more developers have experience writing and maintaining object oriented code than functional code.

Furthermore, object oriented programs tend to be more efficient than functional programs. Full immutability in functional programming comes at the cost of deep cloning your state during each and every transformation.

Context binding

Context binders are also higher order functions. Binding is special, because this is our first example where a function returns another function.

Why is context binding important? Let me illustrate it using an example:

When the callback function of setTimeout is called, the context is set to window. As does not exist, the second introduction fails.

This is a typical situation when many developers "solve" the problem by making the self = this assignment and using self inside the callback. I seriously suggest never making the self = this assignment, because it creates maintainability concerns. Suppose you pay full attention on the implementation. One day, one of your peers decides on moving a line of code from the outside to the inside of the callback. If the moved line contains this and the reference is not changed to self, a well hidden fault may easily be left in the code.

The proper solution is context binding.

  • this.introduce is a function
  • this.introduce.bind is a function accepting a context and returning a function
  • the return value this.introduce.bind( this ) does the same as this.introduce, fixing the context

There are several options for binding the context. The native bind method should be good enough unless you support legacy browsers such as IE8. Alternatives are _.bind or $.proxy.

Higher order functions are not hard

Higher order functions are just like any other functions, with the twist that their return value or argument list contains a function. This article covered two types of higher order functions:

  • functional programming utility functions such as map, filter and reduce,
  • the object oriented utility function bind.

Both functional and object oriented programming has a wide support. Regardless of your choice, you will use higher order functions from time to time.

Learn ES6 in Practice

Sign up below to access an ES6 course with many exercises and reference solutions.