Call Stack

[00:00:00]
>> Will Sentance: Let's just talk about this thread of execution that wove in and wove out. We knew that when we finished running multiply by two, calling it invoking it with parens, we knew that our threat of execution was gonna come back out to global. We kind of visually saw that it's being run within the code of global JavaScript needs to do more work on that is a track that more accurately and precisely, it has something called the call stack to do, so.

[00:00:25]
JavaScript keeps track of what function is currently running by using this final part of our platform of understanding our platform of the JavaScript engine called the call stack. Here it is, it is a traditional way of storing information on our computer, we have a number of ways, arrays, we have objects, we also have what's called stacks.

[00:00:49]
We're not gonna go deeply into their premise, but a key thing with a stack is when you add something to it, when you run a function we're going to add it to our call stack. So when we started running multiply by two up here, we add it to our call stack, multiply by two with the input of three.

[00:01:10]
Now JavaScript has certainty of what is currently running where is our thread of execution right now? Well, it's busy inside a multiple by two, cuz the one key single rule and stack is we're only engaged with a very, very top thing on it, that's the only thing we're interacting with.

[00:01:26]
So whatever's at the top of the call stack, that's where we are right now. As soon as we finish running that function, and by the way, Adam, actually, [SOUND] Jeff? Jeff, what, Jeff tells us, we have finished executing a function, what keywords says, end this function, move on.

[00:01:46]
>> Speaker 2: Return.
>> Will Sentance: Return exactly, as soon as we hit return this function execution context popped off the call stack, so what's top? That was underwhelming, so what is top of the call stack now? Well is there anything? Yeah, always on the bottom of the call stack folk is our global execution context.

[00:02:09]
Think of all of our code inside a function with the label global, and as soon as we turn on JavaScript, start running the code, run that global function run the overall code. So that's always as soon as you start running JavaScript, global is added on the bottom. And that's always there, so when we start running multiply by two we add it on top, when we finish running it, we remove it, and where do we go back to?

[00:02:31]
Well don't panic, what's left on the call stat, Kayla?
>> Speaker 3: Global.
>> Will Sentance: Global, and there it is, excellent, thank you Kayla, there it is, when we start running multiply by two again with the input of 10, we add it onto the call slack, there it is. When we finish running it, we take it off, and JavaScript doesn't panic and go, where do I go?

[00:02:50]
It goes back to global, if I were to run another function inside of multiplyBy2, that would be added on top, another inside of that, that would be added on top. Finish running that one, do I go back to global? I go back to wherever I started running that function, in other words, take it off the stack and about where I was before and that's the key premise of a stack.

[00:03:12]
Okay, but we're gonna see the cool side quite a bit more over the session where there's a call feature. That is it people, that is the three core components of JavaScript, we have our memory to store data as we go through the code line by line. And amazingly, to store code functionality, and we can then run and trigger to run code whenever we want, that's not a small thing, that's quite remarkable.

[00:03:39]
And in a sort data, we saw code to run, think about it, you're literally able to start a little mini program of your choice at any moment in your code. And, then we have the thread of execution to go through the code line by line, a lot of the time it's storing data, but it's also taking some of the stored functionality code and saying start running it.

[00:03:57]
We create a little mini program, a little sub-program, a execution context into which we go and compartmentalize any data we're storing while we're inside that function. When we exit that function, all is deleted, besides whatever we return out, let's actually show that all is deleted, the size, whatever we return out, and then run another function do the same.

[00:04:23]
We keep track of the functions we're running and where our thread of execution is using our call stack.