Callback, Callback, Callback Functions in Javascript
Finally, we have made our way to Module 3 at the Flatiron School! And guess what that means?!? Javascript!! To be frank I am still trying to familiarize myself with Javascript and find my own rhythm and tune to this essential computer language. Javascript definitely reminds me of myself….all over the place!!! Let me summarize it to this clip my coach showed me.
Yeah, that is my own visual of what Javascript reminds me of. However, while learning about it I came across callback functions which is what this post is about, so let’s dive right in!
What exactly is a callback function?
“A callback function is a function that is passed as an argument to another function but its expected to be called back (or executed ) at a later time.” One of the cool things about JavaScript is that we can pass functions as parameters and call them again inside a function.What does that look like, you say? I’ll be glad to show you.
Synchronous & Asynchronous Callback Functions
So far I have come across two ways to execute a callback function. The first way is synchronous callback, where each function is being executed from top to bottom. A great way to think of it is when you are making a thanksgiving dinner and you have plenty of items on the menu. Common sense will tell you to multitask as much as you can to keep everything in rhythm but that doesn’t work with synchronous callbacks, but imagine baking a turkey and waiting for that to be done (we all know how long that can take) , when that task is completed then it goes to the next item on the menu. Just imagine the temperature of that thanksgiving meal when it is all said and done! That is finna be a wack thanksgiving dinner, I’m sorry.
So thats pretty much what is happening with synchronous, one- after- the -other, nothing can happen until the initial task is complete. I’m sure someone may have found a benefit for the synchronous callbacks but if you are fetching from a large database, that can take a loooooonnngggg time before the rest of the code can run! Like she said….
We really don’t! But that is where the second type comes in! Which is Asynchronous callbacks, where the code doesn’t have to wait and it can continue to run. It allows those cases where the fetch can happen in the background but everything else can still run. Essentially, we don’t have to wait for that turkey to finish baking in the oven before proceeding to the other items on the menu. This is the one of the few times multitasking can work to our favor.
I found this cool image that visualizes asynchronous callbacks for my visual folks.
In Summary
We’ve gotten a basic idea of what callback function are and the types that are available to us. Below I’ve shared some references for those that want to dig a bit deeper and learn more in depth. As you can tell I am still learning more about this and I am open to more resources that will allow me to dive in and be more comfortable using callback functions. So in conclusion:
- A callback function is a function that gets passed as an argument to a parent function.
- A callback can be used for synchronous or asynchronous execution.
- Callback allow us to write clean code and not have us continuing to repeat ourselves. We can easily call that function into another one if we eventually need said function to do something the callback is able to do.
