Difference Between Higher-Order Functions and Callbacks

There is always some confusion between the Higher-Order functions and callback functions.

High-order functions are functions that can accept other functions as arguments or return functions as output. Examples of high-order functions include map, filter, and reduce in JavaScript's array methods.

Callbacks are functions that are passed as arguments to another function and are invoked inside that function. They are commonly used in event handling, asynchronous programming (like setTimeout), and in high-order functions like map, filter, and reduce.

// High-order function
function doOperationOnArray(array, operation) {
  return operation(array);
}

// Callback function
function doubleArrayValues(arr) {
  return arr.map((num) => num * 2);
}

const myArray = [1, 2, 3, 4, 5];

// Using the high-order function with the callback
const doubledValues = doOperationOnArray(myArray, doubleArrayValues);

console.log(doubledValues); // Output: [2, 4, 6, 8, 10]

// High-order function returning a function
function createMultiplier(factor) {
  return function (number) {
    return number * factor;
  };
}

// Using the high-order function to create a new function
const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // Output: 10
console.log(triple(5)); // Output: 15