Callback Functions in JavaScript Explained - Asynchronous JavaScript

hey guys is collar awesome here and today we are going to learn about coal mechs and it is much easier than you think so let's get started this thing called called XO callback functions came with the concept of asynchronous programming asynchronous programming is by the way when let's say the execution of the functions is independent from the main program flow so let's say the other functions don't have to wait until a certain function is done executing so that basically what asynchronous programming is in contrast synchronous programming is when other functions waits until a certain function is done executing so the entire application has to wait until all the functions are done executed in JavaScript this asynchronous programming concept is pretty much important because most of the JavaScript applications pull data from backends so the functions can take a while to complete your in the application doesn't want to wait until that particular function is done executing so your application might get pretty slow so you don't want to do that so that's why this call backs I introduced in JavaScript so as the name suggests this callback functions are the functions that is executed after a certain function is done executing in JavaScript you can treat functions as objects so just as the way you can pass object as arguments to a function you can pass functions as arguments of another function so that's the way we use callback functions just don't worry if this is confusing we're gonna use a practical example and we'll see how and why called X are used let's say I am developing application and when a user clicks a button I need to get some data from the API so when the user clicks the button the first thing I need to do is to show a load in screen then I need to pull the data from the API then I need to hide the load in the screen and show the data so that's the scenario for that I'm gonna need three functions the first function I'm gonna write is a function for low so in the loading screen let's write that function first function I'm going to end this function show loading screen all right and I'm gonna do a console log with the string loading screen appeared so this is my function for show in the Lord in the screen and I'm gonna need another fine scent for hiding the load in the screen means when the data is ready I'm gonna write that function - I'm going to name that function height lower in screen and I'm gonna do a console log with loading screen hidden like this now I'm gonna write another function for pulling the data from the API I'm gonna name this get data from API so this function pulls data from my back-end or API so the functions like this can take a while to finish its execution because the backend API can be hosted in a separate server so there can be a slight delay until the data is ready so we need to simulate that in our function what I'm gonna do is I'm gonna write a console log with the string of start pulling data I'm gonna write another console.log with the string of finished pulling data so there can be a slight delay between these console logs in order to delay this second console lock I'm going to use this set timeout function in JavaScript and I need to put this console up inside that and I'm gonna use 2000 milliseconds which means two seconds so the second console lock will execute after two seconds of the first console log that's how it works now this function is like a real API call because it takes some time to finish the execution now let's execute these functions according to the order we want them to execute when the user clicks the button the first thing I need to do is show the loading screen so first I need to execute show load in the screen function like this and secondly what I need to do is I need to run get data from the API function and the third thing I want to do is I need to hide the load in the screen when the data is ready like this so first I need to see a loading screen then I need to in the background I need to run the get the data from the API function then once the data is ready I need to hide the load in the screen so that user will see the data and to make it clear I'm gonna number these console logs so the first one is loading the screen appeared then started pulling data and finish pulling data the last one is number 4 loading screen so we want our console logs to appear in this order let's run this code and let's see what happens as you can see we get the first two console looks correct order but for the third one we get number four and for the fourth one we get number three loading screen disappeared even before their eyes ready so that's not what we want right we want our load in the screen to hide when the data is finished loading but in this case our loading screen disappeared even before the data is ready why is that well this is because this get data from API function took a while to complete so this is where asynchronous programming comes in this is where we want call backs so let's fix this issue with the callback function like I said in JavaScript you can treat functions as objects so what I'm going to do now is I'm gonna pass a parameter to this get data from API function and I'm gonna name that parameter callback you can name it with whatever you want and this parameter can be a function so I'm gonna call this function called that function right after when the application finish pull in data like this and instead of calling this height loading screen function like this I'm gonna remove that and I'm gonna pass that function as the argument of get data from API just like this so we passed our function hide loading the ice-cream function as the argument of get data from API function so we call that function once it's finished pulling out data so that's what happens here now let's test this again and let's see what happens yes now we get all four cans or locks in the correct order because now this height loading screen function is called as the callback function of get data from API actually you don't have to define this height loading data screen function and instead you can just pass an anonymous function to this get data from a bi function like this Oh an arrow function like this heíd loading screen let's test this again yeah we get the result we want so guys that's everything about callbacks callbacks are really important when you are dealing with these kind of scenarios especially when you are using something like node.js you may want to use so much of callback functions so I hope you enjoyed this video hit the subscribe button if you haven't already and please let me know if you have any concerns or questions and we'll see you guys in the next video [Music]

Channel: coder aweso.me

Views: 4,047

Rating: 4.9751554 out of 5

Keywords: web development, javascript, javascript callback functions, callback functions, async javascript, callbacks, javascript callbacks, asychronous javascript, programming, javaScript tutorials, Callback functions in JavaScript, Asynchronous Programming, web development 2020, Callback functions in Real life, web development tutorial, web developer

Id: 2vcyfcuQDfw

Length: 11min 55sec (715 seconds)

Published: Fri May 15 2020