Object Dot Notation

[00:00:00]
>> Will Sentance: Let's say we have this application storing each user in my app with their respective data. Let's keep it really simple. We already have lots of data and lots of users. Keep it really simple, user1 name Tim, user2 name Stephanie, score 3, score 5.
>> Will Sentance: The functionality I need to have for each user, again, simplify just the ability to increment to increase the scores user by one, sorry, sorry, user score by one.

[00:00:27]
In fact, there'd be a ton of functionality here. Now, two things, I do not want to have to run all over my fall of code or my falls of code to try and hunt out that increment function. In my ideal world, wherever user1 is in my application right now being passed around into different bits of my application, I have that increment functionality right there adjacent to it.

[00:00:49]
And ideally, it's somehow pretty much prescribed to only be applicable to the user1 data or to the user2, and to the user2 data and not suddenly gonna be tried to apply to my lead table. I'm going to try to increment my lead table, normally a thing. Yeah, so how could I bundle up in one package in one kind of organizing data structure, that data with the functionality so I know that they're right there next to each other.

[00:01:20]
And I can even use a special,
>> Will Sentance: Dot, [LAUGH] dot perhaps in order to use the functionality on that data. How can I bundle functionality and data in one place? Braden, you got any idea?
>> Speaker 2: In object or bus.
>> Will Sentance: In an object, store in object. Let's keep it even simple for now.

[00:01:38]
Store in an object, that's exactly right. So objects store functions with their associated data. This is, well, not fully strictly implemented in JavaScript. This is the notion of encapsulation. It's saying protect and bundle up in one place, functionality and the data that it applies to, the data to which it applies, [INAUDIBLE] grammar, other data to which it applies in one little bundle package.

[00:02:04]
And it's gonna transform how we can reason about code. Look at this, no hunting all around my 100,000 lines of code, my increment function, I literally just put dot and there it is. And it's gonna turn out everything that we try and do today, everything we try and do today, getting into my optimal position.

[00:02:23]
Everything we try and do today is really just gonna be about can I achieve this? Can I achieve running functionality on the pertinent data? Not other data, not random quiz questions, not randomly league tables, but on the user ones data and not have to go hunt for the functionality.

[00:02:44]
But it's right there. I put dot and in the console, I'd even see the increment kinda pre-filled for me, predicted for me. That's how easy it will be to find the pertinent functionality for my data. That's my goal. Well, you know what, I did it here. I did it here, done.

[00:03:04]
My paradigm's done. I got data, functionality, and an object done. But let's keep creating objects cuz it's gonna turn out that we're gonna very quickly get tired of handwriting these objects. But let's do it a few times. And in doing so, also get familiar with a few different ways to go about creating objects.

[00:03:22]
Can people think of another way? Here I've created an object, literally call it the full populate object, and I've prefilled all its values. What can I do instead? If I would just create an empty object, Braden, how could I add properties to it afterwards?
>> Speaker 2: Make a class.

[00:03:37]
>> Will Sentance: No, just keep it really simple. Yeah, Matt?
>> Speaker 2: Use a dot operator.
>> Will Sentance: Exactly, dot notation, there it is. Creating user2 with dot notation. Declare empty properties with dot notation. Let's get going through. I just wanna make sure that we're all on the same page with our interaction with objects.

[00:03:55]
Okay, Todd, line one here, what are we saving in global memory?
>> Speaker 2: You are defining the concept user2 as an empty object.
>> Will Sentance: Yeah, big old empty object. That's not really a thing, just an empty object. There it is, big old empty object, assigning what property to it, Todd?

[00:04:11]
>> Speaker 2: The next line assigns name.
>> Will Sentance: Yeah, and assigning what value to that property?
>> Speaker 2: Ten.
>> Will Sentance: Yeah, sorry, [INAUDIBLE], so they call these different things, key value. I rarely hear that phrasing in professional code. We would tend to call it property name, and then the property value so, okay.

[00:04:31]
Next one is score and 6. And then, Matt, what are we doing in the last slide here? We're adding another property, yeah, what do we tend to call functions on objects, Matt, everyone?
>> Speaker 2: Method.
>> Will Sentance: Method, yeah, well done, exactly, method, well done, folk. [INAUDIBLE], there it is, and that's taking all of its code and storing it.

[00:04:51]
And as usual, we're not running that code but we are taking that entire function definition from the word function to closing curly brace storing on that object, beautiful