Async JavaScript Callback Functions, Error Handling and Callback Hell

hey what's going on guys welcome back to another video and in this video we are going to talk about what is call back function and callback hell in javascript we will understand how we do asynchronous tasks using callback as callback themselves being a synchronous in nature and last we will discuss what is a good way of handling errors on callback so if this sounds interesting then watch the video till the end also you can check out my video on javascript sync and async code execution to understand this video better i will add the link in the description below also make sure you subscribe my channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] all right guys so let's understand what is this callback function we know that there are regular functions which we usually write in our code but then what is this special function which is called as a callback function so a callback function is a function which is passed as an argument into an another function and the other function will execute this callback function at later point of time so whenever i say a callback function most of the javascript developers they think that we are talking about the asynchronous task but that's not the case because callback by themselves are not asynchronous they are synchronous in nature and let me show you that with an example so what i'm going to do i'm simply going to write a function async task all right and we are going to pass a another function which i'm going to represent as cb as callback and then i'm going to call this callback function at later point of time now the next thing i'm going to do is i'm going to call this function and while calling this function i need to pass a function as a callback so i'm going to do a arrow function and i'm going to do a console.log and i'm going to pass name here all right and then i'm going to define the name here as the page all right and for i save it i want to do some more console log here so i'm going to do console.log task start all right and i will be adding one more console log here which will be task running and the third one i want to do is here task n and before i do this let me write the page here directly okay and if i save it now then you will see that it's very obvious first we are going to console the task start then the console will happen for the task running and then the console will happen for the page and then the task i end but there's no asynchronous part here everything is happening in the synchronous mode all right the next thing about what i'm going to do is now i'm going to change this the page to name and as we know that a lot of people think that callback is an asynchronous but now if i save it i want you to think that what will be the execution is the execution will still be the same or not and if i save it then you will see that i'm getting an error and why is this so because callback are asynchronous and then why it is giving me an error why it's not able to find the name here and that is because callback themselves are not asynchronous they are synchronous in nature we have to make this callback function into synchronous mode so that the complete javascript file is compiled first and all the variables are allocated to the memory and then our callback function is called so in order to change this function into a callback function we need to use something like set timeout so let me use a set timeout here so i'm going to use a set time out all right and this set timeout is going to take two arguments one will be the callback itself and another i'm going to add a zero second so this zero second is a very small amount of time zero point zero zero zero something i just need to add some time so i'm adding it zero and now if i save it then a function will get executed properly and now you will see that this callback function is taken out from the execution flow and then the complete js file is compiled all the variables have been allocated into the memory and then my callback function is called so in this way you actually convert your callback function into an asynchronous execution there are other ways also doing this you can also use promises you can use async await if you want to do a async execution task but let's keep them aside let's focus more on this callback the another thing i want to show you is what is a good way of handling the errors on callback so there's no specific standard of handling the errors or there's no a specific way of writing it but when node.js came out we usually started writing the error as the first argument in the callback and let me show you what is that so i'm just going to remove this and i will also remove this and this all right and the next thing i'm going to do is i'm going to add the arguments in my callback function so the first argument is the error and the second argument is the data all right and let me add this all right and now the next thing we can do is if we have an error then we can just simply throw the error else what we can do we can just console log the data which is we are getting as a data here all right and all right so so that's it i mean the callback function will always have the error as the first argument and the data in the next argument so that's how i mean you can remember that when you use a callback uh you will always get the error as the first argument and you get the data that's how from the node.js it started that this is called the error first callback so now if i want to pass this error so what i'm going to do is i will just create a function in my set timeout so i created an arrow function and it will still be the same and now when i call my callback function there is an error i can pass the error and this error will be taken as the first argument now if i save it then you will see that i get an error in my console but if you don't have an error and you need to have a data you have a data then your first argument will be passed as null because you don't have an error and your second argument will be your data this is the data from server and if i save it then you will be see able to see that now i can see the data so this is one of the standard way usual practice to handle the errors on the callback we use callback functions very frequently while writing a node.js application the other thing i want to show you is now what is this callback hell so we know the callback we know the callback functions how it happens in the asynchronous mode but what is this callback hell actually so this callback hell is a very interesting topic which gives you an idea about our understanding uh with the async callback functions so in if we are using the callback functions and they are executing in an asynchronous mode but you have that your logic of sequences should be executed one after the another in a sequential way then how you're going to achieve this so if this code execution was a synchronous mode let me show you with an example so what i'm going to do is uh i'm going to remove this and i'm going to write a new function called make api call and this is going to accept a callback all right and then i'm going to use the same timeout function and it will be an arrow function will be executed in 0 seconds and i'm just going to do a console.log this is async task execution all right so so now the thing is that once my callback function is get executed i need to make an another call so in general you can think about that in in real projects we have a lot of scenarios where we actually make an api call and then once we get the data back from the api call we need to make an another api call and how this if this is in a synchronous mode then it will be a very easy so you we just need to have like we will be having log this this this so all this will happen in a very sequential way so the first line number 12 will get executed then line number 13 then 14 and 15. so it was very easy if the code execution was in a synchronous mode but if the code execution is an asynchronous mode then what we will do we are first going to call a make api call all right and this is going to take a arrow function all right i'm just going to give an empty arrow function just for the reference and now once this callback function is called i need to make an another api call so what i'm going to do i need to make an another api call all right and once my second api call is get executed i need to perform some other tasks so let me perform an async task here so i'm going to write an async task which i want to be in an asynchronous mode all right and once it is done i need to make an another task i need to make an another task and this way this nesting happens and when you have a multiple nested call backs it results into a callback hell and why is it so we call it as callback hell because now you can see that it's a very nasty code syntax i mean you need to remember that this syntax get close here this syntax get close here this syntax that close here so i mean in the mind you need to remember a lot of sequence and and it's not uh that much readable so what we are doing here is that we are doing an asynchronous execution call with the chaining of callbacks and then we end up with the nasty syntax of the nesting of callback functions and which is very hard to understand and readable and this is called the callback hell so in order to do these type of executions or in order to do these type of logical or chaining of the callback or chaining of the asynchronous tasks then we use usually promises or async await which actually have a more better way of writing the code and way simpler to understand so i guess that's all we had for this callback and the callback hell i hope you understand this uh the core nature of this callback and callback hell how they works and how we convert a callback function into an async execution so if you like this video a thumbs up is appreciated also make sure before you go you don't forget to subscribe my channel and press the bell icon so that you don't miss the videos like this one you can also connect with me via facebook or instagram i will add the links in the description below and thank you thanks for watching

Channel: Dipesh Malvia

Views: 1,485

Rating: 4.9148936 out of 5

Keywords: Async Programming JavaScript, JavaScript Synchronous, Callbacks, Callback Hell Nodejs, Nodejs Callback, javascript

Id: 1zeuvEvw5uw

Length: 12min 43sec (763 seconds)

Published: Thu Dec 10 2020