Callback Hell & Pyramid of Doom | JavaScript Tutorial in Hindi #53
Callback Hell & Pyramid of Doom | JavaScript Tutorial in Hindi #53
Link to the Repl - https://replit.com/@codewithharry/53C…
Join Replit - https://join.replit.com/CodeWithHarry
Download Notes - https://drive.google.com/drive/folder…
Ultimate JS Course Playlist: • JavaScript Tutorials for Beginners in…
►Checkout my English channel here: / @programmingwithharry
►Instagram: www.instagram.com/codewithharry
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 by CodeWithHarry
►Learn in One Video[++]:
Python[15 Hr]: • Python Tutorial For Beginners In Hind…
Python Advance[3.5 Hr]: • Python Programming Course in Hindi (A…
Python[1 Hr]: • Learn Python In Hindi In One Video - …
Python[2 Hr]: • Python Tutorial In Hindi 🔥
Python[15 Min]: • 15 Minute Python Tutorial For Beginne…
JavaScript[1 Hr]: • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial For Beginners:…
php[1 Hr]: • Learn Php In One Video In Hindi - हिं…
php[2.3 Hr]: • Php Tutorial for Beginners in Hindi w…
php[Project]- • Login And Registration Form Using Php…
HTML[30 Min]: • HTML 5 Tutorial For Beginners In Hind…
CSS[8.5 Hr]: • CSS Tutorial In Hindi (With Notes) 🔥
CSS[1.4 Hr]: • CSS 3 Tutorial For Beginners: Learn C…
Wordpress[3.2 Hr]: • How To Make a WordPress Website | Wor…
Angular[2 Hr]: • Angular Tutorial in Hindi
Java[2.3 Hr]: • Java tutorial in hindi 🔥
Web Scraping[1 Hr]: • Web Scraping Tutorial using Python an…
MongoDB[2 Hr]: • MongoDb Tutorial For Beginners in Hin…
Numpy[1 Hr]: • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tutorial For Begi…
Linux[1 Hr]: • Linux Tutorial For Beginners in Hindi
JQuery[1.1 Hr]: • jQuery Tutorial For Beginners In Hind…
Git and GitHub[1.1 Hr]: • Git \u0026 GitHub Tutorial For Beginners I…
►Complete course [playlist]:
React: • React Js Tutorials in Hindi
Python- • Python Tutorials For Absolute Beginne…
OOP Python- • Object Oriented Programming Tutorials…
Java: • Java Tutorials For Beginners In Hindi
JavaScript- • JavaScript Tutorials In Hindi
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials In Hindi
C++- • C++ Tutorials In Hindi
Git \u0026 GitHub- • Git and GitHub Tutorials In Hindi
Android Dev- • Android Development Tutorials in Hindi
Python GUI- • Python GUI: Tkinter Tutorial In Hindi…
Web Development- • Web Development Tutorials For Beginne…
Python Django: • Python Django Tutorials In Hindi
Projects Using HTML, CSS \u0026 Javascript- • Projects Using HTML, CSS \u0026 JavaScript…
Data Structure and Algo: • Data Structures and Algorithms Course…
Follow Me On Social Media
►Website (created using Django Rest \u0026 Angular): https://www.codewithharry.com
►Facebook: https://www.facebook.com/CodeWithHarry
►Instagram: https://www.instagram.com/codewithharry/
Twitter: https://twitter.com/CodeWithHarry
Comment “#HarryBhai” if you read this 😉😉
Content
0.09 -> In today's video we are going to see how.
3.33 -> you can handle errors inside callbacks.
6.093 -> We will see what is the callback hell
8.687 -> and what is Pyramid of Doom
10.687 -> and why to avoid the attack.
12.572 -> Let us go to our computer screen.
14.388 -> and let's get started.
21.45 -> So we have seen what a callback is, we learnt about it
26.723 -> but do we have to use callback always?
29.129 -> The answer to this question is hidden in this video
30.742 -> and if I tell you, the answer is no. We should not use callbacks
35.908 -> I am not saying that callbacks should never be used
38.577 -> but there are some downsides which will force you to think.
43.32 -> This is our 52 video, whose code I have copied here.
47.49 -> and I'll tell you what is the problem with the callback,
51.23 -> which we studied in our last video, we saw that we pass a function.
56.061 -> to another function. and as soon as that function do some work,
59.711 -> our callback runs from which we get to know
62.88 -> that our work is done.
64.95 -> We also have seen error handling,
67.006 -> let's talk about the Pyramid of Doom, which is a big problem.
70.47 -> But before pyramid of doom, I want to tell you about callback hell.
74.85 -> So I will simply do a simple thing here.
77.91 -> By cutting it I paste it here.
79.95 -> So, that 52nd wrappel code don't get mixed in this.
82.8 -> We are working on 53rd wrappel.
85.08 -> Let me open it in new tab after running it so that you guys enjoy it.
89.88 -> Now here you guys see that,
92.07 -> I'll close it one minute.
93.87 -> Look what we did was that we said loadScript is a function.
97.59 -> Now someone or the developer will write the loadScript function,
101.156 -> I asked loadScript function to load this script
104.476 -> and when the script is loaded, run good morning.
108.33 -> So good morning is not a big deal.
112.08 -> But suppose that when the script does not run.
115.5 -> Then a very big disaster will happen
117.713 -> and what will we do in that disaster,
120.918 -> I have written a message send Emergency message to CEO.
125.13 -> We're doing a method run here, which one?
129.251 -> We're running a method named send Emergency message to CEO
134.04 -> What does this method do,
135.332 -> this method wakes up the sleeping CEO of our company,
140.43 -> and tells him to wake up
141.99 -> If CEO is sleeping his alarm in house will start ringing
145.237 -> his phone will start ringing. Maybe a stick from under his bed
149.035 -> and start hitting him to wake him up.
150.672 -> Your companies have a very huge error
154.38 -> So loadScript function is very important with responsibility
158.676 -> because if this function produced error due to any reason,
162.03 -> then what will happen?
163.71 -> Our CEO will wake up and if the CEO waked up.
166.89 -> then CEO is an angry person, he will not leave anyone
170.254 -> Suppose, responsibility is given the to Harry.
172.68 -> Now Harry will not do all the work by himself.
174.867 -> So Harry hired an intern and said
179.033 -> So, you are an intern and you have to write loadScript function.
185.4 -> You write this function and after writing this function
188.64 -> As soon as the script runs, you have to call goodmorning function
192.526 -> and if you can't call goodmorning function for any reason,
197.01 -> Then you have to give an error like this here.
200.94 -> So What will be the error? We will get error over here.
205.378 -> goodmorning function will be called, first argument error
208.736 -> second argument src will be given, goodmorning works in such a way
211.731 -> that give it first error and second src.
214.38 -> So what I did I added chintu and said to him
221.64 -> You are young, although you are making so many apps,
224.531 -> but I do not want to take you lightly, I want an app from you.
228.15 -> And that this time it would not be Android but JavaScript app.
230.92 -> Not even an app but on loadScript function.
234.139 -> Make such thing here, Chintu will say yes I amke apps,
238.53 -> CEOs from all over the world come to me
241.38 -> So why shouldn't I write the loadScript function here.
245.15 -> I will say that I Chintu will do it with blind faith in chintu.
249.03 -> Story will have a great result not saying only for entertainment.
253.68 -> Chintu made a mistake regarding loadScript function.
256.907 -> Chintu mistakenly called goodmorning function,
259.261 -> I gave the whole goodmorning function to Chintu.
261.81 -> Just imagine how much dangerous it is,
263.216 -> Chintu can call goodmorning with error.
265.224 -> Because Chintu has a very a reach to this function.
267.78 -> I gave this function to Chintu, blindly trusted him.
271.324 -> I said him to take the whole function and call it as you like.
274.47 -> So it is called inversion of control that we have passed a function
279.21 -> to loadScript, we gave another function to a function
282.84 -> Anything can be done with that function.
285.27 -> Now Chintu Made a mistake.
287.85 -> And here with good morning, he made error true
290.923 -> he made some mistake in loadScript,
293.04 -> That insteas of callback(null, src) he did callback(true, src)
296.558 -> Now what did he think, what happened, mistakes happen by human.
300.75 -> And what happened by doing this even after the script was loaded.
303.72 -> when Goodmorning was called error was true.
307.29 -> And due to error true, console.log became true.
310.8 -> And send emergency message to CEO got run
313.68 -> The CEO was sleeping, woke up at two o'clock in the night
315.979 -> and called harry asking which script got failed?
318.96 -> Detected script was not failed, it was Chintu's mistake.
321.958 -> What Chintu did? Made Harry fired.
325 -> now you see, how critical this is. how dangerous it is,
330.654 -> that we gave goodmorning function to Chintu
333.223 -> but now harry is thinking that
335.13 -> If I had not given Chintu goodmorning function as it is,
339.519 -> then I would still had my job.
342.03 -> And Harry was deeply upset, disappointed
344.489 -> and start to find solution of this problem.
346.8 -> The solution to this problem is promises
348.435 -> Because using Promise
350.971 -> Chintu can't make such mistake even if he wants to,
352.998 -> I will show this to you.
355.29 -> Whatever Chintu will do Harry will wait for it and taking the output
361.38 -> Harry himself could do whatever he wanted.
363.357 -> So the biggest problem with callbacks is that we give complete Control.
367.435 -> The second problem is the pyramid of Doom.
370.388 -> Which is also called callback hell, now you see that here
373.65 -> When we are typical use callbacks we use them like this.
377.28 -> and it's same thing to either call good morning
380.113 -> or I do this way, so I'll quickly click on the settings of wrapplet.
384.72 -> And to show you, will make wrapping to none.
387.424 -> because you don't know as it gets wrapped.
389.91 -> And I'll close over here and formats as well.
394.71 -> What did we do? We asked to run loadScript after that
398.373 -> Load Bootstrap.
402.57 -> And if Bootstrap loads successfully.
404.468 -> If error occurs we are handling it by sending message to CEO,
407.625 -> but if it loads, then no Need to give alert good morning
411.048 -> Simply load another script.
413.52 -> Which would be what.
415.29 -> I do it this way.
417.63 -> Which would be what.
419.4 -> Which is.
420.42 -> Bootstrap 2, suppose.
422.58 -> Another part of Bootstrap, which loads after the bootstrap,
425.635 -> there is nothing like that. I am just making it up.
427.785 -> To explain you.
429.78 -> And then give goodmorning function again?
432.517 -> What does the goodmorning function do?
434.247 -> Inside the goodmorning function we will call another script.
437.096 -> So watch carefully, I will copy it from here.
439.41 -> And will give this function again.
443.22 -> And what will I do that goodmorning here,
447.15 -> In its place,
449.1 -> I will do this thing again.
450.99 -> Then I will do it again and keep doing it.
455.64 -> And here if you guys look at it carefully.
458.67 -> So our code will look something like this because
460.975 -> look what we have here,
462.78 -> We are working on something like this,
464.79 -> And let me increase the indent size for you.
468.84 -> So that you will be able to understand a bit how things are working.
473.235 -> The more loadScripts I am putting
476.34 -> our code is Growing on the right side, I will add loadScripts here,
481.71 -> Putting so many that you will get the feeling
485.07 -> that what is the problem, what is this callback hell,
487.645 -> I will show you in actual by making this Pyramid of Doom.
490.8 -> Now, What are we doing here, I tell the logic of our code first
494.31 -> Let me format, our code is saying that load bootstrap first.
499.488 -> If it is loaded then load bootstrap2
502.29 -> Bootstrap2 is loaded then load Bootstrap3.
505.238 -> If bootstrap3 loaded successfully then load bootstarp4.
508.286 -> If bootstrap4 loaded successfully then load bootstarp5.
510.319 -> If bootstrap5 loaded successfully then load bootstarp6.
513.531 -> then 7 then 8,
517.71 -> then 9.
519.87 -> keep on adding like this, and see the situation of your code.
523.693 -> What is this? Is this readable?
526.804 -> There is the biggest problem and this is called callback hell.
529.83 -> And this is called Pyramid of Doom.
531.769 -> So, you will ask what to do then?
533.94 -> If you speak, say what?
536.1 -> See what you have to do is to use promises.
538.65 -> Our code will keep on growing in horizontal direction like this.
541.95 -> And who is tracking that we are inside which function?
546.42 -> Do you understand what the problem is? if you do Google search,
549.81 -> Pyramid of doom And see in the images
552.99 -> So over here if I show you some Pyramid's of Dooms
556.77 -> Let's see this one,
559.38 -> Pyramid of Doom like this,
562.159 -> your code is growing horizontally
564.722 -> and it is not good for readability,
566.626 -> now look I have written a thing in Chapter 9
568.56 -> When we get callback inside callback the code gets difficult to manage
571.8 -> Can you have callbacks inside callbacks?
574.47 -> Yes, there can be, I can do something when loadScript is done,
578.722 -> then I do something else when that is done
580.62 -> Let's say I am loading all websites one by one
583.053 -> Suppose, I want to load a service when my website A loads
587.399 -> then something else should happen after that.
589.65 -> So, I can apply callbacks like this, action by action.
593.97 -> It's not a big deal.
595.47 -> doing this makes my code grow horizontally
599.601 -> The group is going to be medically in China and. It's going well.
602.458 -> It should be vertically but going horizontally
607.348 -> As calls becomes more nested the code becomes deeper.
611.038 -> and difficult to manage especially when we've real code inside of,
615.788 -> instead of ....
617.278 -> Kept ... just like that to indicate your code
619.261 -> You might have if else statement and loops.
622.258 -> Maybe you have put up some maps.
624.688 -> JavaScript's .map functions.
626.998 -> So all those calls will make it more dangerous.
630.178 -> Understanding, what a big problem it is?
632.248 -> So this problem is big.
634.378 -> And the solution of this problem is promises.
637.798 -> So this is sometimes call, callback hell or pyramid of doom.
641.458 -> The pyramid of these calls,
643.468 -> grows towards right with every asynchronization action.
647.428 -> As you keep adding asynchronous actions of callbacks,
651.268 -> Your code will grow towards right, horizontally.
654.808 -> Soon it spiral out of our control, this way of coding is not good.
658.957 -> but is this bad way of coding? No, it's not bad either.
662.968 -> You guys can use it, definitely.
665.218 -> But, If you have callbacks after callbacks
671.278 -> then don't use this callbacks on callbacks.
675.784 -> You can use it for 1-2 callbacks.
678.378 -> Like we wrote loadScript, 1 callback runs fine without any problem.
682.018 -> But when you have a lot of callbacks,
686.068 -> Then there is the problem, and I will solve this problem in this course,
689.913 -> We will see Promises in the next video.
691.913 -> And this solution of callbacks,
693.835 -> first of all tell me in comments if you are enjoying or not
696.524 -> and if you haven't accessed this playlist then do access
699.748 -> click here and bookmark it everyone.
701.938 -> or save it by clicking.
703.348 -> And do this thing in actual.
705.028 -> Because in JavaScript playlist, a lot of people were telling me,
708.028 -> That This.
711.118 -> is not coming in our YouTube search.
714.873 -> if not coming then simply save it here and bookmark it.
718.421 -> you will get this playlist, watch it from the start, no worries
722.878 -> That's it for this video.
724.594 -> Thank you so much guys for watching this video.
726.5 -> And I'll see you next time
Source: https://www.youtube.com/watch?v=fIPJUteOdLc