DEV Community

Cover image for High order functions in Javascript

Posted on


High order functions in Javascript

High order functions are functions that take another function as a paramater or return another function.
You see in javascript functions can be treated as variables as well so it makes it possible to return them or pass them as params.

Implementing a high order function

Let's implement a simple high order function that takes another function and call it inside it's body

function doSomething(action) {
    action(); // Hi

function actionFunction() {

Enter fullscreen mode Exit fullscreen mode

we called the doSomething function and gave it the function actionFunction as param and it simply called it inside it's body and that's perfectly fine in javascript

let's create anothet high order function but now we will instead return a function from it

function getAction() {
  return function() {

const action = getAction();

action(); // hi
Enter fullscreen mode Exit fullscreen mode

we stored the function returned by getAction then called it afterwards to log hi to the console

Existing high order functions in Javascript

javascript has a lot of high order functions built in the language, now let's see some of them that are array methods

the forEach method

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

function log(x) {
  console.log(x); // 1, 2, 3, 4, 5

Enter fullscreen mode Exit fullscreen mode

the forEach function loops through the array and each time it calls the passed function and give it the element currently iterating on

the map function

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

function double(x) {
  return x * 2;

const newArr =;

console.log(newArr); // [ 2, 4, 6, 8, 10 ]
Enter fullscreen mode Exit fullscreen mode

the map method replaces the value that is currently iterating on with the value that the passed function returns and then returns the new array

the filter method

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

function isPair(x) {
  return x % 2 == 0;

const pairs = arr.filter(isPair);

console.log(pairs); // [ 2, 4 ]
Enter fullscreen mode Exit fullscreen mode

the filter method will only keep array elements that are passed to the function and returns true

Top comments (0)

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.