A function is a reusable piece of code introduced to avoid repetitive code and improve code readability and quality. In Javascript, functions are first-class citizens. Here we can take a function as an argument or return a function. This ability to accept and return a function makes it first class citizens in JavaScript. Higher order functions are functions that take a function as parameter and return a funcction as output.
Function as first-class citizens:
Some operations performed on functions in javascript which make it feel like first-class citizens are
- Store function in a variable.
- Store function in array.
- Accept another function as argument or as a return from a function.
- Set a function as object property.
Higher order functions:
A function which accepts another function as an argument or as a return from a function is higher order function.
Function that takes another function as argument:
A function which can be passed as an argument to another function is called callback functions. In javascript functions are objects, so they can be passed as an argument.
function getname(myname) {
// Invoke the passed function
myname();
}
// Invoke the function by passing a function as an argument
getname(function(){
console.log('Abaython');
});
Output:Abaython
Return function:
Here a function is returned from a function.
// Define a function that returns a function
function returnFunc() {
return function() {
console.log('Abaython');
}
}
// Take the returned function in a variable.
const fn = returnFunc();
// Now invoke the returned function.
fn(); // Abaython
// Alternatively
returnFunc()(); // Abaython
Output:
Abaython
Abaython
In JavaScript we have forEach(), map(), reduce() and filter() functions which are built-in higher order functions.
.forEach():
Iterate through an array of elements. It is used only with arrays. It takes a callback function with elements, index and array.
let sum = 0;
const numbers = [10, 20, 30, 40, 50];
numbers.forEach(num => sum+=num)
console.log(sum);
Output: 150
map():
Iterate an array and modify the elements of array. It takes a callback function with elements, index, array parameter and return a new array.
const num = [10, 20, 30, 40, 50]
const double = num.map((num) => num + num)
console.log(double)
Output: [ 20, 40, 60, 80, 100 ]
filter():
filter a set of elements which satisfies a certain condition and return a new array.
const num = [10, 20, 30, 40, 50]
const num1 = num.filter((num) => num>30)
console.log(num1)
Output: [ 40, 50 ]
reduce():
The reduce method executes the callback function on each member of the calling array which results in a single output value. The reduce method accepts two parameters: The reducer function (callback) and an optional initialValue.
The callback function in turn accepts the following four parameters:
- Accumulator
- Current value
- Current index
- Source array
const num = [10, 20, 30, 40, 50]
const sum = num.reduce((acc, cur) => acc + cur, 0)
console.log(sum)
Output: 150
In a nutshell, higher order function are helpful in making a cleaner, readable and quality code.
