Callback Hell | Ep 01 Season 02 - Namaste JavaScript

Summary

In the first episode of Namaste JavaScript Season 2, Akshay Saini provides an engaging tutorial on callbacks in JavaScript, their benefits, and common issues. The episode dives into the significance of callbacks in handling asynchronous operations but raises awareness about the potential pitfalls such as callback hell and inversion of control. Understanding these problems is crucial for mastering JavaScript, especially for future episodes focusing on promises. Akshay emphasizes the delicate balance between utilizing callbacks effectively and managing their inherent challenges.

Highlights

• Callbacks make it possible to handle async operations like a pro. 💪
• Beware of callback hell, where your code becomes a tangled mess. 🕸️
• Inversion of control means losing some control over your code's flow. 🔄
• Akshay uses relatable examples like e-commerce to explain callbacks. 🛒
• Get ready for promises in upcoming episodes - the solution to callback woes! 🎉

Key Takeaways

• Callbacks are essential in handling asynchronous operations in JavaScript. 🔄
• Despite their usefulness, callbacks can lead to 'callback hell,' making code difficult to maintain. 😵
• Inversion of control with callbacks can lead to trust issues as you depend on external functions. 🤔
• JavaScript can do only one thing at a time, emphasizing the need for effective asynchronous handling. 📜
• Future episodes will cover promises to address these callback-related challenges. 📺

Overview

Callbacks are the unsung heroes of JavaScript, letting you handle asynchronous operations smoothly. Whether it's setting a timeout or managing e-commerce transactions, callbacks offer a way to keep your code responsive. But, as Akshay warns, they come with drawbacks if not managed well.

'Callback hell' is a real pitfall in using callbacks. As you nest more callbacks to handle sequential tasks, your code can become unwieldy and difficult to maintain, resembling a 'Pyramid of Doom.' Akshay illustrates this with examples, showing why developers need to be cautious.

The second issue, inversion of control, highlights the risk of relying on external functions to execute your callbacks. This dependency can lead to unpredictable outcomes if the external function fails to execute your callback as expected. Akshay stresses the importance of understanding this concept to transition smoothly to JavaScript promises in the next episodes.

Callback Hell | Ep 01 Season 02 - Namaste JavaScript Transcription

