01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

Forum Donate

Learn to code — free 3,000-hour curriculum

JANUARY 3, 2023 / #JAVASCRIPT

Higher Order Functions in

JavaScript – Explained with
Practical Examples
Sobit Prasad

As a web developer, you should always strive to learn

new techniques and discover ways to work smarter
with JavaScript.

One such technique is using higher order functions. Higher order

functions are functions that take one or more functions as
arguments, or return a function as their result.

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 1/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

In this article, we will delve into what a higher order function

Forum is, theDonate
benefits of using them, and how to use them in practical
Learn to code — free 3,000-hour curriculum
applications.

What is a Higher Order Function?

A higher order function is a function that takes one or more
functions as arguments, or returns a function as its result.

There are several different types of higher order functions like map
and reduce. We will discuss these later in this tutorial. But before
that let's first dive deep into what higher order functions are.

// Callback function, passed as a parameter in the higher order f

function callbackFunction(){
console.log('I am a callback function');
}

// higher order function

function higherOrderFunction(func){
console.log('I am higher order function')
func()
}

higherOrderFunction(callbackFunction);

In the above code higherOrderFunction() is an HOF because we

are passing a callback function as a parameter to it.

The above example is quite simple isn't it? So let's expand it further
and see how you can use HOFs to write more concise and modular
code.

How Higher Order Functions Work

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 2/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

So, suppose I want you to write a function that calculates the area Donate
Forum
and diameter of a circle. As a beginner, the first solution that comes
Learn to code — free 3,000-hour curriculum
to our mind is to write each separate function to calculate area or
diameter.

const radius = [1, 2, 3];

// function to calculate area of the circle

const calculateArea = function (radius) {
const output = [];
for(let i = 0; i< radius.length; i++){
output.push(Math.PI * radius[i] * radius[i]);
}
return output;
}

// function to calculate diameter of the circle

const calculateDiameter = function (radius) {
const output = [];
for(let i = 0; i< radius.length; i++){
output.push(2 * radius[i]);
}
return output;
}

console.log(calculateArea(radius));
console.log(calculateDiameter(radius))

But have you noticed the problem with the above code? Aren't we
writing almost the same function again and again with slightly

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 3/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

different logic? Also, the functions we have written aren't

Forumreusable,Donate
are they?
Learn to code — free 3,000-hour curriculum

So, let's see how we can write the same code using HOFs:

const radius = [1, 2, 3];

// logic to clculate area

const area = function(radius){
return Math.PI * radius * radius;
}

// logic to calculate diameter

const diameter = function(radius){
return 2 * radius;
}

// a reusable function to calculate area, diameter, etc

const calculate = function(radius, logic){
const output = [];
for(let i = 0; i < radius.length; i++){
output.push(logic(radius[i]))
}
return output;
}

console.log(calculate(radius, area));
console.log(calculate(radius, diameter));

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 4/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

Now, as you can see in the above code, we have only written a single
Forum Donate

function calculate() to calculate

Learn to code the area and
— free 3,000-hour diameter of the
curriculum
circle. We only need to write the logic and pass it to calculate()
and the function will do the job.

The code that we have written using HOFs is concise and modular.
Each function is doing its own job and we are not repeating anything
here.

Suppose in the future if we want to write a program to calculate the

circumference of the circle. We can simply write the logic to
calculate the circumference and pass it to the calculate()
function.

const circumeference = function(radius){

return 2 * Math.PI * radius;
}

console.log(calculate(radius, circumeference));

How to Use Higher Order

Functions
You can use higher order functions in a variety of ways.

When working with arrays, you can use the map() , reduce() ,
filter() , and sort() functions to manipulate and transform data
in an array.

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 5/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

When working with objects, you can use the Object.entries()

Forum Donate
function to create a new array from an object.
Learn to code — free 3,000-hour curriculum

When working with functions, you can use the compose() function
to create complex functions from simpler ones.

How to Use Some Important

Higher Order Functions
There are various built in HOFs, and some of the most common ones
are map(), filter() and reduce(). So let's understand each one of these
in detail.

How to use map() in JavaScript

