Higher Order & Callback functions
What is higher order function
Normally function takes number/string/boolean/array/object (data) as arguments(inputs) or
returns these types of data as output. But Higher order functions are those functions that either
take other functions as arguments(inputs) or return another function as output or both.
What is callback function
A function which is passed as an argument(input) to another function is known as callback
function. We use callback function when we want to execute some function right after another
task completed. This callback function is used to call inside another function based on
requirement. We need callback functions due to JavaScript has many asynchronous operations
means these operations will not block remaining lines execution.so when you want to execute
any function after asynchronous activity we pass that function as input and will call inside.
function first(fun) {
console.log("This is first function")
fun()
} Higher Order Function
first(second)
Call back Function
function second() {
console.log("This is second function")
In the above code we are passing function second as input to function first when
calling,(fun& second both are same functions) so first is higher order function & second is callback
function which will be executed inside that higher order function at some point of time like after
completion of some task or any event occurs when event binding is done as below.
@csworldtelugu
h1.addEventListener('click' ,showpopup)
function showpopup() {
//code
}
Higher order function Example for returning another function:
function wish(txt) {
return (name) => {
console.log(“Hello " + name + txt)
let gm = wish("good morning");
gm("John"); // Hello John good morning
gm("Ram"); // Hello Ram good morning
In the above function, an arrow function is returned from wish function which we can call later to
wish any person. Initially to wish() passing some text, in the return function we are fixing that text,
but later we can call that function just to wish any person with their name as input. In the below
same wish function is calling with good afternoon now wish function return a function with text
as good afternoon fix.
let gf = wish("good afternoon");
gf("John"); // Hello John good afternoon
gf("Ram"); // Hello Ram good afternoon
@csworldtelugu
Another Example of higher order & callback function
function arrayAnyOperation(arr, cb) {
for (ele of arr) {
cb(ele)
}
}
let arr = [10, 20, 30, 40, 50]
function twice(num) {
console.log(num + ":" + (num + num))
}
function cube(num) {
console.log(num + ":" + (num * num * num))
}
function square(num) {
console.log(num + ":" + (num * num))
}
console.log("twice")
arrayAnyOperation(arr, twice);
console.log("trice")
arrayAnyOperation(arr, trice);
In the above example we have created arrayAnyOperation() as higher
order function which will take an array & a function that will be called for each elements of array.
We can pass any operation to be executed for array elements. So higher order functions also good
for code reusability.
@csworldtelugu
Frequently used higher order functions in JavaScript
• map()
• filter()
• reduce()
• sort()
• setTimeOut()
• setInterval()
• forEach()
@csworldtelugu
