Exploring Higher Order Functions, Higher

Exploring Concepts of Higher Order Functions, Higher Order Methods, and Callback Functions

RaviKiran's photo
RaviKiran
·

4 min read

Introduction:

JavaScript being a versatile and dynamic programming language it provides it's programmer with powerful concepts some of them are higher-order functions, higher-order methods, and callback functions. Knowing this concepts will enhance the efficiency of code

Higher Order Function

A higher order function is a function that takes one or more functions as arguments, or returns a function as its result.

Example:

// Higher-order function
function modifyArray(arr, modifierFunction) {
  const modifiedArray = [];

  // Applying the modifier function to each element of the array
  for (let i = 0; i < arr.length; i++) {
    modifiedArray.push(modifierFunction(arr[i]));
  }

  return modifiedArray;
}

// Example modifying function: doubling the value
function doubleValue(value) {
  return value * 2;
}

// Example array
const originalArray = [1, 2, 3, 4, 5];

// Applying the higher-order function with the modifying function
const doubledArray = modifyArray(originalArray, doubleValue);

console.log(originalArray);  // Output: [1, 2, 3, 4, 5]
console.log(doubledArray);   // Output: [2, 4, 6, 8, 10]

Explanation

  1. Higher-order Function: modifyArray

    • The modifyArray function is declared as a higher-order function because it takes two parameters: an array (arr) and a modifying function (modifierfunction).

    • Inside the function, a new array called modifiedFunction is initialized, which will store the results of applying the modifierfunction to each element of the input array.

    • A for loop is used to iterate over each element of the input array (arr).

    • Inside the loop, the modifiedFunction is applied to the current element, and the result is pushed into the modifyArray.

    • Finally, the modified array is returned.

  2. Modifying Function: doubleValue

    • The doubleValue function is an example of a modifying function. It takes a single parameter (value) and returns the doubled value of that parameter.

  3. Example Array: originalArray

    • An example array called originalArray is defined with values [1,2,3,4,5].

  4. Function Invocation and Result Display

    • The modifyArray function is then invoked with originalArray as the input array and doubleValue as the modifying function.

    • The result of the function call is stored in the variable doubledArray.

    • The original and modified arrays are then logged to the console.

  5. Console Output:

    • The original array [1,2,3,4,5] is logged to the console.

    • The modified array [2,4,6,8,10] (each value doubled) is also logged to the console.

Higher Order Method

Higher order method is same as Higher order function only difference is when we create a function and pass it as argument to another function it is called Higher order function,whereas when we pass inbuilt function as argument to a function it is called Higher order method.

When working with arrays, you can use the map(), reduce(), filter(), and sort() methods to manipulate and transform data in an array.

When working with objects, you can use the Object.entries() methods to create a new array from an object.

Example:

// Original array
const numbers = [1, 2, 3, 4, 5];

// Using the map method to square each number
const squaredNumbers = numbers.map(function (num) {
  return num * num;
});

// Output the squared numbers
console.log(squaredNumbers);  // Output: [1, 4, 9, 16, 25]

Explanation

  1. Original Array:

    • numbers is an array containing [1,2,3,4,5].

  2. Higher-Order Method: map

    • The map method is invoked on the numbers array.

    • It takes a function as an argument (a callback function).

  3. Callback Function: Squaring Numbers

    • The provided callback function takes each element (num) of the array and returns its square (num * num).

  4. Result: New Array (squaredNumbers)

    • The map method creates a new array (squaredNumbers) containing the squared values of each element from the original array.

  5. Console Output:

    • The console.log(squaredNumbers) statement outputs the squared numbers: [1, 4, 9, 16, 25].

Callback Functions

A JavaScript callback is a function which is to be executed after another function has finished execution.

A more formal definition would be - Any function that is passed as an argument to another function so that it can be executed in that other function is called as a callback function.

// Synchronous function with a callback
function performOperation(a, b, operationCallback) {
  console.log(`Performing operation on ${a} and ${b}`);

  // Performing the operation synchronously
  const result = a + b;

  // Calling back with the result
  operationCallback(result);
}

// Callback function for displaying the result
function displayResultCallback(result) {
  console.log(`Result: ${result}`);
}

// Using the performOperation function with the displayResultCallback callback
performOperation(3, 5, displayResultCallback);

Explanation

  1. performOperation is a function that takes two numbers (a and b) and a callback function (operationCallback) as parameters.

  2. It logs a message, performs a simple addition operation synchronously, and then invokes the callback function with the result.

  3. displayResultCallback is the callback function that logs the result.

  4. Finally, we call performOperation with the numbers 3 and 5, and we pass displayResultCallback as the callback function.

JavaScript