The map() function takes an array of values and applies a
transformation to each value in the array. It does not mutate the
original array. It is often used to transform an array of data into a
new array with a different structure.

Let's understand with the help of examples.

Example 1: Suppose we want to add 10 to every element in a array.

We can use the map() method to map over every element in the
array to add 10 to it.

const arr = [1, 2, 3, 4, 5];

const output = arr.map((num) => num += 10)
console.log(arr); // [1, 2, 3, 4, 5]
console.log(output); // [11, 12, 13, 14, 15]

In the above example, arr is an array with five elements: 1, 2, 3, 4,

and 5. map is a method that we use to apply a function to each
https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 6/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

element in an array, and it returns a new array with the modified

Forum Donate
elements.
Learn to code — free 3,000-hour curriculum

The callback function that is being passed to map uses the arrow
function syntax, and it takes a single argument num . This function
adds 10 to num (every element in the array) and returns the result.

Example 2: Here we have an array of users. Suppose we only want

their first and last name. We can simply use the map() method to
extract it from the users array.

const users = [
{firstName: 'John', lastName: 'Doe', age: 25},
{firstName: 'Jane', lastName: 'Doe', age: 30},
{firstName: 'Jack', lastName: 'Doe', age: 35},
{firstName: 'Jill', lastName: 'Doe', age: 40},
{firstName: 'Joe', lastName: 'Doe', age: 45},
]