• 00:00 - 00:30 ho ho ho I'm back again to teach you here on my channel and I'm super excited right now let's just begin this is the first episode of this series and we will keep it very simple and sweet we will just cover two topics in this episode first one is the good part of callbacks and the second topic is the bad part of callbacks in the good parts we will see that how call backs are super important while writing asynchronous code in JavaScript RT and in the bad parts we
• 00:30 - 01:00 will see that using call backs can let us face a lot of issues there are two major issues we will cover both of them the first one is call back hell and the second one is inversion of control yes these two issues are really very important and you know if you understand these two issues very well then understanding promises in the upcoming episodes will become very simple for you so please I request your attention and just keep watching this episode of Namaste JavaScript season
• 01:00 - 01:30 2 JavaScript is a synchronous single threaded language and it can just do one thing at a time remember it has just one call stack and it can execute just one thing at a time and whatever code you give it to JavaScript will be quickly executed by the JavaScript engine it does not wait for anything so suppose if we have this code over here so this code will be quickly executed by JavaScript engine and it will just quickly print on the console these three statements let
• 01:30 - 02:00 us see that if I save here see Namaste JavaScript and season 2 so it just quickly prints it and remember time tide and JavaScript waits for none but what if we really need to wait for something suppose if in this line number five suppose if we had to execute this console log JavaScript after 5 Seconds how would we do that so now here comes the hero of our episode which is the call backs so yes what we will do is
• 02:00 - 02:30 suppose if we have to execute this line number five after 5 Seconds we will just wrap it inside a call back function let's create a function and what we will do we will just wrap this code inside a call back function and we will pass it to the set timeout isn't it so let's just quickly do that so now we have this call back
• 02:30 - 03:00 function inside the set timeout and we will also pass 5 5,000 milliseconds in it now listen to me very carefully we gave this call back function to set time out now it is the job of set timeout to execute this call back function after 5 seconds so using call back is a powerful way to do asynchronous thing in JavaScript right so we can take a code piece of code inside a function and we can just pass it as a call back which
• 03:00 - 03:30 can be executed later point of time right and our job is done so that's how call back plays a very important role in writing asnas code in JavaScript so this was a very easy example let us take one more interesting example and you will love it so suppose we are building a e-commerce website and you know e-commerce website can't exist without a cart isn't it so let's create a cart and this is an array array of items that we add to cart so let's just quickly add some dummy items into the cart um let's
• 03:30 - 04:00 add shoes right and what else should we buy let's add uh pants and let's add uh CA as well okay why not so these is card for the sake of Simplicity I have taken these as strings but you know how it works in real world right big objects yep so what we will do now once we have this items into card now how how e-commerce website works so first we need to create an order and then we proceed to payment isn't it so how would
• 04:00 - 04:30 we write that in code so suppose if we have access to two backend apis one is the create order API so let's call it as api. create order create order so suppose if we have this API create order that creates an order right and another API which can be proceed to payment okay so payment right so after we have created a order order we will just
• 04:30 - 05:00 proceed to payment so with these two backend apis so how it works is first of all we need to create an order by using Create order API and once the order is created then only we can proceed to payment there is a dependency between them so how do we manage that dependency in our code because this is an async operation isn't it so here call back can come into picture and call back can help us write code for this kind of behavor Behavior so let us just see a very
• 05:00 - 05:30 common pattern which we follow in programming right so what we will do is we again will wrap our proceed to payment API inside a call back function let's just quickly do that we created a call back function a function right and we add this proceed to payment inside this call back function and where will this call back function go can you guess yes so we will take this call back function and we we will pass along with the card items to this create order API
• 05:30 - 06:00 isn't it does this make sense so now how this code will be executed right so when JavaScript engine executes this piece of code it will just call the create order API and now listen to me very carefully we have passed this call back function we have given this call back function to create order API now it is the responsibility of create order API to create an order and then call this function back that way we can handle
• 06:00 - 06:30 async operations in JavaScript isn't it powerful so now let's make things a little more complicated so we created an order now after order is created we proceeded to payment now what if after we proceed to payment after the payment is successful we need to show a order summary page okay and for that suppose we have another API show order summary okay so how do we do that we have to call this API only after we have done
• 06:30 - 07:00 with the payments so again here call back function comes into picture we will just wrap it inside a call back function this API over here and what we will do now we will pass this call back function into where where will we pass yes into proceed to payments okay so now again listen to me very carefully we passed we gave this function this call back function to proceed to payment API now
• 07:00 - 07:30 it is the responsibility of proceed to payment API to complete the payment and call this function back that's how we can manage this dependency between this whole flow which happens one after the other but do you see a problem over here let me show you a very important problem that we can face right oh my God a honey be just passed from here but yes let us continue with the code hope it doesn't come back so now we
• 07:30 - 08:00 have created the order we have done the payment we have shown the order summary after that suppose if we also want to update the wallet how would we do that so now we again have a API right we have again have a API to update wallet right so that happens the wallet will be updated only after we have shown the order summary so how would we write that code again we will have a call back function over here and we where we will pass this call back function you would
• 08:00 - 08:30 have already got bored seeing me doing this again and again we will pass this inside show order summary okay so do you now see a problem with this code yes so when we have a large code base and there are so many apis here and there and apis are dependent on one after the other so what happens is we end up falling into this call back hell what is a call back hell so one call back inside another call back inside another API or some if statements and random things happening
• 08:30 - 09:00 makes makes this call back hell and our code starts to grow horizontally instead of vertically this is a call back hell right and you know this code this type of code structure is like very unmaintainable you can't maintain it properly it's very tough to manage all this and trust me I have seen these type of call back hell a lot written on production code in very big companies yeah super cool develop ERS
• 09:00 - 09:30 right so this is the first problem with using call backs that is call back hell and the structure is also known as Pyramid of Doom okay you can Google it so it is because of this structure it is known as Pyramid of Doom in programming so now we saw the first problem but now I need your utmost attention because now we are going to discuss the most important part of this episode that is the inversion of control and trust me this is really very
• 09:30 - 10:00 important to understand promises as we go ahead okay so please please pay attention please give me just two more minutes and I would teach you this okay so let's study inversion of control inversion of control is another problem we see while using callbacks and Kyle Simpson explains it very beautifully in you don't know JS so inversion of control is like that you lose the control of your code when we are using callbacks now it might sound a little complicated
• 10:00 - 10:30 that how do we lose control over our code but let me show you with a code example we will use the same example which is here okay so let me just get rid of this call back function first of all so now what is happening in this code is we are creating a order and now listen to me very carefully what we did here was we take this call back function and we give it to create order API and now we as a developer are sitting back relaxed and we are blindly trusting
• 10:30 - 11:00 create order API how we are blindly trusting we gave this call back function to create order API now we are expecting that create order function at some point of time will create an order and will call our function back isn't it risky this is very risky very very very risky how it is risky because this is an important piece of our code isn't it proceed to payment what we did is we gave the control of our program to
• 11:00 - 11:30 create order API now we now it is the responsibility of create order API to call our function back and we are blindly trusting create order API now we don't know create order API must have been in some other service or some other developer wrote it or an intern wrote it right there could be a lot of bugs inside create order API isn't it um what if our call back function was never called can happen right you don't know
• 11:30 - 12:00 what is the codee return in create order API we are just blindly trusting it what if our call back function is called twice proceed to payment happens twice because we don't know what is happening created in the create order API so what I'm trying to explain is that whenever we have this call back function and we pass it to some other function we are giving the control of our function right our piece of written code to some other code and we don't don't know what's
• 12:00 - 12:30 happening behind the scenes now right so this is a very important problem that we face when we are using call backs and we as a developer don't don't realize this right I have written so much code and I have seen so much code and have seen this happening so many times but this is a very important and a risky thing which we need to take care of so as we move ahead in next episodes we will see that how this inversion of control can be handled in our code okay so for now just
• 12:30 - 13:00 keep these two problems in your mind and that's all in this episode before we end this episode let us just quickly recap what all we studied so first of all we studied that callbacks are like super powerful way of handling async operations in JavaScript isn't it the first thing we studied in fact asynchronous programming in JavaScript exist because callback exists another thing to remember is that while we are writing call backs we Face a lot of issues the two important issues that we
• 13:00 - 13:30 face is the first one is the call back hell right that call back inside call back inside call back a lot of nested callbacks and the code becomes unmaintainable and the second thing is inversion of control that we lose control of our program because we pass that call back function into another function and now we have given the control of this function to some other function right and now we don't know whether that function will ever execute our call back or not so this invert of control is is another big issue with
• 13:30 - 14:00 callbacks so in this episode you just have to remember these three things these important good parts and the bad parts of callbacks and that's all in this episode and and and in the next episode we will be covering promises yes promises and I'm super excited to teach that topic it's one of the most important and most interesting part of JavaScript and I will explain you promises in a very different way not like explaining you just the gist of it I will explain it in detail in depth
• 14:00 - 14:30 best video of promises I'm coming up with so what are you waiting for check that video right now but before moving on to that video just wait just wait I have to ask two things from you first is to go like the video right now because it takes a lot of effort to make these videos please like it share it on social media because I don't have a marketing team you are my marketing team share it across on social media about Namaste JavaScript season 2 and the second thing is your homework okay now with this
• 14:30 - 15:00 episode I will be giving you homework with each and every episode so homework for this episode is that you have to go in the comments and explain in your own words what are the two problems that we face while using call backs okay you have to explain it in your words trust me that will help you memorize that concept very well okay do that two things like the video share it across social media and the second thing is to do your homework finish your homework right now now don't go before finishing
• 15:00 - 15:30 your homework okay so that's all in this episode and keep watching Namaste JavaScript season 2 [Music]