Higher Order Functions (HOF)
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