Let's take a look at how to create user defined objects. Now before we look at the actual syntax, it might be good to address the question of why would you ever create user defined objects? Well, objects in and of themselves in the programming world help to divide complexity up into smaller components. And by dividing that complexity into smaller components and makes it easier to manage, easier to, to develop, it provides a lot of benefits. That reducing complexity is also a reason for creating user defined objects. There's other reasons there's other things that can be done certain JavaScript patterns that are possible because of JavaScript objects.

But right now approach the the creating of user defined objects with the purpose of reducing complexity in our programs. Now let's take a look at how we go about creating a user defined object. So first, we're going to look at object literals. Now this is the preferred method for creating objects in JavaScript. We'll also look at the object constructor. And I think you'll see why the object literal is preferred.

It's shorter and more concise, easier to do. So one method of creating a JavaScript object with the object literal is simply declare variable, and then use the assignment operator to set that variable equal to an object. And the curly braces define that object. That's the object literal. Right now, this is an empty object, meaning we have not added any user defined properties to that object. Now the way we can add those use, user defined properties is using the dot operator.

So in this sense, we use dot dog dot type equals Border Collie. We just added a property to the object. Remember a property in objects is simply a variable that's tied to that object. Another example, we indicate the age of the dog. If this object is representing a dog, which is obviously obviously the example I'm using, we can also have a function. So dog dot speak equal to and then we use the function keyword parentheses and then in the curly braces, we define the code block that will execute when we call this function.

Now remember, functions tied to an object are called methods. So this would be the speak method of the dog object. Now that's one way to define an object literal. First, I define the object Then I add the properties, the name values, the key values to the object. Now you can also do it all at once. So when you define the object using the object literal, you can include all the properties.

Let's look at that example. So here's this exact same object, except we're defining everything in one statement. So as you can see, after the assignment operator, where we set var dog equal, we then have the curly braces, then all of the properties are inside the opening and closing curly braces. Now notice a couple of things about how this particular object literal works. First off, the name of the name value pair. It can be enclosed within quotes or not.

Typically what you will see is it's not enclosed within quotes. If it is a valid term that can be used as a JavaScript variable, then you don't need to enclose it within quotes. If, for example, the property name had a space in it, then you would definitely need to enclose it within quotes. In this example, here, the quotes are not necessary, age could stand by itself. Now also notice after each property is specified, you use a comma except after the last one where you and the object the last property in the object, there is no comma there, okay, because this property which happens to be a method that we're defining is three lines. Now, if we had a nother property coming after that we're defining we would then of course, include a comma at the end of the curly braces here.

So the comma is important for separating the different properties that assigned to the object literal. A colon comes after the name. And then the actual value comes after the colon. So that shows two examples of how to use the object literal to define an object. Now let's look at the object constructor. Now constructors use the new keyword to define a new object.

So here we have var dog, we're using the same variable equal to new object. And then we go ahead and use the dot syntax to set properties of that object. So the main part that's different from the object literal, is this first line, how we define that object. So the object literal syntax is much shorter with just the two curly braces or the curly braces and closing all the property types. And is generally preferred by JavaScript developers. Alright, let's open the console and try some of these out.

So first off, let's just define our object and I'm going to use an object literal. Let's just do a couple of the properties. I'm going to do the type and the age. And I'm going to end it there. Now notice because I didn't do anything after the age, I don't include a comma there. Let me go ahead and press return.

That will will create our object. So if I type dog now, I can see that it returns an object. If I open that object, I can see the properties that I've already added. Okay? This protocol refers to its prototype objects objects prototype, which we will discuss in a later movie. Alright, so we have an object dog created.

Let's add a few more things to it. We're going to set up a method. So we set that equal to function. And we're simply going to console console dot log. Mark. That's all we'll do there.

So that just added a function. Let's take a look at that object again. Type dog. Now we have three user defined properties, one of which is a method. Now objects can contain other objects. So let's look at an example of that.

So let's say we want to keep track of the dog's parentage. So I can do dog dot parentage set that equal to. And now I'm going to define an a new object, an object inside of this object. And let's just set we'll make this really simple. Nothing complex here. And Father is spike.

Obviously, that is pretty simple. But it gives the idea of how we can add an object to another object. Let me display the object again. Open that object up. And now we can see we have an object we can open up further and see inside of that, okay, so it One more thing I want to add to this. Let's keep track of vet visits.

So I'm going to set dog that visits. set that equal to and this time I'm going to do an array. So I'm defining my array that will be stored inside of this object. Great. So now we have several things defined as a part of that object. How do we access those different properties if we need to use them as a part of what we're creating here?

Well, as you probably already know, is simply a matter of using that dot syntax to access the different parts of an object. So if we wanted to display the type, we would simply enter dog dot type, and it would display that type for us. If we wanted to execute the method or any method from an object, we would enter the method and then we would put parentheses after it because it's the parentheses that say to execute that code. And then of course, we get bark back as a response to that, that method. If we wanted to dig into a, an object that's a part of this object, that parentage we could do that as well. And now we can go even farther, farther and display a part of that.

So we just keep tacking on dot syntax to dig further if we need to. If we're dealing with arrays, let's say we want to add another value to that array. We can do dog dot bat visits and then dot push We're going to push another value onto it. Let's say 716 was a vet visit we didn't include or that we needed to include. Now when we press return, it adds to that array that's inside of that object. And I can see that the, the length has increased by using the length property of the array.

So once again, stringing things together with the dot syntax allows us to access any part of that object, I can then add more to the objects. So JavaScript objects, objects are mutable, meaning they can change their dynamic. So now, I realize well, we forgot to put the name in. I can add that in object just simply continues to grow or change. can go in and change the age, another year has passed. So we need to increment the age.

And there we see that that has happened. So this is how you create user defined objects in JavaScript and how you access the data, the properties, the name value pairs that are a part of those user defined objects. Let's continue to build on these concepts in the next movie.