The JS Call Stack Explained In 9 Minutes

[Music] now everyone welcome to this video on the call stack my name is Colt and first I just want to apologize for this recording setup I'm still working on it this microphone is way too big so I'm working on something better but for now we're just gonna work with it so the call stack is something that in my experience a lot of students aren't really comfortable with they know that it exists as this like amorphous blob that they just don't want to dive into they know it's a thing but they don't really understand how it works and why they should care so let's start there why does it matter first it's fundamental to how jeaious works it's always good to understand the language you're working with right it's it's it's a good thing to know what's happening behind the scenes but second and I think this is most important it's really helpful when you're debugging your code so JavaScript I think Chrome and Firefox in pretty much every browser this bad today has built-in call stack debugging tools so you can see what's happening at any point with the call stack and I'm gonna show those in this video and then finally it does come up in interviews so absolutely worth knowing for that let's start with a really important question which is what is the call stack I like to think of it as sort of like a to-do list of function invocations so if you have an application you call a function and the last line of that app that function call might result in five other function calls and each of those might have cascading function calls and they might be waiting on results of future calls to come back until our final original function call finishes so JavaScript can basically only do one thing at a time it's mainly single-threaded technically there's something called thread pooling that happens but we're gonna just ignore that just assume that one thing is happening at any given time so javascript needs to keep track of the history of things sort of a list of what is waiting to be returned which functions have been invoked but aren't done yet so that's what the call stack is it's a structure that stores it so it's like a to-do list and the reason it's called a stack by the way that's a common data structure and the way those stack works is that it's a last in first out structure so I like to think of it as like a pile of books I have a pile of books over here you might be wondering what I was doing with that if I want to add a book to a stack I add it to the top right I'm not gonna try and add it to the bottom and like shift everything over I'm gonna add it to the top just like this and then if I want to remove something from a stack I take it off the top so the first thing that was in our sorry the last thing that was in this red book is the first thing out I don't remove from the bottom that would cause a book avalanche alright that's enough of the books push those out of the way so in a similar way here's a little visualization of some function invocations don't worry about what the text says but we have a function called main and our call stack takes note of that but it actually calls multiply and our function multiply for some reason calls another function called something so these are all added to the stack so this was the last thing it was added to the top so it's the first thing to come off here we go it's popped off then multiply and then finally main is finished last in first out so to summarize that when you invoke a function the details of the function call the invocation are saved to the top of the stack they are pushed to the top of the stack and then when that function returns or whenever any function returns the information about the invocation is taken off the top of the stack it's popped off taking the book off so here's a simple example we have a function called multiply and then it's being called down here on line 5 so the way that the stack works what's the very first function that's invoked in this applicator we shouldn't call it an app in this code there's something called the main function think of it as like the most basic top level function called in every single javascript file so main is added to our stack and it says line 5 is where we invoked the first function this is not a function invocation it's a declaration so nothing added to the stack but then in the main function we're calling multiply multiply 3 comma 5 so that means we need to add a frame it's what it's called a stack frame we'll come back to that to the top of our stack and so now we have multiplied and also the line number two that's it though because in multiply the only line is a return so remember when we return something we pop it off the stack here we go there we go just popped it off and now our main function is done there's no code after it so it's done and our stack is empty so we'll do a more complex example in a moment let's come back to stack frames so this is a visualization of what a stack frame is it contains some information about that function invocation it contains the function that was invoked the name of it like multiply the parameters that were passed in and the current line number and I'll actually show you this in chrome in the debugger where we can look at a call stack in just a moment all right so I'm in the chrome debugging tools and I have a little snippet I've created with some code and over here and the debugger there's a little section I'm going to close everything except for call stack which currently shows nothing I need to pause my code to add a breakpoint and we'll sort of start to be able to explore the call stack so this code is really simple I have a function called first thing and another one called second thing and I'm calling second thing first and that returns first thing plus the string second thing so if I call it if I just run it on its own I'm going to use it's a snippet so I can do command to return and I get first thing second thing but now let's see how that actually happens so I'm going to add a breakpoint right here and now I'm going to run the code command enter or I could click that button okay so we have our main function in this case the way they display it is anonymous and the very first thing that needs to happen I'm going to step through second thing is called and you can see that it's added to the stack at the beginning and you can see the the line numbers by the way so the first anonymous main function was line 9 on line 6 we had second thing now second thing doesn't return right away it needs to call first thing first first thing first and that happens if I step through it you can see it's added first thing is right here now first thing is at the top and it returns the string first thing so what that means is it's going to be popped off because when we return something the top value or the top frame of the stack is removed so watch it right here oh we're done area now it's removed so now we're back at second thing and this arrow indicates what's actually being executed so we have the value of first thing which we called it was returned to us so now we just add that with second thing and we've returned that that string and you'll see this gets popped off and then finally one more time we're done and you can see first thing second thing appears as our return value so I have another little bit of code I just changed it a tiny bit first thing now calls second thing second thing now calls first thing so you can probably imagine what's gonna happen if I execute this code we get an error but what is that error exactly there we go maximum call stack size exceeded so what this tells us is that we exceeded the number of frames that chrome allows us to have in the call stack because nothing was ever being returned we're just constantly adding books and books on top of the stack over and over and over or adding frames on top of the stack and nothing was being popped off and in chrome I think the maximum call stack size is 16,000 frames so this happened 16,000 times and then it gave up and through this error maximum call stack size exceeded so this is some time this is common error especially when we talked about recursion which I have a video on that as well you will see what causes this otherwise it's probably not that common to have you know a function calling one function and having the same one calling the first one but with recursion you have a function calling itself and you can run into this very very easily so to summarize everything to wrap up a stack the call stack is just an ordered set of stack frames just a bunch of it's a to-do list for function calls or invocations so the bottom of the stack is the first function invoked so let's say you go back to our books this is the first function that was invoked then the next one that's invoked gets added on top and add it on top until finally something returns a value all right we returned this value so it's the last in first out this was the last thing in now it's the first thing out and we keep going until the last frame the last function invocation returns some value so it's processed from top to bottom and on that note I think that's pretty much it that's all I have to say so goodbye thanks for watching I'll pop out from under the mic like subscribe comment whatever what am I supposed to say just do whatever you want but there's buttons you can click if you want to see more all right good bye now

Channel: Colt Steele

Views: 52,446

Rating: 4.9713674 out of 5

Keywords: javascript, js, call stack, programming, colt, steele, udemy, web developer, html, css, debugging

Id: W8AeMrVtFLY

Length: 9min 30sec (570 seconds)

Published: Mon May 21 2018