In present time JavaScript projects, functional and async programming is becoming more relevant. when we learn about those concepts we get get to know about callbacks or HOC (higher order functions). For eg. the .filter() method accepts a callback function thus creating a new array with the conditions passed into it. with this lets find out what a call back function is and how it works

Callback Function In Simple words callback function is function that is passed as an argument to another function. In the later stages it would be involved in some outer function also to complete some kind of actions.

callbacks are also defined as HOC's which can take a functions as an argument or return a function as a result.

In JavaScript the functions are first class objects so it means functions can be passed a arguments like any other objects in JavaScript. Those functions are not initiated immediately but yes they run at a later stage of the function when they are required hence the name callback was given.

Why we need callback ?

Ok ! Now we have a basic understanding that what is a callback now we need to figure out why we need it. As we all know that JavaScript is event-driven so it means that anything thing that happens is based on events like mouse click, scroll, reloading the page etc. When JavaScript code has some events involved it means code execution would be according to the events triggered not according to the top-bottom approach we generally use. lets write a small code to see what a event looks like

document.addEventListener(‘click’,doSomething);

this is a general example to see what a event looks like.

Callback functions in synchronous code

function myCallback(){return 3;}

function myFunction(data) {
 // logic to be constructed here  
}

myFunction(myCallback)

let's start from step one and create a function that has three parameters first and second are numbers and third one is callback function

function addition(a,b, callback) {
  let result = callback(a, b)
}

function callback (a,b) {
return a + b
}

addition(5,8, callback)

By seeing this above code we can understand what's happening here :

• First we have initialized a function which can take three params two numbers to add and a callback function

• Then we have initialized the call back function which will take two params add the numbers and return the result

This above example is very easy demonstration of how call back works and what the concept behind it , but this seems to be a great way to understand the concept of callback in a easy way.

Callback functions in asynchronous code

Callback function are mostly used in asynchronous code

function first() {
setTimeout(function(){ console.log("first") }, 1000)
}

function second() {
console.log("second")
}

first()
second()

second
first

callback functions are just like any other function , so we can also use arrow function with them

setTimeout(() => { console.log("test")}, 1000)

callbacks with functional programming

If you are familiar with .map, .reduce, .filter these function take callback functions as first parameter

let arr = [2, 4, 6, 8];

function double(x) { return x*2 }

let anotherArr = arr.map(double)
console.log(anotherArr) // [4, 8, 12, 16];