JS interview in 2 minutes / Higher Order Functions
Tags: javascript, typescript, beginners, career
Published: 2021-04-26 10:52:48

---
title: JS interview in 2 minutes / Higher Order Functions
published: true
description: Let's try to figure out how to answer common JS questions in an interview.
tags: javascript, typescript, beginners, career
cover_image: https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1920px-Unofficial_JavaScript_logo_2.svg.png
---

**Question:**
Explain Higher Order Functions in Javascript.


**Quick answer:**
These are functions that return other functions.

UPD: as @mazentouati noted in the comments, Higher Order Functions are also functions that accept a function as its parameter. [Wikipedia](https://en.wikipedia.org/wiki/Higher-order_function)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6twmoyj3n4eb1q71ilk.png) 

**Longer answer:**
In JavaScript, you can return objects of any type as a result of the function *or receive an object of any type as a parameter*. This means you can create a function that will return a function.

```javascript
function higherFunction() {
  return function regularFunction() {
    console.log('Hello world!')
  }
}

const a = higherFunction() // won't print anything
a() // Hello world!
```

You can also try to create even more nested functions.
```javascript
const a = () => () => () => () => console.log('Hello world')
const b = a()
const c = b()
const d = c()

d() // Hello world!
```

You can pass functions to a function that will execute functions in some specific order.
```javascript
const pipe = (...args) => 
  (init) => 
    args.reduce((acc, cur) => cur(acc), init)

const a = pipe(
 (val) => val + 1,
 (val) => val * 2,
 (val) => console.log("Got", val),
)

a(10) // Got 22
```

And more other fun ways to use functions 🤪

**Real-life example:**
Some frameworks ([angular](https://angular.io/api/core/Component)) and libraries ([MobX](https://mobx.js.org/enabling-decorators.html#enabling-decorators-)) heavily rely on decorators, but decorators are no more than Higher Order Functions themselves.

```javascript
const logDecorator = (wrapped) => {
  return (...args) => {
    console.log(`Invoked ${wrapped.name} with args ${args}`)
    wrapped(...args)
  }
}

const tmp = (param) => {
  console.log('Do nothing, but just show param:', param) 
}

const wrappedTmp = logDecorator(tmp)
wrappedTmp('Hello world!')
// Invoked tmp with args Hello world!
// Do nothing, but just show param: Hello world!
```

Some other libraries ([RxJs](https://rxjs.dev/)) may use it as configurable helpers.

```javascript
// These functions can by provided by a library itself
const uppercase = (a) => a.toUpperCase();
const removePunctuation = (a) => a.replace(/[^0-9a-zA-Z ]/g, '')

// pipe is a Higher Order Function that returns a function, which will apply all functions one by one
const process = pipe(
  uppercase,
  removePunctuation,
)

console.log(process('qwe-qwe'), process('Hello world!'))
// QWEQWE HELLO WORLD
```

---

Older posts:
* [JS interview in 2 minutes / value vs reference](https://dev.to/kozlovzxc/js-interview-in-2-minutes-value-vs-reference-5a8k)
* [JS interview in 2 minutes / == vs ===](https://dev.to/kozlovzxc/js-interview-in-2-minutes-vs-1f58)

Btw, I will post more fun stuff here and on [Twitter](https://twitter.com/kozlovzxc). Let's be friends 👋