Exploring Higher Order Functions in JavaScript Arrays

A function is a HOF if any of the condition is true -

1. It accepts another function as an argument.

2. It returns a function

Why to use HOF?

HOF are essential for writing clean, reusable, and maintainable code. They allow us to abstract common operations like transforming, filtering, or reducing data into reusable functions that accept other functions as arguments.

How an HOF looks like?

const sum = (a,b) => {
    return a+b;
}
const diff = (a,b) => {
    return a-b;
}

const calculate = (func, a, b) => {
    return func(a,b)
}

console.log(calculate(sum, 2, 5));

Here in the above example, the calculate function is a HOF as it accepts a function in arguments.

Important things to know of HOF

1. All these methods do not deep copy

2. They work on references

3. Objects inside arrays remain the same objects

Commonly Used HOF in JavaScript

1. map()

   It accepts - element, index, array

   It returns - array of same length

   Use case

   It is used for Data transformation.

   Time Complexity

   O(n)

   Example

    const double = (x) => x * 2;
   
    const transform = (func, arr) => {
      return arr.map(func);
    };
   
    transform(double, [1, 2, 3]); 
    // [2, 4, 6]
   

   Can mutate elements inside - Yes

2. filter()

   It accepts - element, index, array

   It returns - New array (variable length)

   Use case

   Search results

   Removing invalid data.

   Time Complexity

   O(n)

   Example

    const isEven = (x) => x % 2 === 0;
   
    const select = (func, arr) => {
      return arr.filter(func);
    };
   
    select(isEven, [1,2,3,4]); 
    // [2,4]
   

   Can mutate elements inside - Yes

3. reduce()

   It accepts - accumulator(the value from previous callback function call, currentValue, index, array

   It returns - Number, Object, Array, String (Any of these)

   Use case

   Sum / product

   Grouping data

   Frequency counts

   Time Complexity

   O(n)

   Example

    const sumReducer = (acc, curr) => acc + curr;
   
    const calculate = (func, arr, init) => {
      return arr.reduce(func, init);
    };
   
    calculate(sumReducer, [1,2,3], 0); 
    // 6
   

   Can mutate elements inside - Yes

4. find()

   It accepts - element, index, array

   It returns - Single element or undefined

   Use case

   Finding a unique value

   Finding the first value that matches a certain condition

   Time Complexity

   O(n)

   Best case O(1) - It stops early if the condition is met

   Example

    const greaterThan5 = (x) => x > 5;
   
    const findOne = (func, arr) => {
      return arr.find(func);
    };
   
    findOne(greaterThan5, [1,2,4,5,7,6,8]); // 7
    //First element that mathces the condition is returned
   

   Can mutate elements inside - Yes

5. forEach()

   It accepts - element, index, array

   It returns - Nothing (As it is used for accessing the data elements one by one)

   Use case

   Logging

   API calls

   Time Complexity

   O(n)

   Example

    const log = (x) => console.log(x);
   
    const process = (func, arr) => {
      arr.forEach(func);
    };
   
    process(log, [1, 2, 3]);
   

   Can mutate elements inside - Yes

6. every()

   It accepts - element, index, array

   It returns - Boolean

   Use case

   Validation

   Time Complexity

   O(n)

   Example

    const isPositive = (x) => x > 0;
   
    const checkAll = (func, arr) => {
      return arr.every(func);
    };
   
    console.log(checkAll(isPositive, [1, 2, 3]));
    //returns true as all elements are greater than 0
   

   Can mutate elements inside - No

7. some()

   Similar to every(), returns true even if any element matches the condition.

   It accepts - element, index, array

   It returns - Boolean

   Use case

   Search flags

   Time Complexity

   O(n)

   Example

    const hasEven = (x) => x % 2 === 0;
   
    const checkAny = (func, arr) => {
      return arr.some(func);
    };
   
    checkAny(hasEven, [1,3,4]); 
    //returns true
   

   Can mutate elements inside - No