Objects & Property Access

[00:00:00]
>> How we feeling? We got a lot of stuff under our belt so far. We've had all kinds of values we've talked about. We talked about strings, and Boolean, and numbers, and arrays now. Look at this, we're really getting a lot of little feathers in our cap here.

[00:00:13]
There's one more important type of data that we really need to talk about a little bit more detail, and that is objects. So we've seen some objects before already, like, for example, at the beginning, I showed an object called JS with some facts about JavaScript. Like that its birth year was 1995, and that it's an awesome language.

[00:00:39]
True, it is awesome. So [LAUGH] this is an example of an object. What do you notice? What do you notice in this, so this is the declaration and assignment of a variable JS, that assigns that variable to an object, to a piece of data of type object. What do you notice?

[00:00:59]
>> Squiggly.
>> Squiggles, squiggly lines, squiggly braces, yes. We call those curly braces, these characters at the beginning and end here. Curly braces, yes. Curly braces in JavaScript have a bunch of different uses, but one of their uses is to indicate an object is in here. What else?

[00:01:24]
>> Attributes?
>> Something from the chat?
>> It has a property and value.
>> Properties and values, yes. So we're gonna talk about this. So we have these colons on each line here. And to the left of the colon is something that doesn't have quotes around it in this case, and then on the right is some kind of value.

[00:01:48]
And so these are sort of, we could think of them as pseudo variables almost. Each of these little names, like abbreviation, is awesome, birth year, is kind of like a little pseudo variable within my object that points at a particular value. So, similar to how in our program, we can declare different variables to point at different values, objects let us have one value, this object that has what we call properties that point at different values.

[00:02:33]
So when we want to get the value of a property in an object in JavaScript, we use these dots. We've seen these before, right? And so if I want to get out a value from my object, I can use dot, and then the name of the property that I pointed at that value to retrieve that value.

[00:02:55]
So let's grab our JavaScript object. I'm going to, Let's put our JavaScript object into our console. So now JS, if I evaluate it, the console tells me yep, that's an object, and it has some stuff in it, and it looks pretty similar to how I declared it. And now, if I want to get out the word JavaScript, I can type js.name.

[00:03:22]
And JavaScript is going to look up the JS object and look up the name pointer within that object and find the string JavaScript. How can I get the Boolean true out of here?.
>> Js.isAwesome.
>> Js.isAwesome, true, exactly. So this dot notation is how we access values that are kind of collected as properties of that object.

[00:03:58]
>> Does JavaScript care if you have multiple properties and values in one line, or do you have to break it out by line?
>> Do we have to break it out by line? Great question. So here, for example, I have each property and its value on a different line.

[00:04:17]
We could create a new object, objy, [LAUGH] that's going to have, let's say, I don't know a different name. Objy, that's maybe confusing, Object McObjectson. [LAUGH] And maybe a, I don't know, awesomeness of 5. So in this case, I'm declaring this object all on one line. Is anything different?

[00:04:55]
No, JavaScript doesn't care. What it does care about is that I tell it, hey, JavaScript, this is one property and its value, and here's another property and its value, and here's another property and its value. And there is a piece of punctuation that we need to include to tell JavaScript where properties and their values start and end.

[00:05:16]
So what separates the different property assignments here, which character?
>> Comma.
>> Comma, exactly. So the commas are what tells JavaScript, this is a new property and its value, this is a new property and its value. The commas are what matters, not the line breaks. However, you will see, in most JavaScript code, especially for complex objects, a little bit of a convention, unless it's a very short object with small number of properties and short values.

[00:05:44]
You'll see just conventionally them separated onto different lines, just to make the code more readable, it's really all it is. So let's talk about what's happening here. When we get property values. We'll move into that in a second. When we use property value, basically when we access the value with js.name, or what have you, that is going to evaluate to the value that property is pointing to.

[00:06:19]
So in this case, it's a string, and that means I can do stringy stuff with that property. So, for example, I can use my startsWith. Remember, we had the string spell startsWith that tells us whether or not a string begins with some other string. Okay, so I can call that on js.name the same way as I would call it on just the literal string JavaScript.

[00:06:49]
We can prove that to ourselves. Js.name.startsWith Java, true, because js.name evaluates to the string, JavaScript. So we can use this dot notation as if we're using the value of the property. Similar to how we can use variables, right? And similarly, we can use it wherever we would use a value.

[00:07:10]
So for example, I could assign a new variable to the expression 2022- js.birthYear and assign that to the variable age to capture JavaScript's age. So if I run this, and I now ask for age, I'll see that JavaScript is 27-years-old, it's getting up there. [LAUGH] Yes, so we can even, Assign two properties on the object.

[00:07:50]
Let's say I have an object called indecisive, where I've declared a property called lunch that points to a value sandwich. But then later, because it's indecisive, it decides that instead of sandwich, it wants lunch to be tacos. We can use the dot notation on the left-hand side of an equal sign to reassign the property to point to a different value.

[00:08:20]
So if I run this code and I make my indecisive object, let's just double-check, lunch is sandwich. And if I asked for indecisive.lunch, I get, as expected, sandwich. If I now use my assignment operator equals, with the property indecisive.lunch on the left-hand side, and I run this code and assign this to tacos.

[00:08:49]
Indecisive.lunch now, Has become tacos. Sandwich is forgotten, so yesterday's lunch. The interesting thing is that I can even do this to assign a new property on an existing object. So I can, for example, even though indecisive right now, it only knows about one property, it only has lunch.

[00:09:19]
I can declare a new property using a dot. So I can say indecisive.snack is a new thing, a new property on the indecisive object, and give it a value. And now, if I ask for indecisive, it has two properties, lunch and snack. So are objects mutable or immutable?

[00:09:40]
>> Mutable.
>> Mutable. I can change them, I have just been doing that. So our indecisive object, it is so named as indecisive because objects are mutable, so you can change what's in them as you go.