Check out a free preview of the full JavaScript: From Fundamentals to Functional JS course:
The "Property Access" Lesson is part of the full, JavaScript: From Fundamentals to Functional JS course featured in this preview video. Here's what you'd learn in this lesson:

Objects are data structures that contain related properties of an entity. Properties can be assigned and accessed using dot notation. Bianca creates a basic object with a few properties to demonstrate this syntax.

Get Unlimited Access Now

Transcript from the "Property Access" Lesson

[00:00:00]
>> Bianca Gandolfo: [MUSIC]

[00:00:03] So, what are objects? How many here, people here have used, let's practice thumbs. Thumbs on objects. You've seen an object before. Everyone's gotta do it, even if you don't want to, you have to do it. Even Mark has to do it. So, what is an object then? Can you tell me what an object is?

[00:00:25] It doesn't have to be 100% the whole definition, but what's a characteristic of an object? I'm gonna sit here and stare at you until you answer, so.
>> Speaker 2: [LAUGH] A way to store data.
>> Bianca Gandolfo: Yeah, so it's a data structure in which we store data. That's important for a data driven application.

[00:00:45] We have to put our data somewhere.
>> Speaker 3: Properties methods?
>> Bianca Gandolfo: Yeah, so we can store properties on them. They can be any type. They can be a function, which would make it a method. Or it could be a string or a number. Or it could be another object or an array.

[00:01:01] What else do we know about objects? Yes.
>> Speaker 4: Key value pairs?
>> Bianca Gandolfo: Absolutely, so we have a key value pair, where the key is a string, usually a series of characters in a word that makes sense to us in some way. Blueprint of a class we have online, something that has properties, awesome.

[00:01:24] Cool, and all those things are right. So, an object is a data structure. We have key value pairs. We store our data in there and the data that we store at those property names can be any type. And just some overview of what we're gonna talk about today as far as objects is, we're gonna talk about property access, assignment, bracket notation, dot notation, when to use the brackets, when do the dots.

[00:01:51] What does it mean? We're gonna get into nested objects which is important when you, this is probably how how you're gonna encounter most of your objects anyway. In a nested data structure, usually the form of JSON. And you're gonna need to know how to traverse them and manipulate them to get that data out that you want as well as change them and send them back to your API or your back end or whatever you're doing.

[00:02:15] And we're gonna talk about iteration and how which is just a fancy word for looping really. Cool. Awesome. So what we have here in this first slide is we have a variable called box in which we're storing an object literal. So we just have an empty object here and we're storing in a variable.

[00:02:41] Cool, whoops. And here we have something called dot notation. And we're just creating a property on our object. And we do this by using a dot, property name equals whatever value that is. And again, the value here can be any data type. Even another object. Here's just a visual of what that would look like.

[00:03:08] We have a property material here, and a value here cardboard. My question to you is when are some other times that you've seen dots in JavaScript?
>> Speaker 4: jQuery chains.
>> Bianca Gandolfo: Yeah, you use them in jQuery. You guys have typed a bunch of dots in JavaScript before. What about online, do we have any experience using dots?

[00:03:44]
>> Speaker 3: Like in the URL's?
>> Bianca Gandolfo: In URL's? Yeah dot com, that's true, that would be a string normally.
>> Speaker 5: Function calls?
>> Bianca Gandolfo: Who said that? Function calls, yeah so if we have a method, we use a dot. Where else have we seen dots? So I feel like these guys in the middle row to the left are averting their eyes so when have you used some dots in JavaScript.

[00:04:16] In general. Just-
>> Speaker 6: Navigating directory structure?
>> Bianca Gandolfo: Okay. Sure.
>> Speaker 6: I haven't touched JavaScript in a few months, so refreshing.
>> Bianca Gandolfo: Okay. You can open up your text editor, look at some old code. Command F, just a dot, and let me know what comes up. What about in the very back?

[00:04:39] When have we used dots in the very back? Anyone back there alive? You guys have never used a dot in JavaScript? Have you used a dot? When have you used a dot?
>> Speaker 7: In objects in order to refer to the value of [INAUDIBLE]
>> Bianca Gandolfo: Yeah. Absolutely. To get the value of an object.

[00:05:06]
>> Speaker 7: [INAUDIBLE]
>> Bianca Gandolfo: Mm-hm. Cool, yeah, so we can't use weird characters in dot notation. What about in the front? Did you answer the question yet?
>> Speaker 8: Some people might use it for a name space. I keep referencing that that's not much more than traversing an object.
>> Bianca Gandolfo: Yeah, totally.

