What is a Higher Order Function?
Tags: programming, python, javascript, typescript
Published: 2020-06-16 22:45:50

---
title: What is a Higher Order Function?
published: true
date: 2020-06-16 08:51:01 UTC
tags: ["Programming", "Python", "Javascript", "Typescript"]
cover_image: https://livecodestream.dev/post/2020-06-16-what-is-a-higher-order-function/featured.jpg
canonical_url: http://livecodestream.dev/post/2020-06-16-what-is-a-higher-order-function/
---

A **higher order function** is a function that either takes a function as an argument or returns a function. This type of function has implementations in many programming languages including Go, JavaScript, Python, etc; and they trend to be a questions used during interviews. Many times I talked to developers about this concept, and they were not familiar with the name, though they have been using it everyday unknowingly, so I decided to cover the topic with a post so it's clear for us all what they are and how they can be useful.

As this topic is widely used among multiple programming languages, I'll be providing code samples in both JavaScript and Python.

---

## Some simple examples
Let's take a look into some simple examples of higher order functions to enter into the topic and work with code, and then we will advance into building some of the popular functions we use which are examples of higher order functions.

### Taking a function as an argument
To start let's build a very simple function called `doOperation` which takes 3 arguments:

- The function operation
- number1
- number2

Additionally, we will create an operation called `sumBothNumbers` which will simply return the sum of 2 numbers.

Python:
```python
def doOperation(operation, number1, number2):
    return operation(number1, number2)

def sumBothNumbers(number1, number2):
    return number1 + number2

doOperation(sumBothNumbers, 3, 5)

------------
Output
------------
8
```

JavaScript:
```javascript
function doOperation(operation, number1, number2) {
    return operation(number1, number2)
}

function sumBothNumbers(number1, number2) {
    return number1 + number2
}

doOperation(sumBothNumbers, 3, 5)

------------
Output
------------
8
```

Though in this particular case having the `doOperation` function seems redundant if not wrong, there are cases where it can be useful, the `doOperation` function can be a part of a library which we can for example extend with our own operations.

### Returning a function

Next, we will build a higher order function which will return a function. Our function will be called `multiplyBy` and it will take a number as an argument and return a function that will multiply its input by that number.

Python:
```python
def multiplyBy(multiplier):
    def result(num):
        return num * multiplier
    return result

multiplyByThree = multiplyBy(3)
multiplyByThree(4)

------------
Output
------------
12
```

JavaScript:
```javascript
function multiplyBy(multiplier) {
    return function result(num) {
        return num * multiplier
    }
}

multiplyByThree = multiplyBy(3)
multiplyByThree(4)

------------
Output
------------
12
```

---

## Building filter(), map() and reduce()
Let's build a simple version of the popular functions using higher order functions (which they actually are).

### filter() aka filtering()
The `filtering` function will have 2 parameters, an `array` and a `test` function and it will return a new array with all the elements that pass the test.

Python:
```python
def filtering(arr, test):
    passed = []
    for element in arr:
        if (test(element)):
            passed.append(element)
    return passed

def isSuperNumber(num):
    return num >= 10

filtering([1, 5, 11, 3, 22], isSuperNumber)

------------
Output
------------
[11, 22]
```

JavaScript:
```javascript
function filtering(arr, test) {
    const passed = []
    for (let element of arr) {
        if (test(element)) {
            passed.push(element)
        }
    }
    return passed
}

function isSuperNumber(num) {
    return num >= 10
}

filtering([1, 5, 11, 3, 22], isSuperNumber)

------------
Output
------------
> (2) [11, 22]
```

As can be seen, our `filter()` function is very easy to code and use to for example get all the super numbers from an array😛.

### map() aka mapping()
The function `mapping` will take 2 parameters: an `array` and a `transform` function, and it will return a new transformed array where each item is the result of the `transform` function called over each element of the original array.

Python:
```python
def mapping(arr, transform):
    mapped = []
    for element in arr:
        mapped.append(transform(element))
    return mapped

def addTwo(num):
    return num+2

mapping([1, 2, 3], addTwo)

------------
Output
------------
[3, 4, 5]
```

JavaScript:
```javascript
function mapping(arr, transform) {
    const mapped = []
    for (let element of arr) {
        mapped.push(transform(element))
    }
    return mapped
}

function addTwo(num) {
    return num + 2
}

mapping([1, 2, 3], addTwo)

------------
Output
------------
> (3) [3, 4, 5]
```

### reduce() aka reducing()
The function `reducing` will take 3 parameters: a `reducer` function, an `initial value` for the accumulator, and an `array`. For each item in the array, the reducer function is called, passing it the accumulator and the current array element. The return value is assigned to the accumulator. When it's finished reducing all the items in the list, the accumulated value is returned.

Python:
```python
def reducing(reducer, initial, arr):
    acc = initial
    for element in arr:
        acc = reducer(acc, element)
    return acc

def accum(acc, curr):
    return acc + curr

reducing(accum, 0, [1, 2, 3])

------------
Output
------------
6
```

JavaScript:
```javascript
function reducing(reducer, initial, arr) {
    let acc = initial
    for (element of arr) {
        acc = reducer(acc, element)
    }
    return acc
}

function accum(acc, curr) {
    return acc + curr
}

reducing(accum, 0, [1, 2, 3])

------------
Output
------------
6
```

---

## Conclusion
Next time when you get to that interview or simply you see a pattern where a function is either returned or taken as a parameter you will know we are dealing with higher order functions.

Today for the first time I've introduced an article covering more than one language, if you find it a great way to showcase and compare between them, or if you think it was a terrible idea please let me know in the comments or by twitter, I'd love to hear your ideas.

Thanks so much for reading!

* * *

If you like the story, please don't forget to subscribe to our free newsletter so we can stay connected: [https://livecodestream.dev/subscribe](https://livecodestream.dev/subscribe)