This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Native Properties" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: So that second line box square bracket size equals nine.
>> Speaker 2: Mm-hm.
>> Bianca Gandolfo: There's no way to get that value out by using indexing with integers.
>> Speaker 2: True. True, because the only way you can get the value nine out Is by looking it up by the property name, which is size, which is not number, right?
[00:00:26] So.
>> Bianca Gandolfo: So arrays can be accessed by index number as well as property names? Yep. So here I am using dot notation, box dot size, box bracket size, right? If you look at box. And then we have our numerical indices as well right? We have meow and we also have woo hoo.
[00:00:46]
>> Speaker 2: Isn't it better to say arrays can have can have properties and indices?
>> Bianca Gandolfo: I'm not sure.
>> Speaker 2: Is box an object that has an array as a property, or is it an array that has a object array sized.
>> Bianca Gandolfo: Box is an object. It's an array, but an array is also an object.
[00:01:16] So it's both an array and an object. And the thing that's special about arrays is not really numerical indexes, it's really the properties and the methods that come with it. So that dot length property is something that makes arrays different. And based on the dot length property you can calculate a lot of things.
[00:01:36] So if you have an object that's keeping track of the length, and then you have the array methods that are working off of the length. Then you have an array. So you can create your own array just by having that magical length property that's keeping track of the length.
[00:01:57] And so, how the length property works, it's only going to keep track of the highest numerical indices, so it's going to ignore size, it's going to ignore itself. Length itself is a property, right, see we have this dot notation, box.length? You know it's not counting that, it's not counting box.push, pop, things like that.
[00:02:22] So it's only going to be keeping track of those numerical indices, and based on the length and the numerical indecencies, those methods can do cool things with the data that we have stored in this array slash object.
>> Speaker 3: So if box is object, then length would be three.
[00:02:43] is that right?
>> Bianca Gandolfo: Well, objects don't have a length property.
>> Speaker 3: Yeah.
>> Speaker 2: So because arrays are objects, let's say you have an empty array you're assigning meow to the first index? Behind the scenes does it add a property called zero and then a value called meow or whatever you're saying it is.
[00:03:07]
>> Bianca Gandolfo: Yeah, that's a perfect way to think of it. And that's kind of why I draw it like this. You can kind of see. This is kind of how I think about it, Is that it's just an object and it has these properties on it. And then it has the length property and a bunch of methods that give us some powerful functionality.
[00:03:23] Like we can sort things, we can reverse it. Slice, all those things that you can't do with an object. Yeah.
>> Speaker 2: So when you're console logging you're actually logging an object. So that's why it shows the size.
>> Bianca Gandolfo: That's why we can use this for, this other for loop.
[00:03:46] Remember this, the for and loop will work with box even if it's an array. And that's because, cuz it's an object.
>> Speaker 2: In that case you do pick up [INAUDIBLE].
>> Bianca Gandolfo: Yes in that case you do because you just gonna be looping through all of the property names.
[00:04:08] That includes numerical properties as well as named string properties yeah. Oops. Cool. You had a question?
>> Speaker 4: There was a question on why you would want to add a property to the array.
>> Bianca Gandolfo: For different reasons. This will. It depends, you can add methods to it, to the prototype and things.
[00:04:41] That will add, you can extend functionality that way. You can. I don't know. Mm hm?
>> Speaker 4: And then I guess following up from that, another question I saw is if I have an object with an attribute called length push pop et cetera, it will be an array?
>> Bianca Gandolfo: Yeah.
[00:05:04] So if the length property is keeping track of the numerical indices, every time you add something to it, then yes.
>> Speaker 4: Do we use object notation and you add those properties to it, it's not going to make it an array.
>> Bianca Gandolfo: But, you can mimic array functionality.
>> Speaker 4: But you have to build that all into your-
[00:05:30]
>> Speaker 2: Well, that's what he was saying. If you do build it out, they're both objects, right. One is native, one is not.
>> Bianca Gandolfo: The only hard part would be keeping track of the numerical. So you'd have to have some way to know whenever you're adding a property to the object so that you could adjust the length property.
[00:05:50] So you'd have to user a getter or setter or something.
>> Speaker 4: Adding the length property to that doesn't make an array. You're not gonna pick up automatically the pop push slice.
>> Speaker 2: We have to act he has to build all that up.
>> Speaker 4: He has to build all that up.
[00:06:03] To make a fall that functionality.
>> Bianca Gandolfo: Yeah. Right. It's little more complicated, but. Yeah. Cool. Sweet. All right, what about this? What's this gonna log? Is this even gonna work?
>> Speaker 2: No.
>> Bianca Gandolfo: Why?
>> Speaker 2: Cuz the length is in quotes. Was looking for that.
>> Bianca Gandolfo: Because length is in quotes?
[00:06:43] What is length? So length in quotes, again remember it's the same as dot notation, right? True? Length in quotes the same as dot notation, thumbs on that? Cool. So the length is 4. Right, and that goes, again to how length is working. So length is keeping track of the last index.
[00:07:08] It's not keeping track of the number of actual values in the array. Mm hm?
>> Speaker 2: They wanted me to ask you that in theory you could get away with never using dot notation and only using bracket notation.
>> Bianca Gandolfo: True, you could only use bracket notation. It's just more to type.
[00:07:36] Cool, what about this? What if I change this?
>> Speaker 2: Two.
>> Bianca Gandolfo: Undefined because length does not have quotes around it.
>> Speaker 2: That's tricky. That's not fair.
>> Bianca Gandolfo: I know. You guys should just know that I'm tricking you the whole time. And look out for that. And think about those rules.
[00:08:01] And as you're coding you should be actively thinking about the rules. Is this, series of characters, is this a string, is this a variable, is it an expression that needs to evaluated. You should always be thinking that and keeping track of what it is. And then, if it is a variable, you should also be keeping track of what that variable can represent in different scenarios all the time.
[00:08:25] Can't just take it for granted.
>> Speaker 2: Yeah, can you go back one slide again?
>> Bianca Gandolfo: Sure.
>> Speaker 2: What did you say at the very tail end of this explanation? Is that all it looks at the last-
>> Bianca Gandolfo: Yeah it looks at the last, the highest, numeric index and it adds one.
[00:08:47] Because a length is always plus one.
>> Speaker 2: Because it's zero based.
>> Bianca Gandolfo: Because it's zero based, absolutely. Mm hm.
>> Speaker 2: That's weird.
>> Bianca Gandolfo: That's programming. [LAUGH]
>> Speaker 2: [COUGH]
>> Bianca Gandolfo: Yeah. Yeah, I tell some of my students you're my number zero student.
>> Speaker 2: [LAUGH]
>> Bianca Gandolfo: Let's see. So we did that one.
[00:09:12] And then, here. So what if we- What if we wanted to look at the last index. Of our array?
>> Speaker 4: Minus 1.
>> Speaker 2: Minus 1.
>> Bianca Gandolfo: Like this?
>> Speaker 2: Just the length? Just minus 1.
>> Bianca Gandolfo: Actually that only works with slice. You're thinking of slice. So.
>> Speaker 4: Box.length?
[00:09:44]
>> Bianca Gandolfo: Box.length minus 1, totally. So box.length, right, is gonna be four, and then our last index is three as we can see here, so we need to subtract one. And then back to the thing about the bracket notation being able to evaluate expressions, this is a perfect example of when you'd wanna do that.
[00:10:04] So here we're doing a property look up and we're doing math. So all those things are happening and those are things that you cannot do in dot notation, and it just looks weird right like look at this. Right, that just doesn't look right.