[00:05:27] What about here with the stripe shirt?
>> Speaker 9: Properties?
>> Bianca Gandolfo: Yeah, someone accessing a property.
>> Speaker 9: I don't think we said that.
>> Bianca Gandolfo: What about like dot length on an array? Who's done that? Dot length? Or what about, dot push, dot pop, you know, object dot keys. So we use, we use dots a lot.

[00:05:54] And what I'm gonna, to let you know is that whenever you use a dot you know for sure, unless it gives you an error, whatever's to the left of the dot is an object. And, so whether that's an array or a function, it's still at it's core, an object, and those rules of syntax rules of dot notation, also bracket notation, which we'll go through soon, stay the same.

[00:06:17] And so, that's important. That's important that all these things are objects and that we understand that as we're going through this workshop together. Cool. So we used dot annotation to add a property and now we're using dot notation to access a property. What is whenever I have these two question marks here that means I want you to answer the question.

[00:06:44] So what about plaid shirt, second row, here of the glasses who's not paying attention to me. No worries. So, what is this gonna return?
>> Speaker 9: Cardboard.
>> Bianca Gandolfo: Yeah, absolutely. It's going to return a stream, cardboard. Just like that. And so that would be what we call access with dot notation.

[00:07:09]
>> Speaker 10: Does your, does your slide deck move mine on my screen if I'm watching down there?
>> Bianca Gandolfo: I don't think so. I don't think so. The URL does reflect which line I'm on. Could you see that?
>> Speaker 10: Yeah.
>> Bianca Gandolfo: Yeah, so. Cool, and so here we are, we are returning that value cardboard and we're saving it in a variable cb.

[00:07:36] You've all done that before, right? Raise your thumbs on that, we've all done that. Great, good. If you haven't, I don't know. I don't know what to say. So, we just said that this is cardboard right? So here we are, we're creating an empty object, we're adding a property cardboard.

[00:07:59] We're using dot notation to access the value cardboard and we're storing it in the variable cb. Then once we type out cb, and you can imagine that this is in the console, it's gonna print out cardboard. And what happens if we say box.material and we assign it to titanium.

[00:08:20] We upgraded our box. We're no longer a cardboard box and now we have titanium box. What does that, how is that gonna affect cb?
>> Speaker 10: Still cardboard.
>> Bianca Gandolfo: Still cardboard. What does everyone, does everyone agree? Still cardboard? Not still cardboard. We have some mixed feelings. And I'm going to assert that it is gonna be cardboard.

[00:08:46] And this is an example of something we call storing things by value, which we hopefully will get to today. But it's just important to note that when we access the variable cardboard here, we're not actually looking up in our code and then referencing box.material. We're actually looking in memory where we had stored whatever value box.materials returning.

[00:09:14] And since box.material is returning cardboard, cb now only stores cardboard with no reference to box.material. And therefore cb here is going to be cardboard no matter if you change box.material later on in your code.
>> Speaker 10: So to change cb you explicitly then have to assign it whatever you're going to assign it to new values?

[00:09:42]
>> Bianca Gandolfo: Absolutely. Absolutely. And just a side note, this is dangerous, but just a side note, that this isn't true for objects, arrays and functions who are stored by reference. So this would be the opposite for that. But I'll hopefully get into more detail about that later.
>> Speaker 10: Just to refresh on the dot material, so the second line when we're using quotes, that's just when we're not using dot notation?

[00:10:13] So if I wanted to put material in quotes, obviously not with dot notation but.
>> Bianca Gandolfo: So dot notation assumes that it's a string. So you can assume that material, the property material stored as a string which has quotes around it. The syntax you won't use quotations, good question.

[00:10:38] Cool, so, we've discussed that box.material is gonna return cardboard, what if we do box.size, what is that gonna return? What is it?
>> Speaker 7: Undefined.
>> Bianca Gandolfo: Undefined. Thank you guys for answering that all in unison, that was beautiful. Just kidding. So undefined, why am I writing undefined here with no quotes?

[00:11:02]
>> Speaker 7: Undefined is a type.
>> Bianca Gandolfo: Yeah, undefined is its own type. And therefore, if we put quotes around it, then it becomes a string, and it's gonna mean something completely different. So, when we do a property look up on something that doesn't yet exist in our object, we're simply gonna get undefined.