Higher-order functions are the functions that operate on other functions by taking them as parameters or returning them. Simply put, a higher-order function is a function that takes other functions as arguments or returns functions as their results.
Higher-order functions are widely used in Javascript. Here are some Higher-order functions built into Javascript that you have probably come across:
1. map() function
map() creates a new array by calling the callback function provided as an argument on each input array element.
For example: create an array including name and year of birth from the array personArr1.
The source code NO Higher-order function:
|
const personArr1 = [ {name: 'Linh', age: 18, sex: 'Female'}, {name: 'Nam', age: 20, sex: 'Male'}, {name: 'Vy', age: 17, sex: 'Female'} ]; const personArr2 = []; for(let i = 0; i < personArr1.length; i++) { personArr2.push({name: personArr1[i].name, yearOfBirth: 2024 - personArr1[i].age}); } console.log(personArr2); // [{name: 'Linh', yearOfBirth: 2006}, { name: 'Nam', yearOfBirth: 2004}, { name: 'Vy', yearOfBirth: 2007}] |
The source code HAS Higher-order function:
|
const personArr1 = [ {name: 'Linh', age: 18, sex: 'Female'}, {name: 'Nam', age: 20, sex: 'Male'}, {name: 'Vy', age: 17, sex: 'Female'} ]; const personArr2 = personArr1.map(person => { return {name: person.name, yearOfBirth: 2024 - person.age}; }); console.log(personArr2); // [{name: 'Linh', yearOfBirth: 2006}, { name: 'Nam', yearOfBirth: 2004}, { name: 'Vy', yearOfBirth: 2007}] |
2. filter() function
filter() creates a new array with the elements that pass the test condition provided by the callback function.
For example: create an array whose gender is female from the array personArr1
The source code NO Higher-order function:
|
const personArr1 = [ {name: 'Linh', age: 18, sex: 'Female'}, {name: 'Nam', age: 20, sex: 'Male'}, {name: 'Vy', age: 17, sex: 'Female'} ]; const personArr2 = []; for(let i = 0; i < personArr1.length; i++) { if (personArr21[i].sex === 'Female') { personArr1.push({...personArr1[i]}); } } console.log(personArr2); // [{name: 'Linh', age: 18, sex: 'Female'}, {name: 'Vy', age: 17, sex: 'Female'}] |
The source code HAS Higher-order function:
|
const person1 = [ {name: 'Linh', age: 18, sex: 'Female'}, {name: 'Nam', age: 20, sex: 'Male'}, {name: 'Vy', age: 17, sex: 'Female'} ]; const person2 = person1.filter(person => person.sex === 'Female'); console.log(person2); // [{name: 'Linh', age: 18, sex: 'Female'}, {name: 'Vy', age: 17, sex: 'Female'}] |
Besides that, there are some other Higher-order functions such as: reduce(), sort(), forEach(),....
Additionally, you can create a Higher-order function like the example below:
For example: find the youngest female person from the array personArr1
|
const personArr1 = [ {name: 'Linh', age: 18, sex: 'Female'}, {name: 'Nam', age: 20, sex: 'Male'}, {name: 'Vy', age: 17, sex: 'Female'} ]; const getGirls = persons => (persons.filter(per => per.sex === 'Female')); const minAge = persons => (Math.min(...persons.map(per => per.age))); const getYoungestGirl = persons => ( getGirls(persons).filter(person => person.age === minAge(getGirls(persons))) ); console.log(getYoungestGirl(person1)); // [{name: 'Vy', age: 17, sex: 'Female'}] |
Conclusion:
One of the biggest benefits of Higher-order functions is that we can break them down into small logical functions. Then combine them to create more complex functions, minimizing errors during the coding process. And best of all, other developers can easily read and understand the code when maintaining it. I hope it will be of some help to those of you who are learning Javascript.
References:
https://www.w3schools.com/js/js_functions.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
https://www.freepik.com/free-photo/html-css-collage-concept_36295536.htm#fromView=search&page=2&position=6&uuid=f3990617-3357-4a34-a74a-45f3190bd796 (image source)