The JS Call Stack Explained In 9 Minutes

maximum call stack size exceeded
This is a topic that many people are looking for. https://granthamandira.org/ is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, https://granthamandira.org/ would like to introduce to you The JS Call Stack Explained In 9 Minutes. Following along are instructions in the video below:


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 Im still working on it this microphone is way too big so Im working on something better but for now were just gonna work with it so the call stack is something that in my experience a lot of students arent really comfortable with they know that it exists as this like amorphous blob that they just dont want to dive into they know its a thing but they dont really understand how it works and why they should care so lets start there why does it matter first its fundamental to how jeaious works its always good to understand the language youre working with right its its its a good thing to know whats happening behind the scenes but second and I think this is most important its really helpful when youre 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 whats happening at any point with the call stack and Im gonna show those in this video and then finally it does come up in interviews so absolutely worth knowing for that lets 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 its mainly single-threaded technically theres something called thread pooling that happens but were 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 arent done yet so thats what the call stack is its a structure that stores it so its like a to-do list and the reason its called a stack by the way thats a common data structure and the way those stack works is that its 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 Im not gonna try and add it to the bottom and like shift everything over Im 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 dont remove from the bottom that would cause a book avalanche alright thats enough of the books push those out of the way so in a similar way heres a little visualization of some function invocations dont 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 its the first thing to come off here we go its 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 its popped off taking the book off so heres a simple example we have a

function called multiply and then its being called down here on line 5 so the way that the stack works whats the very first function thats invoked in this applicator we shouldnt call it an app in this code theres 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 its a declaration so nothing added to the stack but then in the main function were calling multiply multiply 3 comma 5 so that means we need to add a frame its what its called a stack frame well come back to that to the top of our stack and so now we have multiplied and also the line number two thats 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 theres no code after it so its done and our stack is empty so well do a more complex example in a moment lets 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 Ill actually show you this in chrome in the debugger where we can look at a call stack in just a moment all right so Im in the chrome debugging tools and I have a little snippet Ive created with some code and over here and the debugger theres a little section Im going to close everything except for call stack which currently shows nothing I need to pause my code to add a breakpoint and well 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 Im 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 Im going to use its a snippet so I can do command to return and I get first thing second thing but now lets see how that actually happens so Im going to add a breakpoint right here and now Im 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 Im going to step through second thing is called and you can see that its 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 doesnt return right away it needs to call first thing first first thing first and that happens if I step through it you can see its 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 its 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 were done area now its removed so now were back at second thing and this arrow indicates whats 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 weve returned that that string and youll see this gets popped off and then finally one more time were 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 whats gonna happen if I execute this code we get

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 were 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 its 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 its a to-do list for function calls or invocations so the bottom of the stack is the first function invoked so lets say you go back to our books this is the first function that was invoked then the next one thats invoked gets added on top and add it on top until finally something returns a value all right we returned this value so its the last in first out this was the last thing in now its the first thing out and we keep going until the last frame the last function invocation returns some value so its processed from top to bottom and on that note I think thats pretty much it thats all I have to say so goodbye thanks for watching Ill pop out from under the mic like subscribe comment whatever what am I supposed to say just do whatever you want but theres buttons you can click if you want to see more all right good bye now

tags:
javascript, js, call stack, programming, colt, steele, udemy, web developer, html, css, debugging
Thank you for watching all the articles on the topic The JS Call Stack Explained In 9 Minutes. All shares of https://granthamandira.org/ are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.

Leave a Comment