const result = users.map((user) => user.firstName + ' ' + user.la

console.log(result); // ['John Doe', 'Jane Doe', 'Jack Doe', 'Jil

In the above code, users is an array of objects representing users.

Each object has three properties: firstName , lastName , and age .

We are mapping over each user using the map() method to extract
the properties firstName and lastName .

The callback function takes a single argument user which

represents an element in the users array (an object).

The function concatenates the firstName and lastName properties

of the user object, and returns the result.

How to Use filter() in JavaScript

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 7/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

Forum
The filter() function takes an array and returns a new array withDonate
only the values that meet certain criteria. It also does not mutate
Learn to code — free 3,000-hour curriculum
the original array. It is often used to select a subset of data from an
array based on certain criteria.

Example 1: You can use filter() to return only the odd numbers
from an array of numbers.

const arr = [1, 2, 3, 4, 5];

const output = arr.filter((num) => num % 2) // filter out odd num
console.log(arr); // [1, 2, 3, 4, 5]
console.log(output); // [1, 3, 5]

In the above code, arr is an array with five elements: 1, 2, 3, 4, and

5. filter is a method that is used to create a new array with
elements that pass a test specified in a provided callback function.

This callback function checks if num is odd by checking if it is not

divisible by 2 ( num % 2 ). If num is not divisible by 2, the function
returns true , otherwise it returns false .

When filter is called on arr , it applies this function to each

element in the array, creating a new array with only the elements
that returned true or passed the specified condition when passed
to the function. The original arr remains unchanged and returns
the result.

Example 2: You can use filter() to return only the users having
age greater than 30 in an array.

const users = [
{firstName: 'John', lastName: 'Doe', age: 25},
{firstName: 'Jane', lastName: 'Doe', age: 30},

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 8/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

{firstName: 'Jack', lastName: 'Doe', age: 35},

{firstName: 'Jill', lastName: 'Doe', age: 40},
Forum Donate
{firstName: 'Joe', lastName: 'Doe', age: 45},
Learn to code — free 3,000-hour curriculum
]

// Find the users with age greater than 30

const output = users.filter(({age}) => age > 30)
console.log(output); // [{firstName: 'Jack', lastName: 'Doe', age

In the above code, users is an array of objects representing users.

Each object has three properties: firstName , lastName , and age .

filter is called on the users array and it applies a callback

function to each element in the array.

The function takes a single argument, an object destructured to a

single property age . This function checks if age is greater than 30.
If it is, the function returns true , otherwise it returns false .

When filter is called on users , it applies this function to each

element in the array, creating a new array with only the elements
that returned true when passed to the function and returns the
result. The original users array remains unchanged.

How to use reduce() in JavaScript

The reduce() method is kind of overwhelming. If you have came
across reduce() method before and haven't understood it at first,
it's totally fine.

But don't worry – here, we will learn it through quite a few examples
and I will try my best to make you understand this method.

Now, one doubt that might comes to your mind is why we use the
reduce() method. As there are already lots of methods, how can
we decide which one to use and when?

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 9/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

Forum
In the case of the reduce() method, you should is used it when youDonate
want to perform some
Learn operation
to code — free on the elements
3,000-hour of an array and
curriculum
return a single value as a result. The "single value" refers to the
accumulated result of repeatedly applying a function to the
elements of a sequence.

For example, you might use reduce() to sum up all the elements in
an array, to find the maximum or minimum value, to merge multiple
objects into a single object, or to group different elements in an
array.

Now let's understand all these with the help of examples.

Example 1: Using reduce() to sum up all the elements in an array:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((total, currentValue) => {

return total + currentValue;
}, 0)

console.log(sum); // 15

In this example, the reduce() method is called on the numbers

array and is passed a callback function that takes two arguments:
total and currentValue .

The total argument is the accumulation of the values that have

been returned from the function so far, and the currentValue is the
current element being processed in the array.

The reduce() method also takes an initial value as the second

argument, in this case 0 , which is used as the initial value of total
for the first iteration.
https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 10/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

Forum Donate
In each iteration, the function adds the current value to the total
Learn
and returns the newtovalue
codeof
— the
freetotal.
3,000-hour curriculum

The reduce() method then uses the returned value as the total
for the next iteration, until it has processed all the elements in the
array.

Finally, it returns the final value of the total, which is the sum of all
the elements in the array.

Example 2: Using reduce() to find the maximum value in an array:

let numbers = [5, 20, 100, 60, 1];

const maxValue = numbers.reduce((max, curr) => {
if(curr > max) max = curr;
return max;
});
console.log(maxValue); // 100

In this example, again we have two arguments max and curr in the
callback function. Notice we haven't passed the second parameter
in the reduce() method this time. So, the default value will be the
first element in the array.

The callback function first checks if the current element curr is

greater than the current maximum value max . If it is, it updates the
value of max to be the current element. If it is not, max is not
updated. Finally, the function returns the value of max .

In this case, the reduce() method will start by setting max to 5 and
curr to 20. It will then check if 20 is greater than 5, which it is, so it
updates max to 20.

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 11/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

It will then set curr to 100 and check if 100 is greaterForum

than 20, Donate
which it is, so it updates max to 100.
Learn to code — free 3,000-hour curriculum

It will continue this process until it has processed all the elements in
the array. The final value of max will be the maximum value in the
array, which is 100 in this case.

Example 3: Using reduce() to merge different objects in a single

object:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { e: 5, f: 6 };
const mergedObj = [obj1, obj2, obj3].reduce((acc, curr) => {
return { ...acc, ...curr };
}, {});
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }

In this example, we have two arguments acc and curr in the

callback function. The acc represents the current merged object
that has been created so far, while the curr represents the current
object being processed in the array.

The function uses the spread operator ( ... ) to create a new object
that combines the properties of the current merged object acc and
the current object curr . It then returns this new object.

In this case, the reduce() method will start by setting acc to an

empty object (which is the value passed as the second argument to
reduce() ). It will then set curr to obj1 , and create a new object
that combines the properties of the empty object and obj1 . It will
then set curr to obj2 and create a new object that combines the
properties of the previous merged object and obj2 . It will continue
this process until it has processed all the objects in the array.

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 12/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

Forum
The final value of acc will be the merged object, which will containDonate
all the properties ofto
Learn the original
code — freeobjects.
3,000-hour curriculum

Example 4: Using reduce() to group objects in an array. For

example, grouping products in a shopping cart according to their
brand name.

const shoppingCart = [
{name: 'Apple', price: 1.99, quantity: 3},
{name: 'Apple', price: 1.99, quantity: 3},
{name: 'Xiomi', price: 2.99, quantity: 2},
{name: 'Samsung', price: 3.99, quantity: 1},
{name: 'Tesla', price: 3.99, quantity: 1},
{name: 'Tesla', price: 4.99, quantity: 4},
{name: 'Nokia', price: 4.99, quantity: 4},
]

