Higher-Order Function in Javascript - Javascript weekly
Tags: showdev, webdev, tutorial, beginners
Published: 2019-08-10 19:30:19

---
title: Higher-Order Function in Javascript - Javascript weekly
published: true
description: Higher-Order Function in Javascript - Javascript weekly
tags: showdev,webdev,tutorial,beginners
canonical_url: https://cloudnweb.dev/2019/08/higher-order-function-in-javascript-javascript-weekly/
series : javascript
---
<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/07/prototypal-inheritance-javascript-weekly/">Prototypal Inheritance - Javascript</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/07/currying-in-javascript-javascript-weekly/">Currying in Javascript</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/07/understanding-closures-in-javascript-javascript-weekly/">Understanding Closures in Javascript</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>What is Higher-Order Function?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's understand this concept with a simple example. </p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const func1 = (data,fnargument) => {
  const newData = fnargument(data);
  return newData
}

const fnargument = (value) => {
  //Do some Logic Here
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>func1  </strong>takes two arguments, one is data and another one is a function.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>callback in javascript is another example</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>callback </strong>in javascript, Also known as a higher-order function,  is a function that is passed to another function.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Higher-Order Function in Javascript</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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 <strong>map()</strong>,<strong>reduce()</strong> and <strong>filter()</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's take <strong>filter()</strong> as an example for this article and implement it from scratch.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's see how Javascript implements the inbuilt <strong>filter()  </strong>function.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>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);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Above all,<strong> filter()</strong> function takes a function <strong>checkUserCountry</strong> which filters based on the country</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, Let's see how to implement the <strong>filter()</strong> function from scratch.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3> <strong>Writing our own higher-order function</strong> </h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong> filter()</strong> function loops through an array and passes the value to a function which returns boolean based on the condition.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>function filter(arr,fn) {

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

      newArr = fn(value) ? [...newArr,value] : [...newArr]
    }
    return newArr;
} </code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>filter()</strong> function takes two arguments, <strong>Array </strong>and a <strong>function</strong>. After that, it initializes a variable <strong>newArray</strong></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>let newArr = [];</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>After that, we loop through the Array and store the value in the variable <strong>value</strong>. Pass it to the Argument function <strong>fn</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code> for(var i=0;i&lt; arr.length;i++){
      let value = arr[i];

      newArr = fn(value) ? [...newArr,value] : [...newArr]
    }</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>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 <strong>newArr</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Finally, we return the newArr from the function.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Complete Code</h4>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><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&lt; arr.length;i++){
      let value = arr[i];

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

const userList = filter(user,checkUserCountry)


console.log(userList);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Above all, Higher-Order Function is an important concept in Javascript. One of the main usages of Higher-Order function in javascript is in <strong>React</strong>(Higher-Order Component)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we will see how to implement higher-order component in React in an upcoming article.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To learn more about Higher-Order Components</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Eric Elliot <a href="https://medium.com/javascript-scene/do-react-hooks-replace-higher-order-components-hocs-7ae4a08b7b58">Article </a>on Higher-Order Components</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Until then, Happy Coding :-)</p>
<!-- /wp:paragraph -->