Welcome everyone to Javascript Basics Part nine. Last time we went over a raise this time we're going to go over a new data type called objects that are similar to a raise but a little different. So let's get into it. Sorry, what are objects? So, arrays are good for lists but they're not good for everything. What if you wanted to store multiple pieces of information grouped together. So for example, you have a user with the first name, last name, email address and usually you can't store that in an array and access it with bracket notation. Um, I mean you could try it but it's not going to work very well. So let's go ahead and give that a shot. Let's head over to netflix. So if you don't have report open, go ahead and get that open again. Just use the script file and your previous front and project that you had open. If not just head to the front page and start a new one. Html CSS and javascript and head to the script file. So let's say we've got in a way here called the user and inside we've got 13 last name using camel case email address and let's see what was the other one we said. Yeah. So you've got that there and you want to access some pieces of that information. This really isn't an efficient way of doing it. Um part of that is because everything is stored as strings, but you can kind of get around that. Another part is because um just accessing it the way you've got it with a raise. You don't really have a way of defining that. This is now we have not his first name. But if the first name was, let's use my name, Michael. You don't have a way of defining that. This is the first name. This is the last name. You'd have to set up another array saying first name, last name. It's it's not a good way of doing it. So that is where objects come into play. Practice an object is perfect fact, objects can store multiple pieces of information slightly similarly to a raise, but the main difference are key value pairs. Key value pairs in objects are what's going to separate them from a race and here's what that looks like. And we will go back to using that user info as an example. So yeah, let's go ahead and declare it like we do a variable, let's say user and instead of square brackets, we're going to use the curly braces. So there we go. We'll hit enter. And so this is what a key value pair looks like. Key is the first thing and the value is the second thing. So define what the thing is with the key. And then the value will be the value of the item. So a better way to illustrate that would be say name is our key and the value for that is name. So that's how that works. Name is the key value of it is the name assigned to it. So we'll have it defined it as a string. So, we will call this first name and the second item will be the last name. Mm hmm. I will use my last name. Find me a Lincoln and then email be Yeah. Dot com. And use your name just for this. We don't need uh, you don't need camel case his name. Is that there we go. So that is. Mhm. What's really going to differentiate objects from a race? Are these key value pairs? Now you have it stored and you have these items inside defined as to what they are they belong to. All right. Thank you. So, the key value pairs and objects sometimes also referred to in other places as name value pairs. I refer to them as key value pairs are known as properties. So this right here. This is a property inside of the object. First name, right there. Last name. These are all different properties. So how would you access the properties of an object? There are two ways. There's a new method that we haven't used anywhere before known as dot notation. And there is a second method, which is bracket notation, which is what we've been using with zero based indexing with arrays. Oops. So what is the dot notation? This new method is the more common of the two methods when it comes to accessing object. Properties in javascript. So that's good to know. So dot notation is the more widely used commonly accepted way to access object property information. So how does it work? Let's check that out. So here we've got our we've got an object called user. So let's go ahead and I want to show you how this works with that notation. So we'll just do a console log. So that way you can see what it's going to get sent down in the console. So first you wanna access the name of the object. So we'll do user and then use a period a dot, that's the dot and dot notation. And then you want to figure out which of these pieces of information we want, let's say we want the email. So you do the name of the object. Dot and then the name of the property. So we will go ahead and hit and run right down there because it's the email attached to it. So we can even do the full thing. There we go. Oh, it is na oh, I spelled that wrong first name, First name. Here we are. Alright, so that's how it works, documentation is pretty straightforward. Um Again, the more commonly accepted way to access the object properties in javascript. So what you do is you just specify the name of the object in that case was user and the properties name. So either email for exam, last name, whatever you want that you want to access. Um there's a few limitations of dot notation. One of them is that the property name cannot start with a number. So the second method, which again I mentioned we've used before is bracket notation. Bad connotation with objects work similarly to how it does with a raise. The differences. Now use the properties name as a string instead of a number. Let's go ahead and try that out. Let's get rid of this right here. So what you do is use square brackets. Like you were doing zero based indexing and then you want to write out the name of the property inside of a string. So I'll just use single quotes. Let's say the first thing. Here we go. Let's do usually. So again, pretty straightforward, just like zero based indexing except you'll want to identify the name of the property as a string. Inside. Mhm. True. So like I said there, we are identified Properties name inside a string inside the brackets. And since it's a string, you can include any characters in the property name. Unlike dot notation. So you can start with the number if you want. You can use spaces inside. Okay, the properties are referencing just either have to be a strong, I'm gonna correct that right now. That's embarrassing. Strong string or available, referencing a string. So you can also use variable to access the proper access properties in an object. Again, as long as the property we're going after references a string. So let's check that out because this is a this is a little interesting. Okay, let's say I'm gonna get rid of all this. We will do a new example. So let's say thanks object. It will be jpeg you haven't noticed just that shortening the names of data types is common for javascript examples. Let's say LBJ, let's say we have a tell and uh kind of makes his move And then let's do eight rooster. You get to think of what other farm animals are, let's say it. Ah what is that? Rooster doesn't crow? Does it rooster? You know what this embarrassment, what the central router makes is called. So we'll just say rooster call, you know, that's not entirely wrong. All right. And then, so we have our object here. We've got our animals with their animal names. Farm animal names. And so let's say actually no. Just for the sake of this, let's make this, let's elect. And here about say, well, say let rooster equal. And then we will do animal sounds equal. Yeah. One of the objects, which is Oh, BJ for objects. Sure. So now we are get the object here, we've declared a new variable. What's your first two cow? Um and then we will do a this new variable down here, which is referencing this variable snow. Go ahead and do a counselor to cut that out. Council dot blog animal sound that gives us his movie. So even though, so we've got rooster here and it's putting out the string. So that is how that is going to work. So that is how you reference a or use documentation with an array to access the property using a variable again, as long as it's referencing a strength. Alright. So that is it for javascript objects. And the next lesson is a fun one because that is when we finally get into javascript functions. Alright, Everyone. I will see you in the next one.