JavaScript: The Hard Parts Q&A: Global Memory and Call Stack

[00:00:00]
>> Will Sentance: One more thing, let's remind ourselves, we keep track of the functions being called in JavaScript with a call stack. It tracks, which execution content we are in? That is, what function is currently being run? And when we finish writing that function, where do we return to? The next thing down the stack.

[00:00:20] We start with one global execution context, and then we can have many function level execution context above. Well, I would love to see, if everyone's thumbs up, okay? I wanna see Matt's clarification, can you talk us through, Matt?
>> Matt: Well, I guess I just wonder how do we get from the function of multiply 2.

[00:00:39] And then we bounce down to the constant of output multipleBy2. I guess-
>> Will Sentance: See, this is why clarification is so great. What a great clarification from Matt, that was a confusion and interpretation that many, many people will have. And there is based in a, yeah, a misunderstanding, maybe?

[00:01:07] I don't know, whatever. Matt, great question. We do not jump back up to multipleBy2. When I run my 1, it says store, well, what does line 1 say in the code?
>> Matt: Store it in a function.
>> Will Sentance: No, what does line 1 say?
>> Matt: [INAUDIBLE].
>> Will Sentance: Yep, what does line 2 say?

[00:01:26]
>> Matt: Function is multiplied by 2.
>> Will Sentance: Exactly, it says go store. It says go store all the exact function text in that function, definition, go store it in the label multiplied by 2. After I've declared the function multiplied by 2, Matt, what if I were to write this?

[00:01:50] console.log, to log to my console, multipleBy2. What would I see in my console, Matt?
>> Matt: I don't know?
>> Will Sentance: Have a think about it, give it a shot. What would make sense? JavaScript sees the word multipleBy2, where's he go looking for it?
>> Matt: In the function.
>> Will Sentance: Where's it going looking for more multipleBy2, Andrea?

[00:02:19]
>> Andrea: The global memory?
>> Will Sentance: The global memory, what does it find?
>> Andrea: A function?
>> Will Sentance: The whole function definition. So if I were to console.log multipleBy2, Clara, what would I see in my console?
>> Clara: I don't remember exactly, but it says something like this is a function object.

[00:02:36]
>> Will Sentance: It will say this is a function object but it will actually be as the whole function. Depending on your console, it's really good point by Clara. Some basic, older consoles will just say, function but from dev tools, we literally say, [INAUDIBLE] console here. It will literally say, function multipleBy2 num, and then it will have return, it will have the whole code inside.

[00:03:04] So Matt, when we call multipleBy2 there in line 3, when we invoke, when we run it with did you see where it says comes output equal yet? We're not jumping back into the function, what are we doing? We're going into queue memory and we're grabbing this definition to use it, does that make sense?

[00:03:19]
>> Matt: It's already stored.
>> Will Sentance: It's already stored, the word function, the word const. All they're doing is saying, JavaScript, free up some space to store this stuff that's following. Does that make sense now. Matt?
>> Matt: So that's the state?
>> Will Sentance: That's our state, that's our live data. That's how, and that live data can include actual functionality, like that.

[00:03:37] Do you see that now, Matt, that when you're calling multipleBy2, you're not going back in the code back up to the definition earlier on. No, that definition is being grabbed, stored under a label in memory.
>> Matt: So that's the definition of the synchronous, line by line reading of-

[00:03:56]
>> Will Sentance: I don't know, I will say, essentially, we have taken our function definition, stored the what do I do line by line in memory under the label multipleBy2. When I run multipleBy2, I go look in memory, I find this code and I say, grab this code. Make some space to start going through it line by line.

[00:04:17] And just start doing it line by line, and storing stuff in memory there. When I finish running that function, well, where do I go next? Well, we had multipleBy2 on the call stack, I go back out to global. Art, go ahead.
>> Art: I was just curious, where did the call stack is located, is it also in the memory, the call stack?

[00:04:33]
>> Will Sentance: It is also in our memory, but for our purposes, we don't need to know exactly where it's being stored, but it's there in our JavaScript runtime. It's part of the JavaScript engine being run, make sense?
>> Art: Makes sense.
>> Will Sentance: All right. Go ahead, Griffin.
>> Griffin: Is there a different call stack for each JavaScript file if you're importing the stuff from one file to another?

[00:04:57] Does it import it into that one's call stack?
>> Will Sentance: If we have one JavaScript application running, it has one call stack now.
>> Griffin: Which is at the highest point, or what-
>> Will Sentance: When that's imported, you're taking code to be run, while it's being run in this environment, a single environment.

[00:05:22] But you're doing an interesting question which we're gonna go into here. But you can have multiple separate JavaScript call stacks run to all this. And that happens when you use things like web workers or other chart processes. Things which allow you to have multiple background areas in JavaScript, but we don't need to worry about that for here.

[00:05:42]
>> Griffin: Okay.
>> Will Sentance: Yeah, Mark?
>> Mark: I don't know how to pronounce his name, but he's asking about const num equals three, why did you write that?
>> Will Sentance: Good question, just to show some basic data being stored. We did not use num is 3, we just wanted to have some evidence that we can store data in memory, that's all.

[00:06:02] It was just for a pedagogical technique? Tell them that, all right?
>> Mark: Is the global thread and local thread different?
>> Will Sentance: No, it's the single thread. The thread is just a posh name. I think of the thread as some type of fancy, mystique-driven thing. All it is is just a posh name for we did line 1, then we did line 2, multiplyBy2, then we did line 3, declaring output.

[00:06:28] That said, we don't want to put it in output yet, we've gotta go run the function multiplyBy2. And so we stopped doing the code line by line globally, and started doing the code line by line inside the function body. But it's just more code to be read and done.

[00:06:42] So they are absolutely same thing, okay? Yes, go ahead, Clara.
>> Clara: Is there any reason you use const instead of var?
>> Will Sentance: Because it's a default. There's a default increasingly through ES2015. For anything, you should default to const, unless you're going to actually reassign it in memory. Because this num is never touched, we can use const.

[00:07:07] Because output is not being altered any way here, we can use const. So it's a sort of default rule, but you should always default to const for declaring what you previously would have thought of as declaring your variables. And then use let as a backup, if you're ever going to do some reassignment.

[00:07:27] And say, no, no, no, no, right now is 4, we're gonna make it 5. Right now it's a string Will., we're gonna make it a string Clara. Then you can use let, but otherwise, you should be declaring all your stuff with const. Okay, but think of it just it's vary, it's var.

[00:07:43] It's var but just has some special rules around it. Those special rules aren't going to affect us here, not in any of the stuff we're doing today. But think of it as var just as you know the behavior of var, think of it the same way here. It has some special properties but we don't need to worry about those right here.

[00:08:01] Those special properties being you can't change it. But besides that, we don't need to worry about those here. All right, so here we go.
>> Ameen: I have a question.
>> Will Sentance: Go ahead, Ameen.
>> Ameen: What about if the function is declared after it's been called?
>> Will Sentance: Yeah, I wanna hold on that question, Ameen.

[00:08:21] This is a concept known as hoisting, we don't need to in this, we're not gonna come to it. Again, it has no implications for the things we're gonna see today. So part of the challenge we will face when we're doing the hard parts, or the language, is figuring out which bits do we wanna dive deep on.

[00:08:38] And which bits we can say, you know what actually, that's not gonna have any implications for how we're gonna solve these challenges. So on that one, we'll hold on it.