Higher-Order Function in Javascript - Javascript weekly

In this article, we will see what is a higher-order function in javascript and how to implement them. Higher-Order Function in Javascript - Javascript weekly.

Prototypal Inheritance - Javascript

Currying in Javascript

Understanding Closures in Javascript

What is Higher-Order Function?

Mainly, Higher-Order Function is a function which takes a function as an argument or returns a function. if a function qualifies any of this, then it is a higher-order function.

Let's understand this concept with a simple example.

const func1 = (data,fnargument) => {
  const newData = fnargument(data);
  return newData
}

const fnargument = (value) => {
  //Do some Logic Here
}

func1 takes two arguments, one is data and another one is a function.

callback in javascript is another example

callback in javascript, Also known as a higher-order function, is a function that is passed to another function.

Higher-Order Function in Javascript

As i said earlier, the callback in javascript is also known as a higher-order function. some examples of higher-order functions in javascript are map(),reduce() and filter().

Let's take filter() as an example for this article and implement it from scratch.

Let's see how Javascript implements the inbuilt filter() function.

checkUserCountry = ({name, country}) => country === 'US';

const user = [
  {
    name : 'Steve',
    country : 'US'
  },
  {
    name : 'james',
    country : 'UK'
  },
  {
    name : 'stuart',
    country : 'US'
  }
]

const userList = user.filter(checkUserCountry);

console.log(userList);

Above all, filter() function takes a function checkUserCountry which filters based on the country

Now, Let's see how to implement the filter() function from scratch.

Writing our own higher-order function

filter() function loops through an array and passes the value to a function which returns boolean based on the condition.

function filter(arr,fn) {

    let newArr = [];
    for(var i=0;i< arr.length;i++){
      let value = arr[i];

      newArr = fn(value) ? [...newArr,value] : [...newArr]
    }
    return newArr;
} 

filter() function takes two arguments, Array and a function. After that, it initializes a variable newArray

let newArr = [];

After that, we loop through the Array and store the value in the variable value. Pass it to the Argument function fn.

 for(var i=0;i< arr.length;i++){
      let value = arr[i];

      newArr = fn(value) ? [...newArr,value] : [...newArr]
    }

After that, the argument function returns true or false based on the value. and if it returns true, that value will be stored in the newArr.

Finally, we return the newArr from the function.

Complete Code

checkUserCountry = ({name, country}) => country === 'US';

const user = [
  {
    name : 'Steve',
    country : 'US'
  },
  {
    name : 'james',
    country : 'UK'
  },
  {
    name : 'stuart',
    country : 'US'
  }
]


function filter(arr,fn) {

    let newArr = [];
    for(var i=0;i< arr.length;i++){
      let value = arr[i];

      newArr = fn(value) ? [...newArr,value] : [...newArr]
    }
    return newArr;
} 

const userList = filter(user,checkUserCountry)


console.log(userList);

Above all, Higher-Order Function is an important concept in Javascript. One of the main usages of Higher-Order function in javascript is in React(Higher-Order Component)

we will see how to implement higher-order component in React in an upcoming article.

To learn more about Higher-Order Components

Eric Elliot Article on Higher-Order Components

Until then, Happy Coding :-)