Transcript from the "Objects" Lesson
[00:00:03]
>> Brian Holt: So we're gonna kinda start grouping things together, right? That kinda makes sense. Like if you have information about your user about of your website, right, you're gonna wanna group together their email and their, I don't know. First name and last name and location, that kinda stuff together, right?
[00:00:19]
And so something like an object is really useful for that, right? An object can be thought of just like a bag of a bunch of variables, right? You're just kinda like putting them together. So another one, it's a collection of data. So here I've described a person, Brian that loves tacos is true.
[00:00:42]
Guess who was when in doubt about that, I do love tacos. What's tacos right now. I think I was hungry when I wrote this part, too. So first off, taco wanted, that's sad. Okay, so if you say, console.logperson, right, person is what persons and object and you can tell it's an object, because of these curly braces, right, and just notice that's key and value.
[00:01:10]
So the key is the name, right? So if I ask for what is the name of this person, you'll get back Brian Holt, hence, right here. Console.log.person.name, right? You're asking for the name property and property is just another word for variable inside of an object. So console.logperson.name and you can also do it with this notation here.
[00:01:34]
Let's make this a little bit bigger. On line 11 here that I can ask for it with, these are the square brackets and quotes here. So this does work. However, just so you know, this, the line tennis preferred syntax for that. So typically, you won't do it this way.
[00:01:54]
You'll do it this way look like we do it online, tap here. So.
>> Brian Holt: And then you can see here, the console.logperson gives me the whole object here. And then person.name here it gives us Brian Holt and person with the square brackets also gives you back Brian Holt right there.
[00:02:15]
>> Brian Holt: So we use objects everywhere and all the time. So these are something that you'll get very used to using.
>> Brian Holt: Yep, keys and values. So something that's good to note about this is that a person can only have one name property, right? So these keys have to be unique per object, right?
[00:02:38]
So I can't just have another name underneath here, if something else.
>> Brian Holt: So actually, I guess it's technically valid JavaScript, but look that I over wrote Brian Holt, right? Now you can't see that here in the object, right? So every object has a, each key has to be unique per object.
[00:03:04]
However, the values don't have to be. So if I put like favoriteCity or something like that and I tried to put Seattle here, that's fine, right? The values don't have to be unique. So I can have Seattle in here twice and that's fine. It's just that you can have the keys in there twice.
[00:03:25]
Does it make sense, yeah?
>> Speaker 2: You have multiple favorite cities?
>> Brian Holt: You can and I'll show you how in just a second, okay? Cool, so using a conjunction with functions, you can do some pretty powerful stuff with objects, right? So I have this function here called suggest music that takes in a person object, right?
[00:03:51]
And so I pass in person one, which is me. And if the person's age range is 25 to 35, it says, we think you will like Daft Punk you crazy millennial which is true. I do like Daft Punk and then Jack who is my dad in case you're wondering, and he does like Johnny Cash.
[00:04:12]
It says, otherwise, maybe or it says, you're gonna like Johnny Cash. Otherwise, I think everyone likes David Bowie, right? I guess we're in Minneapolis. I should've put Prince there, right? Yeah, my bad.
>> Brian Holt: But I feel like David Bowie's okay, too, right? So and then you look down here, it's you can see that it's logs out at Punk, right?
[00:04:32]
And then Johnny Cash, right? So I think that's pretty cool is that you can pass on these objects and you can kinda create these flexible functions around having these objects passed it. Does it make sense?
>> Brian Holt: Cool.
>> Brian Holt: Now we can get even a little bit fancier and objects can have their own functions and this is called a method, but it's just a function.
[00:05:06]
I constantly call these methods which is why I'm prepping you that I'm probably soon hereafter going to call that a method, but a method is just a function that's on an object basically.
>> Brian Holt: So I have a dog object here, right, with the curly brace. It's also good to note that there is a comma here after all these properties and there has been like if you go up here.
[00:05:30]
Most all these have commas after. That is required. This last one on line eight does not have a comma, but you can. It's optional. That is up to you. So going back down here to the the dog object, so its name is dog. And then it has a speak function here, right?
[00:05:53]
So now, so I can call here dog.speak, right? And then you can see down here that it runs that function.
>> Brian Holt: Make sense? So this is the shorthand way of writing functions. It's the newer way of writing functions and objects. This is actually just shorthand for this.
>> Brian Holt: Just so you know.
[00:06:19]
So if you're like seeing people's older code, it's probably gonna look like that.
>> Brian Holt: But yeah, feel free to just do that. I'm lazy. So I wanna have as few keystrokes as possible.
>> Brian Holt: And I mean, this is just a normal function that can take in some parameter.
[00:06:44]
>> Brian Holt: And some parameter.
>> Brian Holt: It's a dog that's laughing, I suppose. [LAUGH] Questions?
>> Brian Holt: Good so far, okay?
>> Brian Holt: Objects can have objects inside of them, right, and those objects can have objects inside of them. There's no limit there. You can nest objects infinitely, right? So I have me and then I have a name object which has a first, and last.
[00:07:19]
And then I have a location which has a city, state and country. So if I console.log(me), right, it'll log that whole thing out. Or if I come in here and say, console.log(me.name.first), that's how you can access deeply nested objects, right? Logs that out right there.
>> Speaker 3: Question.
>> Brian Holt: Yeah.
[00:07:44]
>> Speaker 3: So I'm used to thinking of these or calling these like, data structures. Is there a difference between an object and a data structure? Maybe it's like an abstraction thing, but is this? Like does does JavaScript have something called data structures that are separate or is this just the same thing?
[00:08:04]
>> Brian Holt: The answer to your question is that a object is a data structure.
>> Speaker 3: Okay.
>> Brian Holt: There are.
>> Brian Holt: In the sense of like, there's not gonna be like any hash tables or anything like that. This is the only way of accomplishing objects in different languages. They're gonna have different implementations of objects basically and you choose the best one based on what kind of performance profile you want.
[00:08:28]
Like you want this to be really small in memory, but you want it to go really fast. Or it's like you want it to be slow, but you want it to be really small in memory, right? There's kind of those tradeoffs that you make. JavaScript doesn't have any of that stuff.
[00:08:40]
It's just objects.
>> Speaker 3: Okay.
>> Brian Holt: That's a good question.
>> Speaker 4: Does that mean that an array is a data structure also?
>> Brian Holt: It is. Yep, we are about to talk about those as well. But yeah, it is.
>> Speaker 4: And I don't think you ever mentioned, but undefined in the console, the result portion that's just normal for results in a console in it?
[00:09:01]
>> Brian Holt: It's an artifact of how this particular thing that I'm using works. So it's whatever is returned on the last line. So if I just put like five here, it's gonna put five there.
>> Brian Holt: So it's as if there was an implicit return statement here and it's logging out whatever is returned on that last line.
[00:09:25]
So console.log returns undefined, that's why.
>> Brian Holt: In fact, that's probably worth mentioning. Now that you've seen the syntax, right, me.name.first and then you see console.log here, we saw dog.speak, console is an object and log is a function on console, right?