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));

PreviousJavaScript Callback Functions NextJavaScript Recursion

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>

JavaScript Higher Order Functions

Example

What is a Higher Order Function?

Syntax

map Transforms Every Item

Example

filter Keeps Some Items

Example

reduce Builds a Single Value

Example

Returning a Function

Example

Chaining Them Together

Example

Complete Example

Try It Yourself

Important Points

Conclusion