Skip to main content

Command Palette

Search for a command to run...

Higher Order Functions (HOF)

Published
3 min read

A function that: Accepts another function as an argument, Or Returns a function.

const diameter=function(radius){
    return 2*radius;
}

Array.prototype.calculate = function(logic) {
    const output = [];
    for (let i = 0; i < this.length; i++) {
        output.push(logic(this[i]));
    }
    return output;
}

const radius = [10,20,30,40];
console.log(radius.calculate(diameter));

Array.prototype.calculate is the Higher-Order Function and diameter is callback function

Most array HOF callbacks receive:

(element, index, array)

Order is ALWAYS:

element → current item

index → position

array → original array

1. forEach

Perform action on each element (printing, updating external state)

Syntax : radius.forEach((element, index, array) => {})

Returns --> undefined (does not return anything)*

Mutates --> No (but we can mutate manually)

let nums = [1, 2, 3];

nums.forEach((element,index,arr) => {
  console.log(element);
});

2. map

It takes an array, applies a "callback" function to every single item, and return a new array of the exact same length, leaving the original array untouched.

array.map((element, index, array) => element*2) // double

const radius = [2, 3, 4, 5];
const areas = radius.map(r => Math.PI * r * r);
const diameters = radius.map(r => 2 * r);

Returns: New array (same length)
Mutates: No ( return new array does no change OG array)

3. filter

While Map is about transformation, Filter is all about selection.

It looks at every element in an array, asks a "Yes/No" question (a condition element%2==0), and only lets the "Yes" items through to the new array.

array.filter((element, index, array) => boolean)

let nums = [1, 2, 3, 4];
let evens = nums.filter(n => n % 2 === 0);

Returns : New array (filtered), smaller or equal length compare to OG array
Mutates : No

4. find

While filter gives you all matches in a new array, find gives you only the first match as a single value.
Find first matching element.

array.find((element, index, array) => boolean)

const radius = [2, 3, 4, 5];

// first radius that is greater than 3

const firstBigOne = radius.find(r => r > 3);
console.log(firstBigOne); // 4 

// (Even 5 also matches, 'find' stops at 4)

Returns: Element or undefined(if no element met the condition)

Mutates: No

5. reduce

Reduce array → single value (sum, object, array)

Reduce is different. It takes two main arguments, and its callback function takes four parameters.

array.reduce((acc, curr, index, array) => newAcc, initialValue)

The return type of .reduce() is determined by the Initial Value you provide as the second argument. Here 0, which is Number.

let nums = [1, 2, 3];

let sum = nums.reduce((acc, curr) => acc + curr, 0);

Returns: ANYTHING (number, object, array)

Mutates: No

6. every

Check if ALL elements satisfy condition.

array.every((curr, index, array) => condition)

[2, 4, 6].every(n => n % 2 === 0); // true

Returns: Boolean (true/false)

Mutates: No

7. some

Check if AT LEAST ONE element satisfies a condition.

array.some((curr, index, array) => condition)

let nums = [1, 2, 3, 4];

let hasEven = nums.some(n => n % 2 === 0); 
// Output: true (because 2 and 4 are even)

Returns: Boolean (true/false)

Mutates: No