JavaScript Higher Order Functions Explained

In JavaScript, higher-order functions are functions that can take other functions as arguments or return functions as their results. This concept is derived from functional programming paradigms and is a powerful feature of JavaScript. Here’s a breakdown of what higher-order functions entail:

1. Taking Functions as Arguments:

Higher-order functions can accept other functions as parameters. These functions can then apply the passed function to some data or use it in some computation.

    function applyOperation(operation, x, y) {
        return operation(x, y);
      }
      function add(x, y) {
        return x + y;
      }
      function subtract(x, y) {
        return x - y;
      }
      console.log(applyOperation(add, 5, 3)); 
      console.log(applyOperation(subtract, 10, 4));

2. Returning Functions: 

Higher-order functions can also return functions. This allows for creating functions dynamically based on certain conditions or parameters.

function createMultiplier(multiplier) {
        return function (x) {
          return x * multiplier;
        };
      }
      const double = createMultiplier(2);
      const triple = createMultiplier(3);
      console.log(double(5)); 
      console.log(triple(5)); 

3. Use Cases: 

Higher-order functions are versatile and can be used for various tasks such as abstraction, encapsulation of behavior, asynchronous programming (using functions like 'setTimeout' or 'fetch'), event handling, and more. They promote reusability and cleaner code by separating logic into smaller, composable functions.

4. Functional Programming: 

JavaScript's support for higher-order functions aligns with functional programming principles, where functions are treated as first-class citizens. This means functions can be assigned to variables, passed as arguments, and returned from other functions, allowing for functional composition and more declarative code.
In essence, higher-order functions provide a flexible way to manipulate functions, enabling more expressive and concise code in JavaScript.

Examples of built-in Higher-order functions

JavaScript provides several built-in higher-order functions that are commonly used in functional programming and everyday coding. Here are some examples:

1. Array.prototype.map:

- 'map' applies a function to each element in an array and returns a new array with the results.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // Outputs: [2, 4, 6, 8]

2. Array.prototype.filter:

- 'filter' creates a new array with all elements that pass a test specified by a function.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(x => x % 2 === 0);
console.log(evens); // Outputs: [2, 4]

3. Array.prototype.reduce:

- 'reduce' applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, current) => acc + current, 0);
console.log(sum); // Outputs: 10

4. Array.prototype.forEach:

- 'forEach' executes a provided function once for each array element.

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num * 2));

// Outputs:
// 2
// 4
// 6

5. Function.prototype.bind:

- 'bind' creates a new function that, when called, has its 'this' keyword set to a provided value.

const module = {
        x: 42,
        getX: function () {
          return this.x;
        }
      };
      const boundGetX = module.getX.bind(module);
      console.log(boundGetX()); // Outputs: 42

6. setTimeout:

- 'setTimeout' executes a function after a specified number of milliseconds.

function greet() {
        console.log("Hello, world!");
      }
      setTimeout(greet, 2000); // Outputs 'Hello, world!' after 2 seconds

These are just a few examples of higher-order functions in JavaScript. They demonstrate how functions can be passed around and manipulated to achieve various tasks efficiently and concisely.