In today's video we will see that how You can handle errors in callbacks We will see what is callback hell and What is pyramid of doom and why should we avoid it Let's move to our computer screen And let's get started So you will see callback promises and async/await First of all I will give you a wrappel Means will make a wrappel for this course, this video. And we will make it inside ultimate JavaScript folder And we will name it, create a wrappel and And I will make it from HTML, CSS and JavaScript And we will name it 52_callback Let's do one thing we will not make it with HTML, CSS and JavaScript We will make it from node.js And the reason is we are not using browser here So I am making a wrappel named callbacks and as it creates We will write some codes in it First of all I will tell you what call backs are, But before that let's understand what is synchronous programming And what is asynchronous programming So asynchronous actions are that actions which I initiated now Then it will get complete When? We will not to worry about that but it will complete And setTimeout is a good example of it, it will be done. It will be done later when the whole thread will be executed Then after three seconds this code will run So this is asynchronous task Synchronous action is which runs one by one If I take a example of synchronous code then this is it I said let a=prompt("what is your name?"); and suppose wrote let b=prompt("what is your age?"); and suppose wrote let c=prompt("what is your favorite color?"); And then suppose I did console.log like this. And now I will show you by running it. But wrapplet is quite good friends, What is your name? Harry. Oh no! propt is not defined. I have to make it prompt. I wrote What is your name? Harry. What is your age? 88. What is your favorite color? Red. Harry is 88 years old and has red favourite colour. So, it will work this way, it will run one by one It will be not like b's value will set before a or c's value before b that would not be done. This will run one by one which is example of synchronous programming Now I will give example of asynchronous programming So that will be suppose I wrote here SetTimeout and I want to run a function And suppose I want to write a function console.log And here let me remove this, "hey, I am good." And what I will do is Here will give the second argument which setTimeout needs Suppose 3000 and if I run this Let me comment all this out because there is no point running this I showed you what is synchronous programming Now if I run this you will get hey, I am good after three seconds but before that I will write start here And will write end here and run this. Start, end and after 3 seconds hey I am good. So here are the line runned After that as this line was asynchronous it got scheduled it was not like it stopped code execution, This line was scheduled and thrown in background to run after 3 seconds And after that, this one got executed this is asynchronous programming Execute this, then this as it is asynchronous send it to background Then execute this as it was in background hey I am good is coming at last, understood? means print start, print this after 3 second and then print this. Now the thing kept on side print that, hey I am good. So it work something like this I am showing you analogy here Asynchronous actions are actions initiated now and finish later Like setTimeout we start right now and will run after 3 second 4 second, 8 second or 300 milliseconds later. Synchronous actions are the action which finish one by one Now let's talk about callback function Now you must understand asynchronous and synchronous A callback function is a function passed into another function as an argument which is then invoked inside the outer function To complete an action So, callback function is a function which you give And that will be executed Whenever that action completes Now what does that mean We will understand it from example, this is theoretical thing. And if you understood the example then this theoretical will turn into practical So let's understand the thing I said which I wrote What was that? And let me comment this out because You will not feel good is the above part will be executed So I am commenting this out Now I will show you what callbacks are, So here I will write callbacks and then I will write this function So I am writing a function named loadScript Which takes a URL The AI of wrapplet made my situation bad Wrapplet is saying I will do this you go and make team on dream11 Now see loadScript(src, callback) Let me write src so that it sync with my notes, what I did here First of all created a new element in named script We saw this in last chapters Then said, make its src to this which we have taken After this, append this in head So that's fine but what I want is to run a callback As soon as it loads but To make things simple we will start like this What I will do I will loadScript I will do loadScript and get a script from bootstrap.com What will be that script? This one. This one, bootstrap.min.js Now what I will do is I will run it Document is not defined because This is not a template of HTML CSS and JavaScript So I have to change it to HTML CSS and JavaScript template So no issues we will do one thing We will make one more wrappel named 52_web_callbacks There is no worries our computer, our wrappel, everything is ours. I will close this for now. What I will do here, that in its script.js all this content I will move after making wrappel But, for now the code I had written in it, I will bring here. copy, not copy cut and paste. Now, I will run it and open in new tab and show you console. reload it. And nothing happens that bootstrap script will get loaded. If by going in elements, pressing ctrl +F and show bootstrap then yes it is being appended in body. with no disturbance. How will I get to know it is appended and when? You won't get to know that. Now, I will do something which informs me when it loads. So, I'll write script.onload() which is a function = function() what will this do? which will simple do console.log("script loaded"); loaded script with src, something like this. Now when I will reload it, it is saying unexpected token. What mistake I did? Let me close this first, so I get space for coding. reload it and it is showing immediately loaded script with src. Great so as script gets loaded this will tell me script is loaded. But what I want is to run a custom function. Which will be that function? I don't know I will tell you at runtime. It might be this function which alert('hello') why function named hello(), It's my choice. maybe I can run with name goodmorning, it's my choice. whenever script runs I want to run this. and it might be when bootstrap script gets loaded I want to run hello() and for any other script I want to run goodmorning(), my choice. so for that I will do this, means loadScript load this script then run this function, so I have to make this function like that only. And this function is called callback that run it. which you pass as function name to run it when it completes. So, that I will know this is done. So, this time with console.log will execute callback too like this. As, I have done here callback(script) now, as I have executed callback like this, what will happen? whatever function it is will execute when script gets loaded will it execute or not? Tell me everyone. Tell me in comments. reload it and as you can see hello world is executed. loaded script with src is executed with my callback. So, it will work like this, and it's obvious CDN is very fast, so, work is done in a flash of a second. It may have take time, but whenever script gets loaded this both will have executed. So, this is callback basically. If anyone ask you what is callback? Then you can answer them. So, you can do like this, loadScript(url, callback()); whichever function you want to give, it will execute. Now, that callback can take an argument too. that depends on function. Suppose I want that my callback print something and and it don't get that, for example I want to print script name. want to print script's src. and with goodmorning too, I will print src. to do that I will give argument here with hello I'll say print src with callback. So, it will print src too. Let's see will it or not? When I click ok then it printed src with hello world. So, I can do that too. Basically I am passing function as an argument. and then call it from here. It's simple, callback name can be confusing. but it is that basics only, we pass function as a variable and executing the function there, nothing much. So, don't worry and you will get notes too. This is called callback based style of asynchronous programming A function that does something asynchronously Like our setTimeout should provider callback argument So that we get to know when it got executed and succeed Which is on the loadScript like in our function. We will put the function to run after it complete It's simple I don't think anyone should have problem now sometimes when script doesn't load it shows error Let me show you when this happen, when I js this which website doesn't exist I will try to load it, save it and reload. And it couldn't be done, name not resolved error is shown Now I want to handle this error, here I did script.onload= like this suppose, I don't do this. I can do script.onerror and can say whenever error occurs, then this gets printed. and I will get it on reload. So I can perform some actions if error occurred Now what happens here is when we handle the error Then we give an error with function and throws a new error when error occur I will say whenever error occurs run the callback and do something like this in callback new Error("src got some error."); Now I have given this inside callback, but I have to change my callback, hello, which I have given It's first argument this time will be error. error in src and when my script run successfully then I will pass null in error in callback. Now my callback function is taking 2 arguments first is error And second src So, here I gave null instead for error when my script is executing successfully I will give null instead for error and after that second argument as my work was going on, but but if error occurs then I will pass a new error. Now, I can do something like this, If error I will return doing console.log("error"); I will return doing this else this will run. Now, lets see everything is good or not? Now, error is coming but you can see, it printed this too src got some error and showed me the error too. So, I can do error handling like this. If you feel it's a bit more, don't worry, grasp till here first leave handling error that what we did in callback which is a function which is passed as an argument to another function. Think it like gave a function as function argument. That a callback and then run it inside this function. I have done nothing more than that. So, this is callback. So, in this way we can handle errors, refer notes you will understand So, we can do error handling in our callback like this. We gave callback function here and null the error when we are running this function and giving it a callback function I have directly wrote its name hello, If I want I could have given this here directly. but to keep logic clean I did this, Similarly I have to change goodmorning() in this format. To change it I will copy this, and ctrl +V goodmorning, here error on src, and herer goodmorning This I did and If I give it goodmorning then too it will work. G is not defined. What is this? Yes it worked and you can see src got some error and and my goodmorning worked properly. jsdeliver, is spelling correct? I don't know. Now, it will work properly. Yes it worked. See. Now it is showing good morning, earlier it was hello world. So, grasp this thing, will take some time. I know many will say commenting it became difficult, But I will give you fun too. When we understand promise and async/await and. when you understand and start awaiting functions, then you will know the real power of JavaScript and believe in it. So, stay here with me, I need your support. Why? because this can be a point where people will say we didn't understand it we are leaving. But I want to tell you that create JavaScript begins here This is the point where an expert JavaScript differentiate from a beginner developer who don't appreciate advance concepts. I hope that makes sense if you haven't access JavaScript playlist Then please do as 11 lakh people have already accessed That's it for this video thank you so much for watching And I'll see you next time.
