Object Methods

[00:00:00]
>> Another thing we can do with properties, Is to point them to functions. Now, we're gonna talk a lot about functions in a little bit. But suffice it to say that sometimes properties aren't just values that represent nouns, as we said yesterday. They can also be actions, they can be things that do stuff.

[00:00:22]
So, for example, I can have a speak property that points to a function that when I call it prints woof woof to the console, because this is a dog object. So in my dog object, I have a couple of properties, I have a name, Ein, breed, Corgi. If anybody gets this reference, it's awesome, cuz this is a Cowboy Bebop reference.

[00:00:46]
Anyway, and speak is a property which now I can, when I call dog.speak, I can use this round parentheses to call that function and do whatever the function says to do. So if we go back to our console, And I declare my dog object, we see that this has a few different properties.

[00:01:14]
The name is a string value, the breed points to a string value, and speak points to some function speak. So now if I call dog.speak, it goes woof woof. So this is to say that sometimes you see this dot notation with the name of a property and then parentheses.

[00:01:32]
What that is, is what we call a method. So this is like basically a special type of property that it doesn't evaluate to a value, it calls a function that does something. Now, in a little bit, we're gonna talk about what functions are, how they work, what's going on with them.

[00:01:51]
But suffice it to say that you will see this dot property name parens in various places. In fact, we've seen it a couple of times already. Does anybody remember seeing this type of structure before? Like, for example,
>> .indexOf.
>> IndexOf, exactly. So we had some kind of string indexOf(r).

[00:02:24]
That indexOf, I've been calling it a spell that we cast on strings, it's actually called a method. So indexOf is a method on strings. We saw a couple of methods on arrays too. Can anybody remember one of the array methods we saw today, or we saw earlier?
>> Sort?

[00:02:42]
>> Sort, exactly. Do I still have array1? We saw array sort, exactly. So these things, these spells that we've been invoking by pressing .name parens, these are called methods, and they are essentially properties the point to functions. And functions is gonna be a big topic of discussion later in the course.

[00:03:11]
Another thing that I [LAUGH] only want to mention because you might see it somewhere out there when you're reading people's JavaScript code, is there is a word called this, a keyword in JavaScript, this. And you might see this, it's essentially a way within methods for us to refer back to the object that this method lives on.

[00:03:36]
So that we can access properties of that object. So, for example, so I had my anjana object. No, I didn't define it, that's not gonna work. I'm gonna just make it short here. Okay, my abbreviated anjana object. If I now declare a new property on that object and assign it to a function, and somewhere in that function, and we're gonna talk about functions later.

[00:04:08]
Somewhere in that function, I use this.name, in this case to log out to the console, hi, my name is, and then this.name, JavaScript's gonna look up the name on the object that I'm calling this method on. So now if I call the method anjana.speak, we'll say hi, my name is Anjana.

[00:04:28]
So this is a Pandora's box that I don't really want us to open right now. But suffice it to say, you might see this around in your JavaScript journeys, and I would just say danger, be careful with this. It is very tricky in JavaScript, it is a tricky wicket or whatever they say, a sticky wicket.

[00:04:53]
It has behavior that is kind of complicated and can be weird and can do unexpected things. So I mostly am bringing it up just to say in case you see it around there, often it's used in methods to talk about other properties on the object, but there's a lot of other weird things to know about this.

[00:05:12]
So if you are really curious, you can dig in on MDN. Cool, now, we had the question a minute ago of, can we have more details about one of the properties in our object? Can I have a, I think it was pet info object or something like that, with maybe the name of the pet, and the breed of the pet, and the favorite food of the pet, whatever.

[00:05:38]
Yes, we totally can. We can have objects as values of properties within objects. So we can essentially have nested objects. So here, I am creating a menu object with two properties, lunch and dinner. And each of those properties points to another object with three properties, appetizer, a main, and a dessert.

[00:06:07]
So what we have now is the opportunity to follow those arrows through a couple of different objects to get to the end value that we're looking for. So if I wanna find tiramisu in this object, I can find it by saying menu.lunch, which evaluates to the object I have put at the pointer lunch inside the menu object.

[00:06:36]
And within that object, I can say .dessert to find the value of the dessert property inside that inner object. Makes sense? So, yes, we had the question, can we have objects inside of other objects? We totally can, and we can have objects inside of arrays. And since we can have arrays inside of objects, we can have objects inside of arrays inside of objects.

[00:07:06]
We can have arrays inside of objects inside of arrays inside of objects. We can do whatever we want, we are the creators. But, of course, eventually, it gets a little bit complicated when you're several layers deep and you're trying to figure out how to get a value out that you want.

[00:07:20]
So try not to overcomplicate your life, if you can help it. But sometimes it is very convenient to have nested objects so that we can do things like menu.lunch.dessert, and keep it all together. And as I said, we can have objects inside of arrays. So for example here, I have an array of spices, where each element, each item inside of the spices array is an object.

[00:07:49]
And each object has a name, and a nickname, and of course, these are the Spice Girls. Yes, you know that the 90s music theme continues. So, for example, I could have a Spice Girls object with an album's property that has an array of their albums. A motto, Girl Power, of course.

[00:08:10]
And a member's property, which points to the array that I had declared earlier as the value of the spices variable. So let's put this stuff in our console. So I'm going to create my spices array. Which is an array with five things in it, and each of those things is an object with two properties, yeah?

[00:08:43]
And the browser console is really nice cuz I can kind of drill down into my stuff here. And then if I create my Spice Girls object, I have an object with these three properties. Where albums is an array of strings, members is my spices array of objects, and motto is a string.