This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.
Transcript from the "References" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Justin Meyer: Let's observe a really simple set up here and kind of think about this out loud. Here we have me which is this new object. It's gonna have a name and it's gonna be another object, with a first and a value of string justin. So me.name.first will be justin and we have a second declaration which is name.
[00:00:26] And this looks like it's just gonna be a shortcut, name = me.name. So name, we're gonna reassign it down here to a new object called first: "alexis". However, at the end of this all this whole execution, me.name.first is still gonna be justin. Does anyone know or think they know why this is the way it is?
[00:00:55]
>> Student: Different scope,
>> Justin Meyer: Different scope, okay, okay.
>> Justin Meyer: How many people look at this and say this is crazy, that slide's wrong, hold on, let me type into a console. No, nobody? All right, we're gonna deep dive and break into this on why things are assigned the way they are, why this actually results the way it does.
[00:01:20] With nice graphics and memory. So, to break this down let's talk about how things are assigned in memory. We'll talk a little bit about reference and value types if you've ever heard something by reference, something by value. We're gonna get a little bit into that now. My disclaimer, we're gonna get into a really simple implementation of a memory stack in a browser.
[00:01:48] Inspired by v8, but this is not v8's implementatio,n browsers today can do really, really smart things with memory allocation. But we're gonna pretend this is 1995 when we're inventing something. So, here we have the statement above var str equals this primitive string hi. Here we have our blank memory stack.
[00:02:11] And we're gonna use this as a graphical representation of what we have in memory. This will be our call object. Or our global scope. So this is where we're gonna start, this is the initial representation of what we have in memory. We've opened the browser, it hasn't really done anything yet, we haven't executed any code.
[00:02:30] The way the parser is gonna comes through this is it's gonna see this primitive string hi. And the first thing it's gonna do, cuz it's gonna add it out there in the scope. We just have this string in memory and it's gonna give this an address. So here in this case, we have 2001, it's gonna say what type it is, it's type string.
[00:02:52] The length perhaps and then the actual value. This is where it's gonna be in memory. But nothing is really linking this up, it's just something in space. Then the parts is gonna come across the var str. So it's going to create our str pointer in memory. That's all it's gonna do, it's just a pointer pointing to nowhere.
[00:03:14] Right now it's technically undefined if you were somehow able to stop it here. It's gonna declare a pointer, give its own address, but that's all it's gonna be. It's a pointer to nowhere. Then the real magic happens with the assignment operator. The assignment is gonna take that pointer and now we're gonna have an address.
[00:03:38] At 1003 it's gonna say hey, str points to address 1003. All right, I'm sorry, 2001. Which is gonna give us its type, any arbitrary properties and its value. This is a really simple implementation of how primitives are used in memory. Does that make sense to everybody? It's a little bit different way to look at things, but it really helps understanding reference versus by value.
[00:04:10] Let's take a little bit more complex example. So here we have, we're gonna start with a clean slate at the bottom. But we have var obj,you wanna create a new object and we have object.txt. We're gonna assign some key to this object and set its value to some primitive string.
[00:04:29] So we're gonna start at the same point and the parser's gonna come to this curly brace first and create a new object in memory. For our purposes, for mostly slides, we're gonna denote these with circles. This will be a new object in memory, will just be a circle.
[00:04:44] And then we're gonna create its address allocation or say hey, we have an object. Doesn't have any properties. This is where it's gonna live in memory. Soon it come across to the other side of the coin. It's gonna say hey, I have a pointer, obj. Let's create that in our scope.
[00:05:04] It's gonna be at address 1002. And we're gonna assign it's this 2001 address. Obj as an empty object that lives at address 2001.
>> Justin Meyer: Then we're gonna come down to the next line, parser's gonna come across to see our primitive string do the same thing you did before.
[00:05:26] Create an empty string or a primitive string in memory. Give it its own address. We have string with this length, its value down to 2101, it's gonna come down to obj. On the second line, come across to our .assignments. This is gonna create our new txt pointer which is gonna point to our primitive string, hi.
[00:05:55] It's gonna increase our properties to one, we're gonna get a new address assignment. 2003 is our txt pointer and its address is gonna point at 2101. This is where txt lives in memory. So you can think of a hash map in memory as just a bunch of pointers telling you where its real values are
[00:06:21]
>> Justin Meyer: At a very high level. So far so good? Sure?
>> Student: A clarification. So the diagram demonstrates a variable containing a primitive value, it uses its own storage space. So values based on such variable are gonna be at a different storage location.
>> Justin Meyer: Say that one more time.
[00:06:45] That's-
>> Teacher 2: I think what people are asking for is clarification on call-object variables, what's going on there, yeah.
>> Justin Meyer: The call-object are variables.
>> Justin Meyer: When you're creating a new string, I guess maybe I still dont know how to tell, [INAUDIBLE] that make sense.
>> Teacher 2: Go back to the-
[00:07:13]
>> Justin Meyer: Let's go back to the first slide.
>> Teacher 2: To the first slide, yes. Yeah, right after the string is allocated but before the str variable is allocated. Okay, so whenever a page, like whenever you're running JavaScript. Anytime a variable is created, variables really like a pointer, point to some data somewhere.
[00:07:40] All those pointers need to be captured in something, so when something else is looking up str, it looks up hey, what's the value of s? Where does str point to? Okay, now I got the value of the string. So every script tag, you just have a script tag and has got some code in it.
[00:07:57] It runs in a context of some sort but you guys might call context, another name for is a call object. A function has a call-object, but there's a global call-object and that's like the variables that the window has in it, right? So when a variable is created, it always goes in the structure, right?
[00:08:18] It goes in, we draw it over here in kind of two dimensional space. But it's also kind of captured in memory that we show in here, right? So we'll see that will be executed function, another one of these things get created to. We'll understand it better later, but that's what it's there, just think of it for now where variables and their pointers go.
[00:08:48] That's what a call-object is and I'm gonna paste the link to a natural discussion I had with someone in the v8 team. To give you what is actually going on, but I worked through it. And this isn't good enough for presentation that you won't get the answer wrong.
[00:09:09] [LAUGH] For what JavaScript is doing. But the reality of this is a lot more complex, but this is a good rule of thumb. So I'll posts that too.
>> Justin Meyer: Cool? Right on.