const products = shoppingCart.reduce((productGroup, product) => {

const name = product.name;
if(productGroup[name] == null) {
productGroup[name] = [];
}
productGroup[name].push(product);

return productGroup;
}, {});

console.log(products);

// OUTPUT
{
Apple: [
{ name: 'Apple', price: 1.99, quantity: 3 },
{ name: 'Apple', price: 1.99, quantity: 3 }
],
Xiomi: [ { name: 'Xiomi', price: 2.99, quantity: 2 } ],
Samsung: [ { name: 'Samsung', price: 3.99, quantity: 1 } ],
Tesla: [
{ name: 'Tesla', price: 3.99, quantity: 1 },
{ name: 'Tesla', price: 4.99, quantity: 4 }

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 13/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

],
Forum
Nokia: [ { name: 'Nokia', price: 4.99, quantity: 4 } ]
Donate
}
Learn to code — free 3,000-hour curriculum

In this example, we have shoppingCart array representing different

products and two arguments productGroup and product in the
callback function.

The productGroup argument represents the current group of

products that have been found so far, while the product argument
represents the current product being processed in the array.

The function first gets the name of the current product using
product.name . It then checks if there is already a group for this
product name in the productGroup object using the if statement.
If there is not, it creates a new group by initializing the
productGroup[name] property to an empty array.

Finally, the function pushes the current product into the group using
the push() method, and returns the updated productGroup object.

After the reduce() method has processed all the elements in the
shoppingCart array, the resulting productGroup object will contain
keys for each product name, and values that are arrays of products
with that name.

Benefits of Higher Order

Functions
Using higher order functions has some important benefits for web
developers.

First, higher order functions can help improve the legibility of your
code by making it more concise and easy to understand. This can
https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 14/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

help speed up the development process and make it easier

Forumto debugDonate
code.
Learn to code — free 3,000-hour curriculum

Second, higher order functions can help organize your code into
smaller chunks, making it easier to maintain and extend.

Conclusion
This article explored what a higher order function is, the benefits of
using them, and how to use them in practical applications.

By using higher order functions, web developers can work smarter

by organizing their code into smaller chunks and making it more
legible and easier to debug.

Now, whenever you try to use map(), filter() and reduce() methods
and get confused, just remember the following:

Use map when you want to transform an array

Use filter to select a subset of data from an array, and

Use reduce when you want to return a single value as a

result.

For further reading on higher order functions, check out this

awesome video by Akshay Saini on YouTube.

Sobit Prasad
Hey! I am Sobit a Frontend Developer from India. I love sharing what I have
learned through writing blogs on various platforms and threads on twitter.

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 15/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

If you read this far, thank the author to show them you care.
Forum Donate
Say Thanks
Learn to code — free 3,000-hour curriculum

Learn to code for free. freeCodeCamp's open source curriculum has

helped more than 40,000 people get jobs as developers.
Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States

Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of
videos, articles, and interactive coding lessons - all freely available to the public.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers,
services, and staff.

You can make a tax-deductible donation here .

Trending Guides

Date Formatting in JS Java Iterator Hashmap Cancel a Merge in Git

What is a Linked List? Install Java in Ubuntu Python Ternary Operator
Full Stack Career Guide Python Sort Dict by Key Smart Quotes Copy/Paste
JavaScript Array Length Sets in Python Kotlin vs Java
SQL Temp Table HTML Form Basics Comments in YAML
Pandas Count Rows Python End Program Python XOR Operator
Python Dict Has Key Python List to String Exit Function in Python
String to Array in Java Python Import from File Parse a String in Python
Python Merge Dictionaries Copy a Directory in Linux Reactive Programming Guide
Center Text Vertically CSS What’s a Greedy Algorithm? Edit Commit Messages in Git

Mobile App

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 16/17
01/04/2024, 04:04 Higher Order Functions in JavaScript – Explained with Practical Examples

Forum Donate

Learn to code — free 3,000-hour curriculum

Our Charity

About Alumni Network Open Source Shop Support Sponsors Academic Honesty

Code of Conduct Privacy Policy Terms of Service Copyright Policy

https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ 17/17