JS interview in 2 minutes / Higher Order Functions

Question:
Explain Higher Order Functions in javascript.

Quick answer:
These are functions that return other functions.

Longer answer:
In JavaScript, you can return objects of any type as a result of the function. This means you can create a function …

Question:
Explain Higher Order Functions in javascript.

Quick answer:
These are functions that return other functions.

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

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.

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.

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) and libraries (MobX) heavily rely on decorators, but decorators are no more than Higher Order Functions themselves.

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) may use it as configurable helpers.

// 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

Btw, I will post more fun stuff here and on Twitter. Let’s be friends ?


Print Share Comment Cite Upload Translate
APA
Nikita Kozlov | Sciencx (2024-03-28T15:54:54+00:00) » JS interview in 2 minutes / Higher Order Functions. Retrieved from https://www.scien.cx/2021/04/26/js-interview-in-2-minutes-higher-order-functions/.
MLA
" » JS interview in 2 minutes / Higher Order Functions." Nikita Kozlov | Sciencx - Monday April 26, 2021, https://www.scien.cx/2021/04/26/js-interview-in-2-minutes-higher-order-functions/
HARVARD
Nikita Kozlov | Sciencx Monday April 26, 2021 » JS interview in 2 minutes / Higher Order Functions., viewed 2024-03-28T15:54:54+00:00,<https://www.scien.cx/2021/04/26/js-interview-in-2-minutes-higher-order-functions/>
VANCOUVER
Nikita Kozlov | Sciencx - » JS interview in 2 minutes / Higher Order Functions. [Internet]. [Accessed 2024-03-28T15:54:54+00:00]. Available from: https://www.scien.cx/2021/04/26/js-interview-in-2-minutes-higher-order-functions/
CHICAGO
" » JS interview in 2 minutes / Higher Order Functions." Nikita Kozlov | Sciencx - Accessed 2024-03-28T15:54:54+00:00. https://www.scien.cx/2021/04/26/js-interview-in-2-minutes-higher-order-functions/
IEEE
" » JS interview in 2 minutes / Higher Order Functions." Nikita Kozlov | Sciencx [Online]. Available: https://www.scien.cx/2021/04/26/js-interview-in-2-minutes-higher-order-functions/. [Accessed: 2024-03-28T15:54:54+00:00]
rf:citation
» JS interview in 2 minutes / Higher Order Functions | Nikita Kozlov | Sciencx | https://www.scien.cx/2021/04/26/js-interview-in-2-minutes-higher-order-functions/ | 2024-03-28T15:54:54+00:00
https://github.com/addpipe/simple-recorderjs-demo