Let’s Callback JS.

?? What is callback function ??

→ A callback function is a function which is passed as an argument to second function, which is invoked inside the second function at some point to execute some action. But, sometimes callback gets difficult to write in the code. So to make it simple, let’s first start with knowing the syntax of arrow function and its similarities with regular function.

• ARROW FUNCTION

// this is an arrow function with no parameters.
const myName = () => {
console.log("XYZ")
} 

The above arrow function in the form of a regular function will be like this :-

function myName(){
console.log("XYZ")
}

Now with parameters , the equivalent arrow function and regular function will be like this:-

//Arrow Function                |        //Regular Function
                                |
const myName =(personName) =>{  |   function myName(personName){
console.log(personName);        |   console.log(personName);
}                               |   }

Decoding the above two syntax:-

• In regular function , to specify it we use ‘function’ keyword whereas in Arrow function , => (arrow) specify that is a type of function.
• myName is the function name.
• myName(personName){…} of the regular function is equivalent to myName = (personName) =>{…} in the arrow function

As there are some difference also between the arrow and regular function, which can be the topic to be discussed in the future post. For the time being, it is important to keep the focus on understanding the how, when and why to use callback function.

?? How to use callback function ??

To use callback function we just need to pass a regular function or an arrow function. But sometimes , a regular function has to be wrapped into an arrow function to run the code . Let me show you through examples : -

function firstPerson(){
console.log("The person name is ","XYZ");
}
function secondPerson(){
console.log("The person name is ","ABC");
}
function showUserName(nameFunction){
nameFunction();
}
showUserName(firstPerson);
showUserName(secondPerson);

Explanation :- In the above example, there is two function of which one just prints a “XYZ” name whenever invoked and another one is just taking a function (a callback function) as a argument to the parameter itself and invoking(calling) that function inside itself.

→ Decoding the above syntax for simplicity:-

//function firstPerson in the form of arrow function can be written as :-
const firstPerson = () => {
console.log("The person name is ", "XYZ");
}
//If we pass the function firstPerson as an argument to the function //showName parameter then nameFunction parameter will be embedded //like the following ways:-
nameFunction = () => {
console.log("The person name is ","ABC");
}
// Same is for secondPerson function.

NOTE:- ‘firstPerson’ has been omitted in embedding process, it is because of when argument is assigned to the parameter ,argument variable name gets equal to parameter name.

As ,it can be seen that to print different names we are using different function but what if we just want to use just one function with a ‘name’ parameter which will print different name on calling it. That function will look like this:-

function personName(person){
console.log("the person name is ",person);
}

Now, if we try to pass personName function to the showName function as an argument most of the beginner will pass it like the following way:-

showName(personName("ABC"));

This will subsequently throw an error saying ‘ nameFunction is not a function
at showUserName’ and a focused reader till this point may object that if we decode the personName(“ABC”) as done in the above process then it is correct and should not have any error but here , what is happening is that we are invoking the personName function and not passing it as an argument to showName function. Thus, the correct way will be :-

showName(() => personName("ABC"));

Now , on decoding the syntax you will get ‘nameFunction ‘parameter as a function. Hence, this way argument is a callback function.

?? When to use callback function ??

If the value can be returned immediately then yes, there is no need for a callback. As you infer, callbacks are useful in situations wherein a value cannot be returned immediately for whatever reason (perhaps it is just a long running operation which is better performed asynchronously).The callback approach allows the caller to decide how the individual chunks of data will be processed or assembled into a larger whole.

?? Why to use callback function ??

JavaScript runs code sequentially in top-down order. However, there are some cases that code runs (or must run) after something else happens and also not sequentially. This is called asynchronous programming.

Callbacks make sure that a function is not going to run before a task is completed but will run right after the task has completed. It helps us develop asynchronous JavaScript code and keeps us safe from problems and errors.

Conclusion…

Due to emergence of new features in Javascript, callback function technique can be replaced by async/await while dealing with promises but callback function is still a better practice to follow and can come in handy in your further learning process of web development. There are different methods also on how to use callback function but , my focus was to explain that with reference to arrow function. I hope this article helps you understand what they actually do and how to work with them easier.