Objects

[00:00:00]
>> What happens if you have a collection of data that you wanna kinda keep together on a in a barrel of data or a package of data? Well, JavaScript lets you do that with objects. So this curly brace here denotes that I'm declaring a new object, right? So it's one object.

[00:00:16]
So I have this person object that contains all of this sub-information. So I have Brian. I have a person object who has a name, a city, a state, a favorite food. WantsTacosRightNow, it's just a generally true thing. That was wantsTacos and numbers of tacos wanted, I have no control, so I would like 100 of them right now.

[00:00:41]
So if I console.log(person), I get the whole object, right, all of this. If I console.log(person.name), this is what the name again remember, like console.log is a function on console. Person.name is just a property, it's a variable built into Brian. So those are two words that I'll use synonymously as well, a property is just a variable built into an object, right?

[00:01:04]
So this person object has a name property, is city property, a state property, so on and so forth. This could also be called a key, right? Has a name key, a city key and then, this is a key value pair. So you would call Brian Holt here, this part of it would be called the value, right?

[00:01:23]
Name being the key, Brian Holt being the value. One thing to note about keys is they're unique, right, so I can't have two names. What will actually end up happening here is this one overwrites this one. Not that you would ever want to do this, right, there's no reason that you would want to declare it twice but you can it just overwrites it, but you can have as many of the same values, right, the value is not unique, right?

[00:01:58]
So I have name and other name here and they're both Brian Holt, totally fine, right? So the name is not necessarily unique, a sort of the value, the value is not unique. Okay, and then this is the way that you access things on the object, this is a person.name and you can see down here it gives you back Brian Holt or if I said person.favoriteFood, I'll get the toggle emoji back, right?

[00:02:37]
So I did line 11 here just to show you that technically you can do this, where you use the square brackets with the quotes here. This and this do exactly the same thing, right? I just wanna show it to you so that you see them, they're both the same, it's fine.

[00:02:52]
This is, I would argue much easier to read, so I'm gonna implore you to use the way I do it on line 10. But if you see like on stack overflow or something, then it's fine, it still works. The reason why this can actually be useful is let's say, I have a variable out here if const propertyName equal to name and I console.log propertyName here between the square brackets.

[00:03:17]
What do you expect this to log now? What's stored in name, right? Or let's maybe change this to be like city. That's why you sometimes need to use that square brackets because obviously I can't just say .propertyName here. That doesn't make any sense because there's nothing on here called property name.

[00:03:44]
So if I wanna use the variable name as the accessor, you have to do it this way. Makes sense? It's kind of weird.
>> Why does the property name become accessible through the brackets of person. Does it become a part of the object when you declare it?
>> Well, it's looking for some sort of, sorry to use the technical term literal, right?

[00:04:14]
So it's looking for something that it can literally uses that, so if I wanted to have the city here, I'd have to put sorry, city. I have to put this in quotes because it's looking for something that I can use as the key, right? So I can either take this, right, which is this or I can replace it with this and get that.

[00:04:41]
But I can't put city here, right? This doesn't work because there's nothing called city, right? It's looking for a variable called city and no city variable exists.
>> It turns into just quotes with nothing in it. All right, undefined.
>> Yep. I don't know why this is not happy about that.

[00:05:17]
There is a city defined. Okay, sometimes it just gets in a bad state. Yeah, no Mark's exactly right. So if you put city here and there's no such thing as a city variable This is just undefined, right? So yeah, it tells you right there city is not defined.

[00:05:36]
Let's just comment this out, so there's all there we can see is that. So if you wanted to do that, you would have to put either quotes around this or you'd have to have some variable up here like property name. That makes sense, kind of?
>> It just seems to me that property name is declared outside the scope of person.

[00:06:10]
>> Property name here exists in the same scope that we're using it as the accessor right here. So let's get rid of these as well. I'm using property names here. This is in scope, right? It's going to replace this literally right here with city. That's what the engine's doing underneath the hood.

[00:06:32]
And then city is going to be used to go grab city out of here, right? So there's kinda like a chain of actions here, that help?
>> Yeah.
>> Cool. For the most part, don't need to care. You're gonna wanna do person.city, this would only be for some weird case where you wanted to access different variables on the object based on the situation But for now this is enough.

[00:06:57]
>> So maybe because propertyName is tied to city which is in the object, we can console log person propertyName, we'll get something. But if we say something like cons propertyName equals a random, say happy, right? But because there is no direct relationship with hobby or in the object, they won't be anything.

[00:07:23]
>> Yeah.
>> Undefined.
>> Undefined. You got it. Exactly, good job. Everyone's kinda kind of like coming up from their own angle and I'm super here for it, right? Like I had to approach a lot of these things and I'm sharing with you my problems with I had when I was learning these, but my problems are definitely your problems and vice versa, right?

[00:07:42]
So yeah, I appreciate you working through it. Okay, so let's say we have some music recommendation engine, I'm pretty sure this is how Spotify works, it's exactly like this. That's a joke, that definitely doesn't work like this. So I have to suggest music function, right, it takes in person or some sort of person object, right?

