Callbacks & Higher Order Functions

Building blocks for functional programming in JavaScript

Why is functional programming worthwhile?

Functional programming is a programming paradigm that uses functions to store code and memory. This is different from object-oriented programming (OOP), which is another programming paradigm that encapsulates code inside of objects.

The three core benefits of functional programming are:

1. Follows the DRY Principle
2. Reusable code
3. Side-effect free code

Don’t Repeat Yourself! The DRY Principle is broken when code is repetitive. For example, it is more concise to have a function that adds two to an argument than to have a function that adds two to one, a function that adds two to two, etc.

Once functionality is abstracted into pieces, each piece can be reused anywhere in the code, as many times as necessary.

Side-effect free code has a lower likelihood of errors and is easier to maintain. Modularized functions take in straight-forward parameters, execute simple instructions, and return clear values. There is an elegance to functionality broken up into its components.

Elegant, yes, but functional programming allows software engineers tackle complex code by breaking it up into its functional components and working on it in parallel. One engineer’s work won’t have adverse side-effects on another engineer’s work. It is concise, easy to follow, and builds on itself. In short, the functional programming paradigm allows teams of engineers to efficiently ship code.

What is a function?

A function is a block of code (i.e., instructions) and parameters (i.e., placeholders variables). When a function is invoked with arguments passed in, the values of the arguments are assigned to the function’s parameters and the set of instructions are executed.

Declaring function, addToNum, with a parameter called num that returns an argument plus two.

Here, a function is declared with the name, “addTwoToNum”. It has a parameter called “num”. The block of code, or instructions, returns an argument plus two. Note that everything to the right of the function keyword, including the parameter, is part of the function definition.

Defining the same function, addToNum, inside an expression.

Alternatively, the same function can be defined inside an expression. Here a constant called “addTwoToNum” is assigned a function definition.

Defining an unnamed function with parameter, num, and assigning it to addTwoToNum using ES6 arrow notation.

It can also be defined using ES6 arrow notation. Just like in the previous example, a constant called “addTwoToNum” is assigned a function definition. The only difference is that the arrow took the place of the function keyword.

Syntactical sugar

Adding syntactical sugar to the previous example, the function is declared in a concise way. Since there is only one parameter, the parenthesis is not necessary. In addition, since there is only one line of code, the brackets and return keyword are also not necessary.

There are many ways to declare and define functions — including with a Function() constructor not mentioned here — but the key takeaway is that a function is a block of code and parameters. “addTwoToNum” is a constant that has a function definition with a parameter called “num” and some executable code.

What are callbacks and higher-order functions?

A callback is a function that is fed as an argument to another function.

A higher-order function is a function that either (1) takes a function as an argument or (2) returns a function.

For this reason, higher-order functions don’t necessarily need a callback. Returning a function without passing a callback in still makes a function higher-order. If a functionA returns functionB but functionA doesn’t have any arguments, functionA is still a higher-order function.

Functions can be both a callback and a higher-order function. For example, functionA (i.e., the callback) can be passed in as an argument to functionB (i.e., the higher-order function). At the same time, functionB can be a callback if it’s passed in as an argument to functionC. This makes functionB both a higher-order function and a callback.