Understanding Higher-Order Functions in JavaScript

Shahrooz Me

Hi, I'm Shahrooz, a front-end developer. I'm the author of this blog, nice to meet you!

→ Follow me on Twitter!

What makes JavaScript suitable for functional programming is that it accepts Higher-Order Functions.

In functional programming languages, functions are values.

To fully understand this concept, you first have to understand these two concepts:

  • What is Functional Programming
  • The concept of First-Class Functions

What is Functional Programming

In most simple term Functional Programming is a programming paradigm with some particular techniques.

Haskell, Clojure and Scala are some of the most popular purely functional programming languages.

Popular programming languages that support functional programming techniques are JavaScript, Python, Ruby and many others.

First-Class Functions

In a functional programming languages, functions are first-class citizens. That means in Javascript or any other programming languages functions are objects.

To prove functions are objects in Javascript, we could do something like this:

function myName() {
  console.log('Shahrooz');
}

myName.language = 'Persian';
console.log(myName.language); // 'Persian'

Note: While this is completely valid in Javascript, this is considered as a harmful practice. Use an object if you need properties.

Functions that you send into other functions are called callbacks functions because the host function will call back to them.

In JavaScript, everything you can do with other types like object, string, or number, you do with functions. You can pass them as parameters to other functions(callbacks), Assign them to variables, and pass them around etc. This is why functions in JavaScript are know as First-Class Functions.

Assigning Functions to Variables

We can assign functions to variables in JavaScript. For example:

const helloWorld = () => {
  console.log('Hello World!');
}

Passing Functions as Parameters

We can pass functions as parameters to other functions. For example:

function sayBlaa() {
  console.log('Blaa bla!');
}
setTimeout(sayBlaa, 2000);

Higher-Order Functions

A higher-order functions is a function that either takes a function a function as an argument, or returns a function as result.

For example, Array.prototype.map, Array.prototype.filter and Array.prototype.reduce are some of the Higher-Order functions built into the language.

If you want to learn about the most useful built in higher-order functions check this article.