# First-class and Higher Order Functions: Effective Functional JavaScript

## **Functions: the killer JavaScript feature we never talk about.**

JavaScript is a very in-demand language today. It runs in a lot of places from the browser to embedded systems and it brings a non-blocking I/O model that is faster than others for some types of applications. What really sets JavaScript apart from the rest of scripting languages is its highly functional nature.

> JavaScript has more in common with functional languages like [Lisp or Scheme](http://javascript.crockford.com/little.html) than with C or Java. — Douglas Crockford in [JavaScript: the World’s Most Misunderstood Language](http://javascript.crockford.com/javascript.html)

It’s a widely publicised fact that Brendan Eich, when creating the first version of JavaScript, was actually told he would be able to build a [Lisp, a list processing language like Scheme or common Lisp](https://en.wikipedia.org/wiki/Lisp_\(programming_language\)). It turns out that Sun Microsystems had other ideas and this programming language needed to wear a coat of procedural syntax inherited from a C or Java-like language. Despite all the semicolons, at its heart JavaScript remains a functional language with features such as first-class functions and closures.

This post will focus on first-class functions and higher order functions. To read more about closures and how to leverage them to wield JavaScript’s functional powers,

{% embed url="<https://hackernoon.com/ingredients-of-effective-functional-javascript-closures-partial-application-and-currying-66afe055102a>" %}

## First-class functions

A language with first-class functions means that it treats functions like expressions of any other type. Functions are like any other object.

You can pass them into other functions as parameters:

```
function runFunction(fn, data) {
  return fn(data);
}
```

You can assign a function as a value to a variable:

```
var myFunc = function() {
  // do something
};
```

```
const myNewGenFunc = someParam => someParam;
```

You can return a function:

```
function takeFirst(f, g) {
   return f;
}
```

## First-class functions in practice

### **Cheap dependency injection**

In languages without first-class functions to pass a dependency in you usually inject an object. Here we can just pass functions around, which is great.

For example in Java to run a custom sort on an ArrayList, we have to use `ArrayList#sort` which expects a `Comparator` object as a parameter (see [the Java API docs here](http://docs.oracle.com/javase/8/docs/api/java/util/ArrayList.html#sort-java.util.Comparator-)). In JavaScript we use `Array#sort` ([MDN reference here](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)) which expects a function. This is a bit less verbose since in this case we’re just going to be implementing one method of the `Comparator` interface

It gets even better with ES6 default parameter syntax.

```
// in fetch.js
import axios from 'axios';
```

```
export function fetchSomething(fetch = axios) {
  return fetch('/get/some/resource');
}
```

```
// in someModule.js
import axios from 'axios';
```

```
import { fetchSomething } from './fetch';
```

```
const fetcherWithHeaders = axios({
  // pass some custom configs
});
```

```
fetchSomething(fetcherWithHeaders)
.then(/* do something */)
.catch(/* handle error */);
```

```
// in someOtherModule.js
```

```
import { fetchSomething } from './fetch';
```

```
fetchSomething()
.then(/* do something */)
.catch(/* handle error */);
```

### **Callbacks and non-blocking IO**

JavaScript’s default behaviour on IO is non-blocking. This means we tend to pass a lot of callbacks (until Promises came along at least). Being able to pass a function as a callback instead of an object on which we will run a method (like we would in say Java) means we can have terseness in callback-based code.

For example in Node:

```
const fs = require('fs');
```

```
fs.readFile('./myFile.txt', 'utf-8', function(err, data) {
  // this is a callback, it gets executed
  // once the file has been read
});
```

### **More functional programming primitives that require first-class functions**

Being able to return a function and closures means we have access to things like partial application and currying.&#x20;

{% embed url="<https://hackernoon.com/ingredients-of-effective-functional-javascript-closures-partial-application-and-currying-66afe055102a>" %}

It also means we can start creating higher order functions.

## Higher order functions

A function is a higher order function if it takes a function as a parameter, or returns a function as its result. Both of these requirements rely on functions being first-class objects in a language.

`map`, `filter` and `reduce`/`reduceRight`are the functions present in JavaScript that map to classic higher order functions in other functional languages.

In other languages:

* map tends to be called map or transform
* filter is called select in some languages
* reduce and reduceRight are the fold left and right functions (also called accumulate, aggregate, compress or inject in different languages)

In functional programming languages, there are no loops. When you need to do an operation like traversing a list or a tree, there are two predominant styles: recursion and higher order functions.

Recursion relies on a function calling itself, usually on a different part of the parameter (list being traversed for example). That’s a topic for [another post](https://hackernoon.com/recursion-in-javascript-with-es6-destructuring-and-rest-spread-4b22ae5998fa#.i4kfpmmfr)

{% embed url="<https://hackernoon.com/recursion-in-javascript-with-es6-destructuring-and-rest-spread-4b22ae5998fa#.i4kfpmmfr>" %}

Higher order functions are usually provided by the language. In ES6 JavaScript these functions are defined on the Array prototype.

### **Array#map**

`map` is used if we want to perform the same change on each member of the array. It takes the function that should be applied to each element of the array as a parameter. That function is passed `(element, index, wholeArray)` as parameters.

```
const myArr = [ 'some text', 'more text', 'final text' ];
```

```
const mappedArr = myArr.map( function(str) {
  return str.split(' ');
});
```

```
console.log(mappedArr);
// [ [ 'some', 'text' ], [ 'more', 'text' ], [ 'final', 'text' ] ]
```

### **Array#filter**

`filter` allows us to pick which elements of the array should remain in the transformed list by passing a filtering function that returns a Boolean value (true/false). As for `map` this functions is passed `(element, index, wholeArray)`.

```
const myArr = [ 5, 10, 4, 50, 3 ];
```

```
const multiplesOfFive = myArr.filter( function(num) {
  return num % 5 === 0;
});
```

```
console.log(multiplesOfFive);
// [ 5, 10, 50 ]
```

### **Array#reduce**

`reduce` is used to change the shape of the array. We provide more than 1 parameter to this function (in addition to the array we’re reducing). We pass a reducing function and optionally the initial value of to reduce with. The function is passed `(prev, curr, index, wholeArray)` . `prev` is the value returned by the previous reduction, for the first iteration that means it’s either the initial value of the first element of the array. `curr` is the value in the array at which we’re at.

The classic example is summing or concatenating.

```
const myNumbers = [ 1, 2, 5 ];
const myWords = [ 'These', 'all', 'form', 'a', 'sentence' ];
```

```
const sum = myNumbers.reduce( function(prev, curr) {
  return prev + curr;
}, 0);
```

```
console.log(sum); // 8
```

```
const sentence = myWords.reduce( (prev, curr) => {
 return prev + ' ' + curr;
}); // the initial value is optional
```

```
console.log(sentence);
// 'These all form a sentence'
```

If you want to learn more about the internal of `map`, `filter` and `reduce` or recursion, I’ve reimplemented them in a recursive style using ES6 destructuring in the following post:

{% embed url="<https://hackernoon.com/recursion-in-javascript-with-es6-destructuring-and-rest-spread-4b22ae5998fa#.i4kfpmmfr>" %}

## Higher order functions in practice

### **No more loops**

Higher order functions allow us to get rid of the imperative loops that seem to be spread everywhere.

```
var newArr = [];
var myArr = [ 1, 2, 3 ];
```

```
for(var i = 0; i < myArr.length; i++) {
  newArr.push(myArr[i] * 2);
}
```

```
console.log(newArr); // [ 2, 4, 6 ]
```

```
// nicer with `map`
const doubled = myArr.map( x => x * 2 );
console.log(doubled); // [ 2, 4, 6 ]
```

The intent is just clearer with map. We can also extract the `double` function so we’re making our code more readable and modular.

```
const double = x => x * 2;
const doubled = arr.map(double);
```

It reads like a book and that’s important because we write for humans not machines.

### **Side-effect free programming**

`Array` higher order functions do not mutate the variable they are called on. This is good, because the loop-based approach using `.push` and `.pop` changes it. It means if you pass a variable as a parameter, it’s not suddenly going to get changed by a function down the call stack.

```
// some random module
// obviously no one actually does this
function doesBadSideEffect(arr) {
  return arr.pop();
}
```

```

// somewhere quite important
var arr = [ 'a', 'b', 'c' ];
```

```
var joinedLetters = '';
```

```
for(var i = 0; i < arr.length; i++) {
  joinedLetters += arr[i];
  doesBadSideEffect(arr)
}
```

```
console.log(joinedLetters);
// whoops 'ab'
// even though the naming makes us
// expect 'abc'
```

### **Declarative Code Optimisations**

In some languages functions like `map` are parallelised. That’s because we don’t actually need to know what’s in the rest of the array to compute this particular element’s new value. If we’re doing complex things in the mapping function then this sort of optimisation could be very useful.

### Effective Functional JavaScript

Use first-class and higher order functions to write nicer code more easily. It’s nice and declarative instead of imperative, say what you want done not how to do it

This will enable you to compose your functions and write code that is extremely terse without losing readability.
