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.

1const func1 = (data, fnargument) => {
2 const newData = fnargument(data)
3 return newData
6const fnargument = value => {
7 //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.

1checkUserCountry = ({ name, country }) => country === "US"
3const user = [
4 {
5 name: "Steve",
6 country: "US",
7 },
8 {
9 name: "james",
10 country: "UK",
11 },
12 {
13 name: "stuart",
14 country: "US",
15 },
18const userList = user.filter(checkUserCountry)

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.

1function filter(arr, fn) {
2 let newArr = []
3 for (var i = 0; i < arr.length; i++) {
4 let value = arr[i]
6 newArr = fn(value) ? [...newArr, value] : [...newArr]
7 }
8 return newArr

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

1let newArr = []

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

1for (var i = 0; i < arr.length; i++) {
2 let value = arr[i]
4 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

1checkUserCountry = ({ name, country }) => country === "US"
3const user = [
4 {
5 name: "Steve",
6 country: "US",
7 },
8 {
9 name: "james",
10 country: "UK",
11 },
12 {
13 name: "stuart",
14 country: "US",
15 },
18function filter(arr, fn) {
19 let newArr = []
20 for (var i = 0; i < arr.length; i++) {
21 let value = arr[i]
23 newArr = fn(value) ? [...newArr, value] : [...newArr]
24 }
25 return newArr
28const userList = filter(user, checkUserCountry)

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

To Read More

Kubernetes for Nodejs developers

Do you keep hearing the word kubernetes in the tech community and you couldn't u...

TypeScript Interfaces vs Types

In this article, we will see what are interfaces and types and the difference be...

How to find project ideas to practi...

Ever wondered what how to get a real world experience on web development while w...

Building a Production-grade Nodejs,...

This article is the first part of building a production grade nodejs,graphql and...

Modern React Redux Tutorials with R...

This tutorial explain how you can build an application using modern react redux ...

Building a Piano with React Hooks

In this article, we will see how to build a piano with react hooks. Building a P...

TypeScript Basics - The Definitive ...

In this article, we will learn some basics of typescript which helps you to deve...

Here's why podman is more secured t...

In this article we will see about podman and why it is more secured way to run c...

What is gRPC ? How to implement gRP...

Everyone talks about gRPC. Have you ever wonder how it works or how to implement...