JavaScript Functions

JavaScript Higher Order Functions

Written by Swapnil RajaPublished 24 Aug 2026

A JavaScript higher order function is a function that takes a function as an argument or returns one.

This is possible because functions in JavaScript are values, just like numbers and strings.

You have already used higher order functions if you have used map or filter.

Example

javascript

function applyTwice(value, action) {
  return action(action(value));
}

console.log(applyTwice(3, n => n * 2));

Here, applyTwice takes a function and runs it two times.

The output is 12.

What is a Higher Order Function?

A higher order function does at least one of two things: it takes a function as an argument, or it returns a function.

Everything else is an ordinary function.

This idea lets you write general tools and pass in the specific behaviour you need.

Syntax

javascript

function higherOrder(callback) {
  return callback();
}

Taking a callback is the most common form.

map Transforms Every Item

map builds a new array by running your function on each item.

Example

javascript

const prices = [100, 200, 300];
const withTax = prices.map(p => p * 1.2);

console.log(withTax);

The original array is not changed; a new one is returned.

filter Keeps Some Items

filter keeps only the items for which your function returns true.

Example

javascript

const numbers = [1, 8, 3, 12, 5];
const big = numbers.filter(n => n > 4);

console.log(big);

Here, only the numbers above 4 are kept.

reduce Builds a Single Value

reduce boils an array down to one value, such as a total.

Example

javascript

const numbers = [1, 2, 3, 4];
const total = numbers.reduce((sum, n) => sum + n, 0);

console.log(total);

The second argument, 0, is the starting value.

Returning a Function

A higher order function can build and return a brand new function.

Example

javascript

function multiplyBy(factor) {
  return function (n) {
    return n * factor;
  };
}

const triple = multiplyBy(3);

console.log(triple(5));

Here, multiplyBy returns a function that remembers factor.

That memory is called a closure, which has its own lesson.

Chaining Them Together

Because each one returns a value, they can be chained in a single line.

Example

javascript

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

const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 10)
  .reduce((sum, n) => sum + n, 0);

console.log(result);

Here, the even numbers are kept, multiplied by 10, then added together.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Higher Order Functions</title>
</head>
<body>

  <h1>JavaScript Higher Order Functions</h1>

  <p id="result"></p>

  <script>
    const numbers = [1, 2, 3, 4, 5, 6];

    const total = numbers
      .filter(n => n % 2 === 0)
      .map(n => n * 10)
      .reduce((sum, n) => sum + n, 0);

    document.getElementById("result").innerHTML = "Total: " + total;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try changing the filter:

Keep the odd numbers instead by using n % 2 !== 0.

Important Points

A higher order function takes a function as an argument or returns one.
map, filter and reduce are the ones you will use most.
They return new values rather than changing the original array.
A function that returns a function can remember the values around it.
Because each returns a value, they can be chained together.

Conclusion

JavaScript higher order functions let you write general tools and pass in the specific behaviour.

They replace many loops with a single readable line.

Understanding them is what makes the array methods in the next section feel natural.

PreviousJavaScript Callback Functions NextJavaScript Recursion