[00:08:11]
And so I call suggest music with person1, right? So person1 here is Angie and Angie is age 25 to 35. So what's the first thing that's gonna be logged out for Angie. So her age range is 25 to 35 here, right, so personnel age range, so it's gonna say, we think you will like Daft Punk because if you're in the demographic by law you must like Daft Punk or make the rules.

[00:08:43]
Okay, second one is Francesca. Franchesca is age 65 to 75, and looks like she's in this demographic, right? So person.ageRange = 65 to 75. Probably gonna like Johnny Cash. I like Johnny Cash too, you probably could have put that in mind, that's fine. But Francesca definitely, according to her Spotify algorithm likes Johnny Cash.

[00:09:10]
And we didn't do a one with anyone else but pretty sure everyone likes David Bowie, right, so that's good fallback. But this is like one way you can use objects, right? You can get this like whole kind of barrel of information about someone, one of your users and then you can pass it through and read properties off of them and do different things based on that.

[00:09:33]
Good, makes sense?
>> I guess I do have a question.
>> Yeah, please do?
>> So like just trying to understand like the context of this cuz some people may do this in a database or you could use JavaScript. Databases are very capable of doing things like select, star where age range equals 65 through 75, right?

[00:10:01]
And they will only give you back records that necessarily have those things, totally valid use case. And that would be like done on like on a back end with a server and the server would return that to you, right? And this we're all doing in the browser, right?

[00:10:14]
So we're not reaching out to any sort of database or doing all this processing in the browser. So it's gonna be contextual. So however you're solving a problem, Spotify doesn't do this in your browser, they do it on a server somewhere. They probably do it in some sort of like AI machine learning kind of cluster sort of idea, right?

[00:10:33]
And then they probably save that to a database and then you read it from the database, right? But imagine a world where you read an app that has no back end server, it just takes in a person's interests and then based on that, returns them information, this would all have to be done in JavaScript in your browser and you will be doing things like this.

[00:10:54]
So it just depends on how and where you're doing that. In other words, there's many right ways to do this. Cool, good question. So objects, so I have a dog object here. Can even have their own functions. So an example here is I have dog and I gave the name dog, I'm very creative, we'll put Luna there.

[00:11:24]
Luna is my dog. And I gave Luna a function of speak where she says woof woof. So I can say dog.speak. We see our telltale parentheses there, right? So this is going to invoke, invoke is another word for call or use. It's going to invoke the speak function or the speak method.

[00:11:47]
You could speaker method here as well. The speak function, right, this is the shorthand from doing it, you can also do speak colon function like that and that totally works as well. Up to you, I like this one, it's nice and short Objects can have nested objects inside of them.

[00:12:20]
So I can have me here and I have a name object inside of the me object but the first and last and a location with a city, state and country. And then here I can say me.name.first, right, which I'll get Brian. Me.location.state, I get Washington. I think that makes sense, right?

[00:12:53]
So to drive home another point here, what do you think console is then? Console's just an object that the browser provides for you, right? It's an object full of functions. I mean, you can console.log(console), and you're just gonna get, it's an object with a bunch of functions on it.

[00:13:21]
These are all the functions that you can call and we've been using console.log but there's a console.error. There's a console.info. Now mostly's, aren't being captured here, so you're not gonna see them. But if I do hear, you can actually see it here. So if I say console, let's just trash this so you can see everything.

[00:13:44]
If I say console.info, notice there's like this little i there. It's large differently so you can kind of look at your logs in different lengths. If I say console.error, no there was an error. You can see that there's red here, it actually gives me like a trace of where that happened, right?

[00:14:09]
It tries to be helpful. It's like, you had a problem here. You told me that you had an error. I'm gonna try and make this helpful for you. And then I can say console.log. This is a log, right? Now I can say, now only show me infos. Also I can say, rather don't show me errors and don't show me infos.

[00:14:34]
And don't show me the bugs, you can go in there and kind of slice and dice and show me some things. Don't show me other things. It's kind of fun, right? So, that's all console is, it's just an object full of functions, same with math, right? We saw math.floor, math.ceiling, math is just an object full of math methods for you.

[00:14:58]
And again, if I just say math and we can look at it here. The browser actually let me explore it. Here's all of the functions that are on maths for you. Absolute value, like you can get into like sine and cosine and A10, 8# and things like that are tench, right?

[00:15:24]
Man it's been a long time since I've had that's like hyperbolic tan, it's been a long time since I've had a geometry class, I don't actually remember. But there's logs. There's like math.pi, right? If you like to know what pi is, they'd have this value of pi that you can use.

[00:15:47]
Notice it's an all in caps. That's just like a way of saying like this is a constant number that doesn't change. It's called screening case. Math tardy which I think is, no it's math.E2.718, right? That's like E to the X, kind of thing for like logarithms, things of that nature.

[00:16:11]
Yeah, they're just objects, everything in JavaScript is just functions and objects and other things like that.