Visualizing Object Access

[00:00:00]
>> Let's talk about what's going on when we work with objects. Back to the whiteboard. So when I say, let indecisive equal curly braces, lunch colon, string sandwich, what is happening? Can anybody walk me through it? By now we're hopefully getting a little bit in the swing of things.

[00:00:24]
You wanna walk me through it? When I say let indecisive equal object, sandwich.
>> So variables can be indecisive.
>> Okay, so we're gonna create a new indecisive.
>> Maybe I spelled it right, I don't know.
>> [LAUGH]
>> [LAUGH] The value is going to be the curly brackets.

[00:00:42]
>> Okay, JavaScript is gonna conjure up a new object, that's what the curly braces are saying. The curly braces are saying, hey, JavaScript, this is an object value. And then because of the, let, what have you, we're gonna point, right, from indecisive to this object, exactly. Now the question is, what's happening inside of that object?

[00:01:07]
Well, similarly, two arrays where we had indices pointing, numbers pointing to particular values in the array. Now we have within this object, we kind of have separate pseudovariables. Which in this case, like I have a lunch property, which is sort of a pseudovariable within the object that points at a certain value.

[00:01:35]
So in this case, gosh, I don't remember, sandwich? [LAUGH] So now what we have is a reference from our variable indecisive to an object value. And that object value has some pointers, in this case, one pointer, that's named lunch, that points to a string value, that sandwich. Now what happens when I say, indecisive.lunch, or when I ask JavaScript for indecisive.lunch is, JavaScript is gonna first look at the indecisive, follow that arrow.

[00:02:21]
Find this object, and then the dot is going to say, okay, JavaScript, now, on that object, look for the pointer named lunch. So when I say, indecisive.lunch, JavaScript is going to follow these arrows from indecisive to the object, and from the objects lunch arrow to sandwich. And so this whole thing is going to evaluate to sandwich, yeah?

[00:02:56]
Okay, so now we can probably figure out what's gonna happen when we say, indecisive.lunch equals, tacos? [LAUGH] I think it was. When I say, indecisive, my goodness, you get the idea, .lunch equals tacos in quotes. Can anybody walk me through what they think is going to happen? Jason, would you mind walking me through it?

[00:03:28]
>> Sure, so it's going to look at the indecisive variable, follow the arrows down to lunch, and then it's going to replace sandwich with tacos.
>> Exactly, so it's now it's going to follow the arrow, find this arrow that points that's called lunch, conjure up a new string value tacos, and change this arrow, That's called lunch to point to tacos.

[00:04:05]
And sandwich is forgotten. So now if I ask for indecisive.lunch, JavaScript's gonna follow the arrows again and find a different value than it did before. And what happens when I say, Indecisive.Snack equals [LAUGH] chips, great, thanks. [LAUGH] Whatever, doughnuts, it did doesn't matter. So what happens when I say, indecisive.Snack equals chips?

[00:04:41]
>> OJ, you wanna talk me through it?
>> Yep, it creates a new property for the variable indecisive, or for object indecisive, and then it creates a reference to the word shapes.
>> Right, so it's gonna follow this arrow, again, the indecisive, find that object, create a new arrow what we'll name, snack, and conjure up the value, I've asked for chips, and point that arrow at that value.

[00:05:13]
>> Could you create an array that acts like an object?
>> That's a great question.
>> Conceptually, very similar, right?
>> [LAUGH] they are conceptually very similar. Indeed, in fact, arrays are.
>> Are an object?
>> I mean, kind of.
>> Let's go to our console.
>> What's the operator that we can use to find out what kind of thing a thing is?

[00:05:43]
>> Typeof?
>> Typeof, so if I do typeof, if I type it correctly, if I do typeof snack, chips, it's an object as we'd expect, right? What if I do typeof chips? Sorry, chips. Arrays are actually objects. I've been lying to you. In JavaScript basically, everything that is not a primitive value, everything that's not a string, or a number, or a Boolean, or the couple of other types that we talked about, is an object.

[00:06:21]
And so arrays are just a special kind of object that has certain built-in properties. For example, it has numeric properties that I can access values in order. And those are what we call, indices. It also has a built-in length property like we saw before. So if I ask for chips, tacos, 0, what's really happening is, under the hood, JavaScript has an object with a pointer called 0 to the first thing in this array.

[00:07:10]
So JavaScript is just doing some extra work behind the scenes to make these brackets do some fancy stuff like create an object with numeric indices that are in order, so that the things that I put in those brackets show up in order in those numbers. But under the hood, they're actually the same.

[00:07:27]
And so here's a fun thing. This square brackets notation, this works on objects too. So what was my object called, indecisive. We said that one way we can find tacos is to say indecisive.lunch. But we can also find tacos [LAUGH] by using our square brackets and using the name of the property that we want to find.

[00:07:55]
So this is very similar to how arrays let us use the square brackets with a number, which is the name of the property on the array object.
>> Objects allow us to also use the square bracket notation to access values at a named property if we give the string name of that property inside those curly braces

[00:08:20]
>> It doesn't know how to associate those individual properties to a numeric number, so you can't do indecisive zero, right?
>> Let's find out, indecisive zero. Undefined.
>> Because the object doesn't know how to parse out a numeric index?
>> Well, it's not so much that as right now my indecisive object, it has two properties, lunch and snack.

[00:08:46]
If I type, indecisive square bracket zero, JavaScript is looking for a property named zero and it doesn't find one on this object. Whereas if I had, do I still have array one? Array one, if I look at it, these indices, notice those colons, they're kind of the names of properties on that object.

[00:09:19]
And length is another property that arrays have, right? That's just built in that I get for free when I use those square brackets. JavaScript does a bunch of work to create this object with this length property and with the numeric index properties of the things that I put inside those square brackets.

[00:09:33]
So it's not so much that JavaScript doesn't know how to look up a numeric property name, it's more that when I declare objects, I am naming properties with strings. Whereas when I declare arrays, automatically JavaScript is naming them numerically. Does that makes sense? Awesome, great question. So now we know two different ways to get at our values out of an object and arrays.