This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Property Access" Lesson
[00:00:00]
>> Bianca Gandolfo: So we're gonna start with our core data structures which are objects and arrays. We're all familiar with objects and arrays? We've used them, great. So one of the things we're gonna talk about, we're gonna talk about property access, the dots and the brackets. We're gonna talk about destructuring, nesting, loops, and nesting with destructuring.
[00:00:23]
>> Bianca Gandolfo: Great.
>> Bianca Gandolfo: So.
>> Bianca Gandolfo: Here we are with our object literal, it's a person, we're gonna introduce Mrs. White here. Mrs. White is one of the core people, one of our suspects for the murder. Yeah, has anyone here played, Clue? Okay, really, like not a lot of people?
[00:00:49] It's like a pretty popular game, there are eight or so characters depending on the year. Mrs. White, she is the maid or the housekeeper of the mansion of Mr. Body. And so here we are, we're just gonna construct a person object. We're gonna give it a property name, and we're gonna assign that value, Mrs. White.
[00:01:17] And you can see here.
>> Bianca Gandolfo: This is an object literal notation, right? So, you've seen probably both of them their equivalent.
>> Bianca Gandolfo: Do we need this quotes here?
>> Unknown Female Student: No.
>> Bianca Gandolfo: No, why not?
>> Unknown Male Student: Just cuz it's, [COUGH] one word.
>> Bianca Gandolfo: Yeah, cuz it's a string and it will automatically.
[00:01:46] So, we can delete that if we wanted, whoops, is this editable? Maybe it's not, no, okay, awesome. So we've seen the dot with the access in assignment. What are some other times you've seen the dot in JavaScript aside from with objects?
>> Bianca Gandolfo: How about someone in the second row?
[00:02:16]
>> Bianca Gandolfo: I guess cuz, one, two, three nodes goes, do you guys know how to play that game?
>> Bianca Gandolfo: You get to go.
>> Unknown Male Student: When you access some method.
>> Bianca Gandolfo: Yeah.
>> Bianca Gandolfo: Yep, anything else? A method on what, though? So when you access a method on an object, sure.
[00:02:37]
>> Unknown Male Student: Method on that object.
>> Bianca Gandolfo: Cool, what else, where else have you seen a dot?
>> Bianca Gandolfo: Any other dots out there? So we see them with objects. Have we seen them with functions?
>> Bianca Gandolfo: Oops.
>> Unknown Male Student: Like for promise function to this?
>> Bianca Gandolfo: Yeah, like a dot then. Yeah.
[00:03:08] Yeah, with a promise. Awesome. What about with arrays?
>> Bianca Gandolfo: You're nodding your head.
>> Unknown Male Student: If you're like, trying to get the elements of the array.
>> Bianca Gandolfo: You use a dot for that? Or do you use a bracket?
>> Unknown Male Student: You use a bracket.
>> Bianca Gandolfo: Usually you would use a bracket, okay?
[00:03:33] Has anyone used a dot with an array? Think hard, in your life.
>> Unknown Male Student: A nested object.
>> Bianca Gandolfo: Yeah, so if you're asked, if you're accessing it in a nested object, that is true. It's not where I was going, but-
>> Unknown Male Student: Array methods? Yeah, like prototype methods?
>> Bianca Gandolfo: Yeah, dot prototype, yeah.
[00:04:00]
>> Unknown Male Student: Using native methods?
>> Bianca Gandolfo: Is that online?
>> Unknown Male Student: Yeah.
>> Bianca Gandolfo: Yeah, using like array dot push, yeah that length. Are you guy's thinking that and just not telling me? Were you guys thinking that and just not telling me?
>> [INAUDIBLE]
>> Bianca Gandolfo: You promise, you guys are gonna be honest with me, right?
[00:04:17] Because I'm trusting in you. Okay, what did you say Mark, I'm sorry.
>> Mark: String methods as well like, dot split or.
>> Bianca Gandolfo: Yeah, absolutely.
>> Mark: By the way, I'm just relaying the stuff from online.
>> Bianca Gandolfo: Yeah, cool, thank you.
>> Mark: Yeah.
>> Bianca Gandolfo: Yeah, so, just gonna put it in your head that anything that ever uses a dot in JavaScript is an object.
[00:04:43] Just gonna leave that with you. All right.
>> Mark: This person said, the spread operator.
>> Mark: Yeah, ES6 fanciness.
>> Bianca Gandolfo: Mm, yep. Okay, so here where you're signing. What's gonna happen on this question mark area? Can you guys see this? So what's gonna be returned here? What is this gonna, how about in the front row?
[00:05:14] Someone who hasn't said anything yet. How about, grey sweater? Everyone's wearing a grey sweater. Third from the end.
>> Unknown Male Student: It's gonna error.
>> Bianca Gandolfo: Why?
>> Unknown Male Student: Unless it's just going to return the value.
>> Bianca Gandolfo: Yeah? Now, return the value Mrs. White which is a string. Yeah.
>> Unknown Male Student: But it doesn't like change the state or anything?
[00:05:40] I mean, does it actually accomplish anything? Just that expression?
>> Bianca Gandolfo: It's just gonna return. This is gonna evaluate to a string that says Mrs.White.
>> Bianca Gandolfo: Does that answer your question?
>> Unknown Male Student: Right, but it doesn't do any assignment or anything.
>> Bianca Gandolfo: Nope, assignment will only happen if you explicitly do it.
[00:06:03] Right? With the equal sign? Otherwise, it's a lookup. Cool.
>> Bianca Gandolfo: All right. So one thing that can be a little bit confusing is about how our data is stored in memory. So it's pretty simple when we have a variable and we're storing a value, right? We mention that this is gonna evaluate to?
[00:06:33]
>> Unknown Male Student: Mrs. White.
>> Bianca Gandolfo: Mrs. White. And so who is a variable? And so it's kind of like, I kind of think of this as a filing cabinet or a filing folder, file folder, a folder, in a physical cabinet. I don't know if you guys have seen those lately.
[00:06:52] But I think there's still around. So this is the label, right? The variable name and inside holds a value, right? And this value is a string, it's a primitive value. And so that's all fine and good, that's easy to visualize, but it gets a little bit more complicated when we start talking about objects.
[00:07:15] So we store primitive values like the string, Mrs. White, pretty much with the variable name. You can think of it that way, it's not the most accurate statement that I'm saying, but in a practical sense, that's what you need to know. So that's by value, so when I reference who comes to log it or something, it will look in memory for this label, and it will return this value, yeah, sounds familiar.
[00:07:55] Yeah, okay. So, what if, so there's that. And so who's gonna be Mrs. White? We reassigned it to Mr. White. What happens? So let's first take a look at when we assign Mrs. White. So we do something where, and again, this isn't the most accurate representation of memory, right?
[00:08:31] And that's okay. We don't need to have a super accurate representation. But if you understand this, it's good enough for you to understand how it works. I just wanna say that for people who are gonna be like, wait, but what about, and this, yeah, yeah, but that's not important.
[00:08:46] So we hold a reference to Mrs. White. So we have our property name. Person holds the property name, and the property name holds reference to the value, right? And so we point to it, yeah? Is this, we know, we're good? Okay. And then, right, so who, it's just going to then be stored separately as Mrs. White, right?
[00:09:16] Because we're storing a primitive value. It's gonna create this but when we create, Mrs. White.
>> Bianca Gandolfo: It's a data structure that looks something similar to this in memory. What happens when we reassign person.name to Mr. White.
>> Unknown Male Student: Personal reference is updated but who isn't?
>> Bianca Gandolfo: Yeah, so we change our pointer to Mr. White.
[00:09:48] Really Mrs. White would just, this place in memory will get garbage collected and will go away. And now, person.name, if we reference it down here, it would be Mr. White. But who would be, Cameron?
>> Cameron: Would remain the same.
>> Bianca Gandolfo: Yeah, it would remain the same. And so, we call this storing a value by reference, or by value.
[00:10:15] Right, and this becomes more important when we start passing things to functions, and we go through sort of a journey with data in our functions.
>> Unknown Male Student: And this is by value?
>> Bianca Gandolfo: So we store permanent values by value. What's a permanent value? No, you're just making a face like you didn't know.
[00:10:40] I pointed at you, I apologize. But I'm still asking the question. Do you know what a primitive value is?
>> Unknown Male Student: I do not know.
>> Bianca Gandolfo: Just ask me a question or make a guess.
>> Unknown Male Student: Primitive value, is it the first thing that assign or.
>> Bianca Gandolfo: It's a good guess.
[00:11:06] Cuz it's like primitive. It's first. I see where you're going. I can tell you're a poet. So a primitive value is basically, anything that's not an object, well, okay, I shouldn't say that. A primitive value is a string, number, boolean, null, undefined, these kind of things were a non-primitive value would be an object, array, a function.
[00:11:36] Promise, things like that. Yeah, so primitive values get pass by value. While non-primitive values get pass by reference. So we have these pointers in memory for objects. And that means, if you pass something, or reference a primitive value, it gets its own spot in memory every single time.
[00:12:04] While with functions and objects, you're often sharing the same place in memory. And so if you're changing that, it can affect things in unusual ways if you aren't planning for that. Yeah, has anyone-
>> Unknown Male Student: Could you say that one more time?
>> Bianca Gandolfo: Yeah, sure, so when you store a non-primitive value somewhere or you pass it to a function, for example, It's passed by reference.
[00:12:36] Which means that you're passing like a pointer to it. So you see how this arrow is pointing to this value? You're kind of passing the pointer around to it. And so, if you have multiple things pointing, it's not making a copy. So, if you're sharing one instance of the object and so if you update that object, and you're pointing to the same object over here, that will also be updating.
[00:13:04] And so that can affect your code in unusual ways. Yeah, cool. But if you're passing around primitive values, you don't have to worry about that. It makes a copy every time. And we're all happy.
>> Bianca Gandolfo: How could this be tricky?
>> Bianca Gandolfo: How about you, yeah.
>> Unknown Male Student: Well, in certain contexts you might not expect for instance that, that variable who would be, you might expect that it would be updated.
[00:13:39]
>> Bianca Gandolfo: Mm-hm.
>> Unknown Male Student: And it's not. So you might expect it to have a certain value and in fact, it has a totally different value.
>> Bianca Gandolfo: Yeah. Yeah, absolutely. So if you expect primitive values and non-primitive values to have the same behavior, either way, you're gonna have something that you don't expect.
[00:13:58] And to be a good programmer, you wanna understand your language enough so that things don't happen that you wouldn't expect as much. I mean, it still is gonna happen. Maybe, I don't know, I would be surprised. I was gonna give you a time period about when, how many years of JavaScript, what you need before it stops doing things that you don't expect.
[00:14:21] But I'm like, wait a minute that's, I think that it'll always do things that you don't expect, and then it will always evolve. But you wanna minimize those things.
>> Unknown Male Student: Yeah, if you pass an array to another method, and that method updates that array, you wouldn't expect it to be updated where you're holding it outside that function.
[00:14:42]
>> Bianca Gandolfo: Yeah.
>> Unknown Male Student: Right, that's the big-
>> Bianca Gandolfo: Yep.
>> Unknown Male Student: Caveat. Versus if you pass a string around, the string isn't gonna be modified in both places in that function and in you're copy of it. Cuz they're copied, primitive values are copied, versus an array is just sort of passed around willy-nilly.
[00:15:00] That's why when you do these array methods and stuff, you usually wanna return a copy or a copy calling that array. That's a new array after that method. So you're not accidentally modifying it in both places.
>> Bianca Gandolfo: Yeah, absolutely. And that's why it's really popular to, or it's recommended that you don't mutate your data structures, that you just copy them and then return new copy.
[00:15:29] So that you don't have the side effect of your code being updated in various places. So you pass your array, or you pass Mrs. White to a function, right? And this function changes as a property to this object, right? And you want them to be separate, you would copy it and then return the copy, versus changing the actual original data structure.
[00:16:04]
>> Bianca Gandolfo: Does that make sense? Cool. And mutating just means updating and changing. And then immutable means that you can't update or change it. And I'm always entertained by just how we have to have fancy words for very simple things, but it's science.
>> Bianca Gandolfo: Great, awesome. So what if we go through all of this blah, blah, blah.
[00:16:34] Our person is now Mr. White. And again remember, we're trying to figure out a mystery here. So we gotta figure out the story, we gotta know the facts. So what is this gonna return?
>> Bianca Gandolfo: Blue shirt in the middle here.
>> Unknown Female Student: Looks like it would return undefined if story hasn't been-.
[00:16:59]
>> Bianca Gandolfo: Yeah.
>> Unknown Female Student: Named anywhere.
>> Bianca Gandolfo: Yeah, absolutely. So it's undefined and so, my goodness. What is happening? Mr. White says, but my wife is an array of sunshine. She would never kill anyone. Hmm, what a development.