What is a callback in JavaScript?
A function passed as an argument to another function is known as a callback. JavaScript considers functions to be objects. Functions can therefore return other functions and accept functions as arguments. Higher order functions are those that perform this. A callback function is any function that receives an argument.
How do you create a callback function in JavaScript?
Here I have created an easy example. A message has to be logged to the console, although it should be there after three seconds.
A built-in JavaScript method called "setTimeout" calls a function or evaluates an expression after a predetermined amount of time (in milliseconds). As a result, after 3 seconds, the "message" function gets invoked in this case. 1000 milliseconds make up one second. The message function is an example of a callback function.
Callback as an arrow (=>)
You can also write callback function as an ES6 arrow function.
Why do we need a callback function?
Because JavaScript is a synchronous language, its code would execute in a top-to-bottom order. We frequently get across situations where we need our code to execute after a certain condition has been met, but JavaScript synchronous setup makes this impossible. And this is when a callback is required. Callbacks allow us to run JavaScript asynchronously and ensure that our condition is met before any code is executed. Callback functions are necessary because many JavaScript actions are asynchronous, which means they don't actually stop the program or a function from running until they are finished. Rather, it will operate in the background as the other code is run.
The main objective of a callback is to run code in response to an event. These actions, like typing or mouse clicks, may have been initiated by the user. You can tell your application to "run this code every time the user clicks a key on the keyboard" by using a callback.
Asynchronous Callback Function
We will start by defining an asynchronous activity. Let's say you need to go to the salon to get your hair dyed and then go to the bank to withdraw some money. You first go to the salon and have the stylist add hair dye to your hair, which will take approximately 20 minutes. The finished result will take an hour. You decide to drive 20 minutes to the bank to make the withdrawal rather than spending an hour sitting on a chair waiting to have the dye washed out. Realizing that you still have some time, you quickly stop by a coffee shop to pick up a few things. Finally you go back to the salon to have your hair washed out and styled. In the above example you continued to do other things as hair dye was doing its job. This is the main purpose of asynchronous activity. One program execution does not happen sequentially to other program executions. JavaScript is a single threaded language, if a task is taking long time for example downloading some files. All the other tasks mentioned after the downloading code will be performed during that time. We use Asynchronous JavaScript(Callbacks,Promises and Async/Await) for executing async commands in a systematic order.
Here in the console you can see start and end executed first, mid executed after 3 seconds.
_
Callbacks in Array Functions_
The array operations map(), reduce(), filter(), forEach(), and others are probably familiar to you. These functions all make use of callbacks. Each of them will call the callback method after iterating through an array of items. Down below is a forEach example ().
Wrap it up
A callback is a function that isn’t immediately executed, but it is passed to another function as an argument and then it is 'called back' at a later point when the conditions are met.
Depending on the use case, callback functions can be used to inform the caller. Callbacks are also used to execute specific actions in response to the success or failure of other tasks.
Callbacks play a crucial role in JavaScript. The flow and usage can initially seem difficult, but hopefully this blog post have made it easier!
Top comments (0)