Lesson Description
The "Call Stack" Lesson is part of the full, JavaScript: The Hard Parts, v3 course featured in this preview video. Here's what you'd learn in this lesson:
Will explains that functions are code that's defined and saved. They are called or executed later by using the function's name followed by parentheses. Calling a function creates a new execution context containing its own memory and thread of execution. The mechanism JavaScript uses to manage the order in which functions should be run is the call stack.
Transcript from the "Call Stack" Lesson
[00:00:00]
>> Will Sentance: How is the function actually saved in memory? We're going to see that in our type coercion section, so we will see exactly how it's saved, because we're going to see that some things are saved directly in our memory, and some things are saved, we heard the word pointer earlier, but some things are saved as references, as links off to somewhere else in memory, and that might change their behavior versus things that are saved directly.
[00:00:33]
But unless it has a consequence, which in this case it doesn't, we're just going to show it saved here for now. But in practice, there will be some scenarios that we'll see in our type coercion section where the fact that it's not actually saved per se directly there will have some consequences, but it has no consequences here, so we just save directly in memory here. Great question, yep, Mark. Are you going to get into the call stack, because it doesn't seem like it has anything to do with this code.
[00:01:03]
Let's see. So, functions, code that we define and then store, define, declare, and then we use. How many times do we define it, Austin, how many times do we define our function here? One time. Right, and how many times can we reuse it, use it? As much memory as you have. Yeah. Yay, excellent. So our execution context, when we ran the code, when we ran the overall file of code, it had two parts, thread of execution and memory.
[00:01:32]
When we ran a function, we got to create two of those again. Just for running that function, the thread of execution and memory went into that function. Now we knew where, after finishing running multiplied by 2 the first time, we knew to come back out to what they call the global execution context, that's the main one as soon as you turn the file on. But how does JavaScript know that? It actually doesn't automatically know.
[00:01:59]
In fact, it needs some way of tracking what function is currently being run, and when I finish running it, where do I go? Does anybody know, Chris? Well, I don't like knowledge questions. We already heard it said, so everyone together, how does JavaScript track what function is currently being run? And what function, when it's finished running, will it go back to, or where will it go back to, what data structure, what form of storing information, where we only care about the very top thing, that's where we currently are, and when we finish with it, we get rid of it, you could say we pop it off.
[00:02:39]
Yes, what do we call that? The call stack, exactly right. Oh, that's good, that was an extra. The call stack, JavaScript needs to keep track of what function is currently running. The last of the big three parts involved in the runtime of JavaScript, everything else is a feature of all this. Yeah, or adjacent to all this. These are the big three parts. Do code, save stuff, keep track of what code's being run.
[00:03:07]
Those are the core bits you need. The third bit there is the call stack, that keeps track of what function is being called. Cold, there it is, is what function is being, I can't pronounce it in the American sense. What function is being called here? What function is being called, and that is kept track of on a way of saving stuff in a computer known as a stack. We're not too worried about the intricacies of it right now, but the key thing to know is it only cares about what is on the very top of it.
[00:03:47]
So when we start running our multiplied by 2 function with our input of none, which was 3, what do we add to our call stack, Michael? We're running multiplied by 2 with the input of 3, we're calling multiplied by 2 with the input of 3, we want JavaScript to know we're running it. JavaScript wants to keep track that that's what it's currently running, what does it add to our call stack? Multiply by 2, with the input of the 3.
[00:04:16]
Yeah, spot on, there it is. We add multiply by 2 with the input of 3 added to our call stack, while we're inside this function, there it is on top of the call stack. As soon as we exit out, where the heck do we go? Where did we say we went to Brady after finishing running multiplied by 2, we finished in the multiply by 2 execution context. Which execution context did we go back to? The global. The global.
[00:04:44]
Well, so we remove multiplied by 2, let's do it. We remove multiply by 2, and we go back out, and it's there from as soon as we start running our code, our file, maybe you've seen the main function in other languages. Think about Java, we don't call this one, we don't say run global, we just start running JavaScript. As soon as we do, we turn on the global execution context. When we start running multiplied by 2, the bit of 3, we add it, when we finish, we pop it off, we remove it.
[00:05:14]
JavaScript doesn't go, shoot, where do I go to? JavaScript goes, what's now top of the call stack, which now Brady is what? Multiply by 2. Well, right, when we finished running multiply by 2 with the input of 3, what's now top of the call stack? Oh, what's now at top of the call stack. Um, the global. Global, exactly. We go back out to global, we then hit the next running and multiply by 2. Brady, what do we add to the call stack?
[00:05:46]
Multiplied by 2. With a value of 10. Excellent. We finished running it, our thread of execution finishes inside, we hit what keyword Brady tells us to exit out of multiply by 2's execution context. Return. Return, excellent. That's how we know to exit out, that's how JavaScript knows to exit out. Where does it go back to Brady, what's now, after therefore popping multiplied by 2 off the call stack?
[00:06:16]
What's now top of our call stack, Brady? Global. Global, he's spot on. And we go back to global. Whatever is top of the call stack, that's what's currently running. When we finish running a function, we hit what keyword everyone together tells us, exit this function now, return, well done. And we hit whatever's still top of the call stack, global. Do we ever take it off? Well, when exactly, when JavaScript code finishes, and we might see later on, not only when JavaScript code's finished, but there's nothing else waiting to one day come back and be run.
[00:00:00]
Huh. Imagine if there were things that could come back in and arbitrarily start running in my code. Well, we'll see all of that.
Learn Straight from the Experts Who Shape the Modern Web
- 250+In-depth Courses
- Industry Leading Experts
- 24Learning Paths
- Live Interactive Workshops